Avatars

 
    <!--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>
 

    <!--Update the size using xs,sm,lg,xl utility classes-->
    <div class="avatar rounded-circle bg-primary text-white flex-center">
        JD
    </div>

    <!--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>

        <!--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>