Avatars
Avatar sizing
<!--xs-->
<div class="avatar-item me-2 mb-2">
<img src="assets/img/avatar/1.jpg" alt="" class="avatar rounded-circle xs">
</div>
<!--sm-->
<div class="avatar-item me-2 mb-2">
<img src="assets/img/avatar/2.jpg" alt="" class="avatar rounded-circle sm">
</div>
<!--default-->
<div class="avatar-item me-2 mb-2">
<img src="assets/img/avatar/3.jpg" alt="" class="avatar rounded-circle">
</div>
<!--lg-->
<div class="avatar-item me-2 mb-2">
<img src="assets/img/avatar/4.jpg" alt="" class="avatar rounded-circle lg">
</div>
<!--xl-->
<div class="avatar-item me-2 mb-2">
<img src="assets/img/avatar/5.jpg" alt="" class="avatar rounded-circle xl">
</div>
Initials
JD
<!--Update the size using xs,sm,lg,xl utility classes-->
<div class="avatar rounded-circle bg-primary text-white flex-center">
JD
</div>
Status
<!--Offline-->
<div class="avatar-status lg off rounded-pill flex-center me-2 mb-2">
<img src="assets/img/avatar/4.jpg" alt="" class="avatar">
</div>
<!--Online-->
<div class="avatar-status lg on rounded-pill flex-center me-2 mb-2">
<img src="assets/img/avatar/4.jpg" alt="" class="avatar">
</div>
<!--Away-->
<div class="avatar-status lg away rounded-pill flex-center me-2 mb-2">
<img src="assets/img/avatar/4.jpg" alt="" class="avatar">
</div>
<!--Do not dusturb-->
<div class="avatar-status lg dnd rounded-pill flex-center me-2 mb-2">
<img src="assets/img/avatar/4.jpg" alt="" class="avatar">
</div>
Group
<!--Avatar group default-->
<div class="avatar-group">
<!--Avatar group item-->
<div class="avatar-group-item avatar rounded-circle overflow-hidden shadow">
<img src="assets/img/avatar/1.jpg" alt="" class="img-fluid avatar">
</div>
<!--Avatar group item-->
<div class="avatar-group-item avatar rounded-circle overflow-hidden shadow">
<img src="assets/img/avatar/11.jpg" alt="" class="img-fluid avatar">
</div>
<!--Avatar group item-->
<div class="avatar-group-item avatar rounded-circle overflow-hidden shadow">
<img src="assets/img/avatar/12.jpg" alt="" class="img-fluid avatar">
</div>
<!--Avatar group item-->
<div class="avatar-group-item avatar fs-5 bg-secondary text-white shadow flex-center rounded-circle overflow-hidden">
<i class="bx bx-plus"></i>
</div>
</div>
Let's start building stunning websites
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.