Avatar

Users or entities shown as an image or initials, with sizes, status indicators and stacks.

Bootstrap’s avatar docs describe the markup and CSS.

Example

Set src and alt for an image, or put initials inside the element. If the image fails to load, the initials show instead.

HTML

<div class="hstack gap-2">
  <span bsAvatar src="avatar.svg" alt="Jane Doe">JD</span>
  <span bsAvatar>AB</span>
</div>

Themes

Color initials with theme, and add subtle for a lighter background.

CDEFGHIJKLMN

HTML

<div class="hstack gap-2 flex-wrap">
  <span bsAvatar theme="primary">CD</span>
  <span bsAvatar theme="success">EF</span>
  <span bsAvatar theme="danger">GH</span>
  <span bsAvatar theme="primary" subtle>IJ</span>
  <span bsAvatar theme="success" subtle>KL</span>
  <span bsAvatar theme="danger" subtle>MN</span>
</div>

Sizes and status

Set size to xs, sm, lg or xl. status adds an online, offline, busy or away indicator with an accessible label, which you can change with statusLabel.

XSSMMDLGXL

HTML

<div class="hstack gap-3 align-items-center">
  <span bsAvatar size="xs" status="online">XS</span>
  <span bsAvatar size="sm" status="away">SM</span>
  <span bsAvatar status="busy">MD</span>
  <span bsAvatar size="lg" status="offline">LG</span>
  <span bsAvatar size="xl" status="online" statusLabel="Available">XL</span>
</div>

Avatar stack

Wrap avatars in .avatar-stack to overlap them. The first avatar is on top.

ABCDEF+5

HTML

<div class="avatar-stack">
  <span bsAvatar theme="primary">AB</span>
  <span bsAvatar theme="success">CD</span>
  <span bsAvatar theme="danger">EF</span>
  <span bsAvatar theme="secondary">+5</span>
</div>

API

BsAvatar

Selector: span[bsAvatar], div[bsAvatar], a[bsAvatar]

Inputs

Name	Type	Default	Description
`src`	`string \| null`	`null`	Image URL. Without it, the content (initials) shows.
`alt`	`string`	`''`	Text alternative of the image.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the avatar.
`theme`	`BsTheme \| null`	`null`	Theme color for initials.
`subtle`	`boolean`	`false`	Uses a subtle background.
`status`	`'online' \| 'offline' \| 'busy' \| 'away' \| null`	`null`	Presence indicator.
`statusLabel`	`string \| null`	`null`	Accessible label of the status. Defaults to its name.