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.




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.
Colors
Use class bg-{color-name}
to change background color of your avatar.
Light Colors
Use class bg-light-{color-name}
to change background color of your avatar.
Icons
Use .avatar-icon
class for Icon variant
Status
Use class .avatar-status-{online | offline | away | busy}
after .avatar-content
.

Avatar Group
Wrap bunch of avatars with .avatar-group
class.





Avatar Group with tooltip
Avatar info inside tooltip variant




