Responsive Avatar Classes to Extend Bootstrap 5

How to make use of it:

1. Import the Avatar Component stylesheet.

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

2. Or Insert the compiled stylesheet into the doc.

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

3. Create avatars on the web page and decide the avatar dimension utilizing the next 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
// Add Image Here

4. Auto resizes the avatars based mostly on the display screen width utilizing the avatar-{breakpoint}- 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>

Responsive Avatar UI Component, Bootstrap Avatar Plugin/Github

See Demo And Download