Documentation

Browse source code
On this page

Avatars

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

Default markup

JL 
<span class="avatar" style="background-image: url(...)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(...)"></span>

Avatar image

Set an image as the background.

<span class="avatar" style="background-image: url(...)"></span>
<span class="avatar" style="background-image: url(...)"></span>
<span class="avatar" style="background-image: url(...)"></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 icon code -->
</span>
<span class="avatar"><!-- SVG icon code -->
</span>
<span class="avatar"><!-- SVG icon code -->
</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(...)"></span>
<span class="avatar avatar-md" style="background-image: url(...)"></span>
<span class="avatar">EP</span>
<span class="avatar avatar-sm" style="background-image: url(...)"></span>

Avatar status

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

SA 5 
<span class="avatar" style="background-image: url(...)"></span>
<span class="avatar" style="background-image: url(...)">
  <span class="badge bg-danger"></span></span>
<span class="avatar" style="background-image: url(...)">
  <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(...)">
  <span class="badge bg-info"></span></span>
<span class="avatar" style="background-image: url(...)">
  <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(...)"></span>
<span class="avatar rounded" style="background-image: url(...)"></span>
<span class="avatar rounded-circle">AA</span>
<span class="avatar rounded-0" style="background-image: url(...)"></span>
<span class="avatar rounded-lg" style="background-image: url(...)"></span>

Avatars list

You can easily create a list of avatars.

JL 
<div class="avatar-list">
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar">JL</span>
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar" style="background-image: url(...)"></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(...)"></span>
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar" style="background-image: url(...)"></span>
  <span class="avatar">+8</span>
</div>