Sizes

For default avatar, You have to use inline attributes to set height and width of image. Use class .avatar-{sm|lg|xl} to modify size of your avatar.

avatar
avatar
avatar
avatar

Initials

Wrap your content with .avatar class and wrap your text in .avatar-content to create a avatar with initials. You can also use solid color initials.

PI
PI
PI
PI

Colors

Use class bg-{color-name} to change background color of your avatar.

PI
PI
PI
PI
PI
PI

Light Colors

Use class bg-light-{color-name} to change background color of your avatar.

PI
PI
PI
PI
PI
PI

Icons

Use .avatar-icon class for Icon variant

Status

Use class .avatar-status-{online | offline | away | busy} after .avatar-content.

avatar
BV
AB

Avatar Group

Wrap bunch of avatars with .avatar-group class.

Avatar
Avatar
Avatar
Avatar
Avatar

Avatar Group with tooltip

Avatar info inside tooltip variant

Avatar
Avatar
Avatar
Avatar
Avatar