Responsive Avatar UI Component For Bootstrap 5

Preview:

Description:

A CSS UI component for Bootstrap 5 that enables you to create responsive avatars of different sizes on the web app.

How to use it:

1. Import the Avatar Component stylesheet.

@import "./bootstrap-avatar/scss/style.scss";

2. Or Insert the compiled stylesheet into the document.

<link href="./dist/avatar.css" rel="stylesheet" />

3. Create avatars on the page and determine the avatar size using the following CSS classes:

<span class="avatar avatar-16 bg-primary text-white rounded-circle">A</span>
<span class="avatar avatar-24 bg-primary text-white rounded-circle">B</span>
<span class="avatar avatar-32 bg-primary text-white rounded-circle">C</span>
<span class="avatar avatar-48 bg-primary text-white rounded-circle">D</span>
<span class="avatar avatar-64 bg-primary text-white rounded-circle">E</span>
<span class="avatar avatar-96 bg-primary text-white rounded-circle">F</span>
<span class="avatar avatar-128 bg-primary text-white rounded-circle">G</span>
// Or custom image
<img class="avatar avatar-16 bg-light rounded-circle text-white" src="icon.svg" />

4. Auto resize the avatars based on the screen width using the avatar-{breakpoint}-{size} class:

<span class="avatar avatar-16 avatar-md-24 avatar-lg-32 avatar-xl-64 avatar-xxl-128 bg-primary text-white rounded-circle">A</span>

Changelog:

v1.2.0 (12/28/2020)

• Force width/height to be 100% for direct child nodes of .avatar

v1.1.0 (12/28/2020)

• Change the icons to flex display

v1.0.4 (12/19/2020)

• Remove a 1px offset from the main avatar class.