Avatar

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Example of Image Avatar

Avatar is available in 4 different sizes. You can use image in Avatar. You need to include class avatar and for size add class according to size avatar-lg-size, avatar-md-size, avatar-sm-size, avatar-xs-size (e.g. class="avatar avatar-lg-size") Don't forget to add Responsive Image class names for img element.

Avatar of various size

Avatar of square shape

Avatar with text

You can use initial letters of user in Avatar as well. You need to include class avatar-text along with avatar and size class. (e.g. class="avatar avatar-lg-size avatar-text")

Avtar with Badges

Badges are being used to display a notification count or status information

Example of Status Badge

We have 2 types of status badges that can be integrated with Avatars. You can show colors to show the online status of user. And to show cart or notification count, you can use number badge. Check code below to copy the html part as is.