Avatars

Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.

Default markup

Use the avatar class to add an avatar to your interface design for greater customisation.

<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 to make users easy to indentify and create a personalised experience.

<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 also use initials instead of pictures.

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

Apart from pictures and initials, you can also use icons to make the avatars more universal.

<span class="avatar"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
  <!-- SVG icon code with class="avatar-icon" -->
</span>
<span class="avatar"><!-- Download SVG icon from http://tabler-icons.io/i/plus -->
  <!-- SVG icon code with class="avatar-icon" -->
</span>
<span class="avatar"><!-- Download SVG icon from http://tabler-icons.io/i/user-plus -->
  <!-- SVG icon code with class="avatar-icon" -->
</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 or down to different sizes based on what you need.

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>
<span class="avatar avatar-xs" style="background-image: url(...)"></span>

Avatar status

Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.

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. You can make them round or square and change their border radius.

<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

Create a list of avatars within one parent container.

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

Stacked list

Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.

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>

Documentation