Documentation

Browse source code
index Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Progress Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Avatars

Create and group avatars of various shapes and sizes with one component.

Default markup

JL 
<span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(./img/avatars/002m.jpg)"></span>

Avatar image

Set an image as the background.

<span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
<span class="avatar" style="background-image: url(./img/avatars/002m.jpg)"></span>
<span class="avatar" style="background-image: url(./img/avatars/003m.jpg)"></span>

Initials

You can easily use initials instead of images.

AB CD EF GH IJ 
<span class="avatar">AB</span>
<span class="avatar">CD</span>
<span class="avatar">EF</span>
<span class="avatar">GH</span>
<span class="avatar">IJ</span>

Avatar icons

You can also use icons in avatars.

<span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</span>
<span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</span>
<span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
</span>

Avatar initials color

Customize the color of the avatars’ background. You can click here to see the list of available colors.

AB CD EF GH IJ 
<span class="avatar bg-green-lt">AB</span>
<span class="avatar bg-red-lt">CD</span>
<span class="avatar bg-yellow-lt">EF</span>
<span class="avatar bg-blue-lt">GH</span>
<span class="avatar bg-purple-lt">IJ</span>

Avatar size

Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.

HS EP 
<span class="avatar avatar-xl">HS</span>
<span class="avatar avatar-lg" style="background-image: url(./img/avatars/003f.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(./img/avatars/002f.jpg)"></span>
<span class="avatar">EP</span>
<span class="avatar avatar-sm" style="background-image: url(./img/avatars/001f.jpg)"></span>

Avatar status

Add an online or offline status indicator to show user’s availability.

SA 5 
<span class="avatar" style="background-image: url(./img/avatars/006m.jpg)"></span>
<span class="avatar" style="background-image: url(./img/avatars/004f.jpg)">
   <span class="badge bg-danger"></span>
</span>
<span class="avatar" style="background-image: url(./img/avatars/007m.jpg)">
   <span class="badge bg-success"></span>
</span>
<span class="avatar">
   <span class="badge bg-warning"></span>
   SA</span>
<span class="avatar" style="background-image: url(./img/avatars/009m.jpg)">
   <span class="badge bg-info"></span>
</span>
<span class="avatar" style="background-image: url(./img/avatars/010m.jpg)">
   <span class="badge bg-gray">5</span>
</span>

Avatar shape

Change the shape of an avatar with the default Bootstrap image classes.

AA 
<span class="avatar" style="background-image: url(./img/avatars/005f.jpg)"></span>
<span class="avatar rounded" style="background-image: url(./img/avatars/006f.jpg)"></span>
<span class="avatar rounded-circle">AA</span>
<span class="avatar rounded-0" style="background-image: url(./img/avatars/008f.jpg)"></span>
<span class="avatar rounded-lg" style="background-image: url(./img/avatars/009f.jpg)"></span>

Avatars list

You can easily create a list of avatars.

JL 
<div class="avatar-list">
   <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
   <span class="avatar">JL</span>
   <span class="avatar" style="background-image: url(./img/avatars/002m.jpg)"></span>
   <span class="avatar" style="background-image: url(./img/avatars/003m.jpg)"></span>
   <span class="avatar" style="background-image: url(./img/avatars/000f.jpg)"></span>
</div>

Stacked list

Make the list stack when it reaches a certain length.

EB +8 
<div class="avatar-list avatar-list-stacked">
   <span class="avatar">EB</span>
   <span class="avatar" style="background-image: url(./img/avatars/016f.jpg)"></span>
   <span class="avatar" style="background-image: url(./img/avatars/015m.jpg)"></span>
   <span class="avatar" style="background-image: url(./img/avatars/017f.jpg)"></span>
   <span class="avatar" style="background-image: url(./img/avatars/018f.jpg)"></span>
   <span class="avatar" element="a">+8</span>
</div>