Avatars
Examples for opting different size of image classes.
Example
Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size.
<span class="avatar avatar-xxl avatar-circle avatar-border-xxl mb-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-xxl-status avatar-success"> </span>
</span>
<span class="avatar avatar-xl avatar-circle avatar-border-xl mb-2 ms-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-xl-status avatar-danger"> </span>
</span>
<span class="avatar avatar-lg avatar-circle avatar-border-lg ms-2 mb-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-lg-status avatar-warning"> </span>
</span>
<span class="avatar avatar-circle avatar-border mb-2 ms-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-offline"> </span>
</span>
<span class="avatar avatar-sm avatar-circle avatar-border-sm ms-2 mb-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-sm-status avatar-offline"> </span>
</span>
<span class="avatar avatar-xs avatar-circle avatar-border-xs ms-2 mb-2">
<img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
<span class="avatar-status avatar-xs-status avatar-offline"> </span>
</span>
Group
Group your avatars with the help of a .avatar-group class.
+6
+6
+6
+6
+6
+6
<div class="row align-items-center">
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-xxl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-xxl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-xxl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-xxl avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-xl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-xl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-xl avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-xl avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-lg avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-lg avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-lg avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-lg avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-sm avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-sm avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-sm avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-sm avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
<div class="col-auto"<
<div class="avatar-group mb-3"<
<span class="avatar avatar-xs avatar-circle"<
<img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
</span<
<span class="avatar avatar-xs avatar-circle"<
<img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
</span<
<span class="avatar avatar-xs avatar-circle"<
<img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
</span<
<span class="avatar avatar-xs avatar-circle"<
<span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
</span<
</div<
</div<
</div>