Avatar can be used for displaying image, icon, or character on square or circle shaped elements. Put image, icon, or character into .avatar-display. Look the example below.

B

Extend default avatar element with .avatar-circle to change its shape to be circular.

A

If you want to change avatar size, you can use .avatar-{sm|lg} helper classes

Change avatar color for functionality, check examples below.

Addon can be replaced to top-start or bottom-end of avatar element. Use .avatar-addon and extend with .avatar-addon-{top|bottom} to set placement. You can put badge or marker into avatar addon.

Wrap a series of avatar elements into .avatar-group to group the elements. Instead of applying avatar sizing classes to every avatar in a group, just add .avatar-group-{lg|sm} to each .avatar-group