Components

Avatars

Represent people and entities with images, initials, sizes, presence indicators, groups, and overflow counts.

Components

Avatars

Avatars are supporting identity cues. Always keep the person or entity name available in adjacent text or an accessible label.

Images and fallbacks

Ada Lovelace

HTML · Image and initials

<span class="bs-avatar"><img class="bs-avatar-image" src="ada.jpg" alt=""></span>
<span class="bs-avatar"><span class="bs-avatar-fallback" aria-hidden="true">AL</span></span>

Sizes and status

SMLXL

HTML · Sizes and status

<span class="bs-avatar bs-avatar-sm">…</span>
<span class="bs-avatar bs-avatar-lg">…<span class="bs-avatar-status" aria-label="Online"></span></span>

Avatar groups

ALGHMK+2

HTML · Avatar group

<div class="bs-avatar-group" aria-label="5 project members">
  <span class="bs-avatar"><span class="bs-avatar-fallback">AL</span></span>
  <span class="bs-avatar bs-avatar-excess"><span class="bs-avatar-fallback">+2</span></span>
</div>

Decorative image

Use an empty image alt when the visible name already identifies the person.

Status text

Do not rely on the status dot’s color alone. Add a label or adjacent status text.

Group label

Name the group and expose the actual members elsewhere when the stack summarizes collaboration.

Avatar API

.bs-avatar, .bs-avatar-sm, .bs-avatar-lg, .bs-avatar-xl, .bs-avatar-image, .bs-avatar-fallback, .bs-avatar-status, .bs-avatar-status-warning, .bs-avatar-status-danger, .bs-avatar-group, and .bs-avatar-excess compose the family.