Avatars are versatile UI components designed to visually represent users, profiles, or entities within
an interface.
Avatars with Initials
Use initials when user photos are not available. Initial-based avatars offer a lightweight, consistent
representation that scales across sizes and maintains visual rhythm in lists or compact layouts.
<div class="d-flex align-items-center">
<span class="avatar avatar-xl rounded-circle text-bg-primary me-2">
<span>XL</span>
</span>
<span class="avatar avatar-lg rounded-circle bg-success text-light me-2">
<span>LG</span>
</span>
<span class="avatar avatar-md rounded-circle bg-warning text-light me-2">
<span>MD</span>
</span>
<span class="avatar avatar-sm rounded-circle bg-danger text-light me-2">
<span>SM</span>
</span>
<span class="avatar avatar-xs rounded-circle bg-info text-light">
<span>XS</span>
</span>
</div>
<div class="d-flex align-items-center"> <span class="avatar avatar-xl
rounded-circle text-bg-primary me-2"> <span>XL</span> </span> <span
class="avatar avatar-lg rounded-circle bg-success text-light me-2">
<span>LG</span> </span> <span class="avatar avatar-md rounded-circle
bg-warning text-light me-2"> <span>MD</span> </span> <span
class="avatar avatar-sm rounded-circle bg-danger text-light me-2">
<span>SM</span> </span> <span class="avatar avatar-xs rounded-circle
bg-info text-light"> <span>XS</span> </span> </div>
Avatars with Images
Use image avatars for stronger visual recognition. Provide high-quality square images and crop them to
a circle; include descriptive alt text so screen readers can convey who the avatar represents.
<div class="d-flex align-items-center">
<span class="avatar avatar-xl me-2">
<img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded-circle" alt="Avatar">
</span>
<span class="avatar avatar-lg me-2">
<img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded-circle" alt="Avatar">
</span>
<span class="avatar avatar-md me-2">
<img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded-circle" alt="Avatar">
</span>
<span class="avatar avatar-sm me-2">
<img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded-circle" alt="Avatar">
</span>
<span class="avatar avatar-xs">
<img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded-circle" alt="Avatar">
</span>
</div>
<div class="d-flex align-items-center"> <span class="avatar avatar-xl
me-2"> <img src="https://placehold.co/128x128/31343C/EEE?text=A"
class="img-fluid rounded-circle" alt="Avatar"> </span> <span
class="avatar avatar-lg me-2"> <img
src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid
rounded-circle" alt="Avatar"> </span> <span class="avatar
avatar-md me-2"> <img src="https://placehold.co/128x128/31343C/EEE?text=A"
class="img-fluid rounded-circle" alt="Avatar"> </span> <span
class="avatar avatar-sm me-2"> <img
src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid
rounded-circle" alt="Avatar"> </span> <span class="avatar
avatar-xs"> <img src="https://placehold.co/128x128/31343C/EEE?text=A"
class="img-fluid rounded-circle" alt="Avatar"> </span> </div>
Accessibility: Provide meaningful alt text for image avatars (for example, "Profile photo of
Jane Doe"). If an avatar is purely decorative, mark it with
aria-hidden="true". For initial avatars, ensure the initials are
programmatically readable (they appear as text inside the element) and maintain sufficient color
contrast against the background.
Stacked / Group Avatars
Grouped avatars communicate membership or presence (for example, participants on a chat thread or
project collaborators). Keep the markup simple: use .avatar-group to overlap avatars and
avatar-md for a compact, readable size. If avatars are interactive, wrap them in a
focusable control (link or button) and provide visible focus styles.
<div class="avatar-group">
<span class="avatar avatar-md rounded-circle me-0">
<img src="https://placehold.co/128x128/111827/FFF?text=J" class="img-fluid rounded-circle" alt="John Doe">
</span>
<span class="avatar avatar-md rounded-circle me-0">
<img src="https://placehold.co/128x128/0ea5a4/FFF?text=A" class="img-fluid rounded-circle" alt="Anna Smith">
</span>
<span class="avatar avatar-md rounded-circle me-0">
<img src="https://placehold.co/128x128/ef4444/FFF?text=M" class="img-fluid rounded-circle" alt="Miguel Alvarez">
</span>
<span class="avatar avatar-md rounded-circle text-bg-primary">
<span>+3</span>
</span>
</div>
<div class="avatar-group"> <span class="avatar avatar-md rounded-circle
me-0"> <img src="https://placehold.co/128x128/111827/FFF?text=J"
class="img-fluid rounded-circle" alt="John Doe"> </span> <span
class="avatar avatar-md rounded-circle me-0"> <img
src="https://placehold.co/128x128/0ea5a4/FFF?text=A" class="img-fluid
rounded-circle" alt="Anna Smith"> </span> <span class="avatar
avatar-md rounded-circle me-0"> <img
src="https://placehold.co/128x128/ef4444/FFF?text=M" class="img-fluid
rounded-circle" alt="Miguel Alvarez"> </span> <span
class="avatar avatar-md rounded-circle text-bg-primary">
<span>+3</span> </span> </div>
Accessibility: Use descriptive alt text for image avatars (for example, "Profile
photo of John Doe"). When avatars are purely decorative, add
aria-hidden="true" and ensure any interactive avatar has a keyboard-focusable
wrapper.