Avatar
Circular avatars
Use the .rounded-full utility class to make avatars circular.
Rounded avatars
Use the border radius utility classes to make avatars more rounded.
Circular avatars with top status
Circular avatars with all kinds of status indicators.
Rounded avatars with top status
Rounded avatars with all kinds of status indicators.
Circular avatars with bottom status
Circular avatars with all kinds of status indicators.
Rounded avatars with bottom status
Rounded avatars with all kinds of status indicators.
Placeholder icon
Circular avatars with placeholder icon.
Placeholder initials
Circular avatars with placeholder initials.
Displaying a tooltip
A tooltip can be used with an avatar to be displayed on focus or hover.
Media
Circular avatar with text.
Maria Wanner
maria@gmail.com
Border color
The color of the border around the avatar. Any color that the CSS border-color property accepts can be used.
With dropdown
Display a group of avatars that do not fit with the dropdown menu by clicking or hovering on the initial.
Stack
Avatar group stacked small to large sizes.
Grid
Avatar group displayed in a grid.
9+