Different size of avatars
Use the below classes to change the size of the avatars
.avatar-xxs
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
Avatars with Rounded Circle
add .rounded-circle
class to make an avatar image circle
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
Avatar with initials
You can use below classes to use initials of name as avatar
.avatar-xxs
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
Rounded Circle Background
You can use below classes to use initials of name as avatar in a rounded circle
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
Different shape of images
Use the below classes to change the shapes of the avatars
.rounded
.rounded-circle
.img-thumbnail
.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.
Please reload the page when you change the viewport size to view the responsive functionalities correctly
Copyright © 2021 XatoWeb, All rights reserved.
Crafted with extra