Avatar

Image Avatar

Display user avatars with an image or text fallback. Sizing from .avatar-sm to .avatar-xl.

.avatar .avatar-img

<div class="avatar">
  <img class="avatar-img rounded-circle" src="..." alt="...">
</div>

Text Avatar

Use .avatar-title as a text fallback when no image is available. Font size scales automatically with avatar size.

.avatar-title

<div class="avatar">
  <span class="avatar-title rounded-circle">AB</span>
</div>

Sizing

Four sizes available. .avatar-xl is responsive — larger on lg+ screens.

.avatar-sm .avatar-lg .avatar-xl

Class Size Note .avatar-sm 2.55em Small .avatar 3em Default (no modifier needed) .avatar-lg 3.75em Large .avatar-xl 3.75em / 4.5em Responsive: 3.75em < lg, 4.5em ≥ lg

<div class="avatar avatar-sm">...</div>
<div class="avatar">...</div>
<div class="avatar avatar-lg">...</div>
<div class="avatar avatar-xl">...</div>

// custom size via CSS variable
<div class="avatar" style="--bs-avatar-size: 5em">...</div>

Shapes

Combine with Bootstrap border-radius utilities for different shapes.

.rounded-circle .rounded-3 .rounded-0

// circle (default usage)
<img class="avatar-img rounded-circle" ...>

// rounded square
<img class="avatar-img rounded-3" ...>

// square
<img class="avatar-img rounded-0" ...>

Avatar Group

Stack avatars with .avatar-group. Each subsequent avatar overlaps by half its size.

.avatar-group

<div class="avatar-group">
  <div class="avatar">
    <img class="avatar-img rounded-circle border border-2 border-body" src="..." alt="...">
  </div>
  <div class="avatar">
    <img class="avatar-img rounded-circle border border-2 border-body" src="..." alt="...">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle border border-2 border-body">+3</span>
  </div>
</div>

CSS Variables

Override avatar styling via custom properties on .avatar.

Available variables

Variable Default Description --bs-avatar-size 3em Width & height of the avatar --bs-avatar-title-bg darkest Background color of text avatars --bs-avatar-title-color white Text color of text avatars

// custom size
<div class="avatar" style="--bs-avatar-size: 5em">...</div>

// custom title colors
<div class="avatar" style="--bs-avatar-title-bg: var(--bs-primary); --bs-avatar-title-color: #fff">
  <span class="avatar-title rounded-circle">AB</span>
</div>

On this page