Avatars

Source Edit this page

Avatars are used to represent user's profile image.

Avatar

Add .avatar class to any image.

profile 
<img class="avatar" src="/images/profile.png" alt="profile"/>

Variations

With the help of utilities different variations of a chips can be created.

Size

Use .avatar-sm, .avatar-md, .avatar-lg and .avatar-xl for different sizes.

profile profile profile profile profile 
<img class="avatar avatar-sm" src="/images/profile.png" alt="profile"/>
<img class="avatar" src="/images/profile.png" alt="profile"/>
<img class="avatar avatar-md" src="/images/profile.png" alt="profile"/>
<img class="avatar avatar-lg" src="/images/profile.png" alt="profile"/>
<img class="avatar avatar-xl" src="/images/profile.png" alt="profile"/>

Shape

Adjust border radius and other border properties with border utilities.

profile profile profile 
<img class="avatar avatar-lg rounded-sm" src="/images/profile.png" alt="profile"/>
<img class="avatar avatar-lg rounded-full" src="/images/profile.png" alt="profile"/>
<img class="avatar avatar-lg rounded-full border-2 bd-secondary" src="/images/profile.png" alt="profile"/>