Colors

Use color bg-* to change the background theme color of avatar.

P AD
                  

                       <div class="card">
                        <div class="card-header">
                         <h5>Colors</h5>
                         <p class="text-muted">Use color <code>bg-*</code> to change the background theme color of avatar.
                         </p>
                        </div>
                        <div class="card-body">
                         <div class="d-flex gap-3 flex-wrap">
                          <span class="bg-primary h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="bg-secondary h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="bg-success h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="bg-info h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
                           P
                          </span>
                          <span class="bg-danger h-45 w-45 d-flex-center b-r-50">
                           AD
                          </span>
                         </div>
                        </div>
                       </div>

                  
              
Outline

For outline style use text-outline-* class.

AR TE
                  

                       <div class="card equal-card">
                        <div class="card-header">
                         <h5>Outline</h5>
                         <p class="text-muted">For outline style use <code>text-outline-*</code> class.</p>
                        </div>
                        <div class="card-body">
                         <div class="d-flex gap-3 flex-wrap">
                          <span class="text-outline-primary h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="text-outline-secondary h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="text-outline-success h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="text-outline-info h-45 w-45 d-flex-center b-r-50">
                           <i class="fa-solid fa-user"></i>
                          </span>
                          <span class="text-outline-warning h-45 w-45 d-flex-center b-r-50">
                           AR
                          </span>
                          <span class="text-outline-danger h-45 w-45 d-flex-center b-r-50">
                           TE
                          </span>
                         </div>
                        </div>
                       </div>

                  
              
Images
avtar
avtar
avtar
avtar
avtar
avtar
  
<div class="card">
<div class="card-header">
   <h5>Images</h5>
  </div>
  <div class="card-body">
  <div class="d-flex gap-3 flex-wrap">
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
   <img src="../assets/images/avtar/1.png" alt="avtar" class="img-fluid">
  </div>
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
   <img src="../assets/images/avtar/2.png" alt="avtar" class="img-fluid">
  </div>
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
   <img src="../assets/images/avtar/3.png" alt="avtar" class="img-fluid">
  </div>
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
   <img src="../assets/images/avtar/4.png" alt="avtar" class="img-fluid">
  </div>
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
   <img src="../assets/images/avtar/5.png" alt="avtar" class="img-fluid">
  </div>
  <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
   <img src="../assets/images/avtar/6.png" alt="avtar" class="img-fluid">
  </div>
  </div>
</div>
</div>

  
Size
                    
                 <div class="card equal-card">
                  <div class="card-header">
                   <h5>Size</h5>
                  </div>
                  <div class="card-body">
                   <div class="d-flex align-items-center">
                    <div class="d-flex gap-3 flex-wrap">
                     <span class="bg-secondary h-30 w-30 d-flex-center b-r-50">
                      <i class="fa-solid fa-user"></i>
                     </span>
                     <span class="bg-success h-35 w-35 d-flex-center b-r-50">
                      <i class="fa-solid fa-user"></i>
                     </span>
                     <span class="bg-info h-40 w-40 d-flex-center b-r-50">
                      <i class="fa-solid fa-user"></i>
                     </span>
                     <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
                      <i class="fa-solid fa-user"></i>
                     </span>
                     <span class="bg-danger h-50 w-50 d-flex-center b-r-50">
                      <i class="fa-solid fa-user"></i>
                     </span>
                    </div>
                   </div>
                  </div>
                 </div>

                
                
Light background

For light style use text-light-* class.

                  
<div class="card">
 <div class="card-header">
  <h5>Light background</h5>
  <p class="text-muted">For light style use <code>text-light-*</code> class.</p>
 </div>
 <div class="card-body">
  <div class="d-flex gap-3 flex-wrap">
   <span class="text-light-primary h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-secondary h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-success h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-info h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-warning h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-danger h-45 w-45 d-flex-center b-r-50">
    <i class="fa-solid fa-user"></i>
   </span>
  </div>
 </div>
</div>
                  
              
Radious

Radious avatar text in soft color example

  

<div class="card">
 <div class="card-header">
  <h5>Light background</h5>
  <p class="text-muted">For light style use <code>text-light-*</code> class.</p>
 </div>
 <div class="card-body">
  <div class="d-flex gap-3 flex-wrap">
   <span class="text-light-primary h-45 w-45 d-flex-center b-r-0">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-secondary h-45 w-45 d-flex-center b-r-6">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-success h-45 w-45 d-flex-center b-r-10">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-info h-45 w-45 d-flex-center b-r-14">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-warning h-45 w-45 d-flex-center b-r-20">
    <i class="fa-solid fa-user"></i>
   </span>
   <span class="text-light-danger h-45 w-45 d-flex-center b-r-30">
    <i class="fa-solid fa-user"></i>
   </span>
  </div>
 </div>
</div>
  
Indicator position and icon

Radious avatar text in soft color example

avtar avtar 3 avtar
  
  <div class="card equal-card">
  <div class="card-header">
       <h5>Indicator position and icon</h5>
     <p class="text-muted">Radious avatar text in soft color example</p>
    </div>
       <div class="card-body">
         <div class="d-flex gap-3 flex-wrap">
          <span class="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
           <i class="fa-solid fa-user"></i>
           <span
            class="position-absolute top-5 start-1 top-0 p-1 bg-danger border border-light rounded-circle"></span>
          </span>
          <span class="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
           <i class="fa-solid fa-user"></i>
           <span
            class="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
          </span>
          <span class="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
           <i class="fa-solid fa-user"></i>
           <span
            class="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
          </span>
          <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
           <img src="../assets/images/avtar/1.png" alt="avtar" class="img-fluid b-r-50">
           <span
            class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
          </span>
          <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
           <img src="../assets/images/avtar/4.png" alt="avtar" class="img-fluid b-r-50">
           <span
            class="position-absolute top-0 end-0 d-flex-center bg-warning border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">3</span>
          </span>
          <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
           <img src="../assets/images/avtar/6.png" alt="avtar" class="img-fluid b-r-50">
           <span
            class="position-absolute top-0 d-flex-center bg-danger border border-light rounded-circle text-center h-20 w-20 f-s-10 start-30"><i
             class="ti ti-mail"></i></span>
     </span>
    </div>
   </div>
   </div>
  
Group with tooltip

User group with tooltip

  • avtar
  • avtar
  • avtar
  • A
  • CD
  • XYZ
  • 2+
  • avtar
  • avtar
  • avtar
  • 10+
  • avtar
  • avtar
  • avtar
  • avtar
  • 5+
                    

                         <div class="card">
                           <div class="card-header">
                            <h5>Group with tooltip</h5>
                            <p class="text-muted">User group with tooltip</p>
                           </div>
                           <div class="card-body">
                            <div class="d-flex gap-3 flex-wrap">
                             <ul class="avatar-group">
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
                            <img src="../assets/images/avtar/4.png" alt="avtar" class="img-fluid">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success"
                            data-bs-toggle="tooltip" data-bs-title="Lennon Briggs">
                            <img src="../assets/images/avtar/5.png" alt="avtar" class="img-fluid">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger"
                            data-bs-toggle="tooltip" data-bs-title="Maya Horton">
                            <img src="../assets/images/avtar/6.png" alt="avtar" class="img-fluid">
                           </li>
                             </ul>

                             <ul class="avatar-group">
                           <li class="text-bg-primary h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Athena Stewart">
                            <i class="fa-solid fa-user"></i>
                           </li>
                           <li class="text-bg-secondary h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Connor Collins">
                            <i class="fa-solid fa-user"></i>
                           </li>
                           <li class="text-bg-success h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Raiden Simpson">
                            <i class="fa-solid fa-user"></i>
                           </li>
                             </ul>

                             <ul class="avatar-group">
                           <li class="text-bg-danger h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Everlee Lambert">
                            A
                           </li>
                           <li class="text-bg-dark h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Hunter Scott">
                            CD
                           </li>
                           <li class="text-bg-warning h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="Hunter Scott">
                            XYZ
                           </li>
                           <li class="text-bg-secondary h-30 w-30 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="2 More">
                            2+
                           </li>
                             </ul>

                             <ul class="avatar-group">
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary b-2-light"
                            data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                            <img src="../assets/images/avtar/4.png" alt="avtar" class="img-fluid">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success b-2-light"
                            data-bs-toggle="tooltip" data-bs-title="Eva Bailey">
                            <img src="../assets/images/avtar/5.png" alt="avtar" class="img-fluid">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger b-2-light"
                            data-bs-toggle="tooltip" data-bs-title="Michael Hughes">
                            <img src="../assets/images/avtar/6.png" alt="avtar" class="img-fluid">
                           </li>
                           <li class="text-bg-secondary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="10 More">
                            10+
                           </li>
                             </ul>
                             <ul class="avatar-group">
                           <li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
                            data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                            <span
                             class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
                            <img src="../assets/images/avtar/4.png" alt="avtar" class="img-fluid b-r-50 overflow-hidden">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
                            data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                            <span
                             class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
                            <img src="../assets/images/avtar/1.png" alt="avtar" class="img-fluid b-r-50 overflow-hidden">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
                            data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                            <span
                             class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
                            <img src="../assets/images/avtar/2.png" alt="avtar" class="img-fluid b-r-50 overflow-hidden">
                           </li>
                           <li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
                            data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                            <span
                             class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
                            <img src="../assets/images/avtar/3.png" alt="avtar" class="img-fluid b-r-50 overflow-hidden">
                           </li>
                           <li class="text-bg-primary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
                            data-bs-title="5 More">
                            5+
                           </li>
                             </ul>
                            </div>
                           </div>
                          </div>