Different size of avatars

Use the below classes to change the size of the avatars

image

.avatar-xxs

image

.avatar-xs

image

.avatar-sm

image

.avatar-md

image

.avatar-lg

image

.avatar-xl

Avatars with Rounded Circle

add .rounded-circle class to make an avatar image circle

image

.avatar-md .rounded-circle

image

.avatar-lg .rounded-circle

image

.avatar-xl .rounded-circle

Avatar with initials

You can use below classes to use initials of name as avatar

XXS

.avatar-xxs

XS

.avatar-xs

SM

.avatar-sm

MD

.avatar-md

LG

.avatar-lg

XL

.avatar-xl

Rounded Circle Background

You can use below classes to use initials of name as avatar in a rounded circle

XS

.avatar-xs

SM

.avatar-sm

MD

.avatar-md

LG

.avatar-lg

Different shape of images

Use the below classes to change the shapes of the avatars

image

.rounded

image

.rounded-circle

image

.img-thumbnail

image

.rounded-circle .img-thumbnail

Group of images

Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.

avatar
avatar
avatar
avatar
avatar
JB
PM

Please reload the page when you change the viewport size to view the responsive functionalities correctly