Avatars
Sizing - 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-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
Sizing - Background Color
Using utilities classes of background e.g. bg-* allows you to have any
background color as well.
Using .avatar-xs
Using .avatar-sm
Using .avatar-md
Using .avatar-lg
Using .avatar-xl
Rounded Circle
Using an additional class .rounded-circle in <img>
element creates the rounded avatar.
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
Rounded Circle Background
Using an additional class .rounded-circle in <img>
element creates the rounded avatar.
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
Avatar Group
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.
Images Shapes
Avatars with different sizes and shapes.
.rounded
.rounded
.rounded-circle
.img-thumbnail
.rounded-circle .img-thumbnail