#### Cheatsheet

## Your Ultimate Cheatsheet

badges

- primary
  badge text-bg-primary

                                      <span class="badge text-bg-primary">Primary</span>

- secondary
  badge text-bg-secondary

                                     <span class="badge text-bg-secondary">Secondary</span>

- success
  badge text-bg-success

                                    <span class="badge text-bg-success">Success</span>

- danger
  badge text-bg-danger

                                     <span class="badge text-bg-danger">Danger</span>

- warning
  badge text-bg-warning

                                     <span class="badge text-bg-warning">Warning</span>

- info
  badge text-bg-info

                                     <span class="badge text-bg-info">Info</span>

- light
  badge text-bg-light

                                    <span class="badge text-bg-light">Light</span>

- dark
  badge text-bg-dark

                                     <span class="badge text-bg-dark">Dark</span>

- badge text-outline-primary
  badge text-outline-primary

                                      <span class="badge text-outline-primary">Primary</span>

- badge text-outline-secondary
  badge text-outline-secondary

                                      <span class="badge text-outline-secondary">Secondary</span>

- badge text-outline-success
  badge text-outline-success

                                      <span class="badge text-outline-success">Success</span>

- badge text-outline-danger
  badge text-outline-danger

                                      <span class="badge text-outline-danger">Danger</span>

- badge text-outline-warning
  badge text-outline-warning

                                      <span class="badge text-outline-warning">Warning</span>

- badge text-outline-info
  badge text-outline-info

                                      <span class="badge text-outline-info">Info</span>

- badge text-outline-dark
  badge text-outline-dark

                                      <span class="badge text-outline-dark">Dark</span>

- badge text-light-primary
  badge text-light-primary

                                      <span class="badge text-light-primary">Primary</span>

- badge text-light-secondary
  badge text-light-secondary

                                      <span class="badge text-light-secondary">Secondary</span>

- badge text-light-success
  badge text-light-success

                                      <span class="badge text-light-success">Success</span>

- badge text-light-danger
  badge text-light-danger

                                      <span class="badge text-light-danger">Danger</span>

- badge text-light-warning
  badge text-light-warning

                                      <span class="badge text-light-warning">Warning</span>

- badge text-light-info
  badge text-light-info

                                      <span class="badge text-light-info">Info</span>

- badge text-light-light
  badge text-light-light

                                      <span class="badge text-light-light">Info</span>

- badge text-light-dark
  badge text-light-dark

                                      <span class="badge text-light-dark">Dark</span>

alerts

- alert-primary
  alert alert-primary

                                       <div class="alert alert-primary" role="alert"> Simple primary alert -check it out  </div>

- alert-secondary
  alert alert-secondary

                                       <div class="alert alert-secondary" role="alert"> Simple secondary  alert -check it out  </div>

- alert-success
  alert alert-success

                                         <div class="alert alert-success" role="alert"> Simple success  alert -check it out  </div>

- alert-danger
  alert alert-danger

                                         <div class="alert alert-danger" role="alert"> Simple danger  alert -check it out  </div>

- alert-warning
  alert alert-warning

                                        <div class="alert alert-warning " role="alert"> Simple warning  alert -check it out  </div>

- alert-info
  alert alert-info

                                       <div class="alert alert-info " role="alert"> Simple info  alert -check it out  </div>

- alert-light
  alert alert-light

                                     <div class="alert alert-light " role="alert"> Simple light  alert -check it out  </div>

- alert-dark
  alert alert-dark

                                    <div class="alert alert-dark " role="alert"> Simple dark  alert -check it out  </div>

- alert-outline-primary
  alert alert-outline-primary

                                      <div class="alert alert-outline-primary" role="alert"> outline primary alert -check it out  </div>

- alert-outline-secondary
  alert alert-outline-secondary

                                      <div class="alert alert-outline-secondary" role="alert"> outline secondary alert -check it out  </div>

- alert-outline-success
  alert alert-outline-success

                                      <div class="alert alert-outline-success" role="alert"> outline success alert -check it out  </div>

- alert-outline-danger
  alert alert-outline-danger

                                      <div class="alert alert-outline-danger" role="alert"> outline danger alert -check it out  </div>

- alert-outline-warning
  alert alert-outline-warning

                                      <div class="alert alert-outline-warning" role="alert"> outline warning alert -check it out  </div>

- alert-outline-info
  alert alert-outline-info

                                      <div class="alert alert-outline-info" role="alert"> outline info alert -check it out  </div>

- alert-outline-light
  alert alert-outline-light

                                      <div class="alert alert-outline-light" role="alert"> outline light alert -check it out  </div>

- alert-outline-dark
  alert alert-outline-dark

                                      <div class="alert alert-outline-dark" role="alert"> outline dark alert -check it out  </div>

- alert-light-primary
  alert alert-light-primary

                                      <div class="alert alert-light-primary" role="alert"> light primary alert -check it out  </div>

- alert-light-secondary
  alert alert-light-secondary

                                      <div class="alert alert-light-secondary" role="alert"> light secondary alert -check it out  </div>

- alert-light-success
  alert alert-light-success

                                      <div class="alert alert-light-success" role="alert"> light success alert -check it out  </div>

- alert-light-danger
  alert alert-light-danger

                                      <div class="alert alert-light-danger" role="alert"> light danger alert -check it out  </div>

- alert-light-warning
  alert alert-light-warning

                                      <div class="alert alert-light-warning" role="alert"> light warning alert -check it out  </div>

- alert-light-info
  alert alert-light-info

                                      <div class="alert alert-light-info" role="alert"> light info alert -check it out  </div>

- alert-light-light
  alert alert-light-light

                                      <div class="alert alert-light-light" role="alert"> light light alert -check it out  </div>

- alert-light-dark
  alert alert-light-dark

                                      <div class="alert alert-light-dark" role="alert"> light dark alert -check it out  </div>

- alert alert-light-border-primary
  alert alert-light-border-primary

                                      <div class="alert alert-light-border-primary" role="alert"> Light-border-primary alert -check it out  </div>

- alert alert-light-border-secondary
  alert alert-light-border-secondary

                                      <div class="alert alert-light-border-secondary" role="alert"> Light-border-secondary alert -check it out  </div>

- alert alert-light-border-success
  alert alert-light-border-success

                                      <div class="alert alert-light-border-success" role="alert"> Light-border-success alert -check it out  </div>

- alert alert-light-border-danger
  alert alert-light-border-danger

                                      <div class="alert alert-light-border-danger" role="alert"> Light-border-danger alert -check it out  </div>

- alert alert-light-border-warning
  alert alert-light-border-warning

                                      <div class="alert alert-light-border-warning" role="alert"> Light-border-warning alert -check it out  </div>

- alert alert-light-border-info
  alert alert-light-border-info

                                      <div class="alert alert-light-border-info" role="alert"> Light-border-info alert -check it out  </div>

- alert alert-light-border-light
  alert alert-light-border-light

                                      <div class="alert alert-light-border-light" role="alert"> Light-border-light alert -check it out  </div>

- alert alert-light-border-dark
  alert alert-light-border-dark

                                      <div class="alert alert-light-border-dark" role="alert"> Light-border-dark alert -check it out  </div>

- alert alert-border-primary
  alert alert-border-primary

                                      <div class="alert alert-border-primary" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-secondary
  alert alert-border-secondary

                                      <div class="alert alert-border-secondary" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-success
  alert alert-border-success

                                      <div class="alert alert-border-success" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-danger
  alert alert-border-danger

                                      <div class="alert alert-border-danger" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-warning
  alert alert-border-warning

                                      <div class="alert alert-border-warning" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-info
  alert alert-border-info

                                      <div class="alert alert-border-info" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-light
  alert alert-border-light

                                      <div class="alert alert-border-light" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-border-dark
  alert alert-border-dark

                                      <div class="alert alert-border-dark" role="alert">  Alert with left slide border - check out!  </div>

- alert alert-label alert-label-primary
  alert alert-label alert-label-primary

                                      <div class="alert alert-label alert-label-primary" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-primary"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-secondary
  alert alert-label alert-label-secondary

                                      <div class="alert alert-label alert-label-secondary" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-secondary"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-success
  alert alert-label alert-label-success

                                      <div class="alert alert-label alert-label-success" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-success"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-danger
  alert alert-label alert-label-danger

                                      <div class="alert alert-label alert-label-danger" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-danger"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-warning
  alert alert-label alert-label-warning

                                      <div class="alert alert-label alert-label-warning" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-warning"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-info
  alert alert-label alert-label-info

                                      <div class="alert alert-label alert-label-info" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-info"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-light
  alert alert-label alert-label-light

                                      <div class="alert alert-label alert-label-light" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-light"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

- alert alert-label alert-label-dark
  alert alert-label alert-label-dark

                                      <div class="alert alert-label alert-label-dark" role="alert">
                                <p class="mb-0">
                                  <i class="ti ti-download label-icon label-icon-dark"></i>
                                  Alert with lable icons - check out!
                                </p>
                              <div>

Button

- btn-primary
  btn-primary

                                      <button type="button" class="btn btn-primary">Primary</button>

- btn-secondary
  btn-secondary

                                      <button type="button" class="btn btn-secondary">Secondary</button>

- btn-success
  btn-success

                                      <button type="button" class="btn btn-success">Success</button>

- btn-danger
  btn-danger

                                      <button type="button" class="btn btn-danger">Danger</button>

- btn-warning
  btn-warning

                                      <button type="button" class="btn btn-warning">Warning</button>

- btn-info
  btn-info

                                      <button type="button" class="btn btn-info">Info</button>

- btn-light
  btn-light

                                      <button type="button" class="btn btn-light">Light</button>

- btn-dark
  btn-dark

                                      <button type="button" class="btn btn-dark">Dark</button>

- btn-outline-primary
  btn-outline-primary

                                      <button type="button" class="btn btn-outline-primary">Primary</button>

- btn-outline-secondary
  btn-outline-secondary

                                      <button type="button" class="btn btn-outline-secondary">Secondary</button>

- btn-outline-success
  btn-outline-success

                                      <button type="button" class="btn btn-outline-success">Success</button>

- btn-outline-danger
  btn-outline-danger

                                      <button type="button" class="btn btn-outline-danger">Danger</button>

- btn-outline-warning
  btn-outline-warning

                                      <button type="button" class="btn btn-outline-warning">Warning</button>

- btn-outline-info
  btn-outline-info

                                      <button type="button" class="btn btn-outline-info">Info</button>

- btn-outline-light
  btn-outline-light

                                      <button type="button" class="btn btn-outline-light">Light</button>

- btn-outline-dark
  btn-outline-dark

                                      <button type="button" class="btn btn-outline-dark">Dark</button>

- btn-light-primary
  btn-light-primary

                                      <button type="button" class="btn btn-light-primary">Primary</button>

- btn-light-secondary
  btn-light-secondary

                                      <button type="button" class="btn btn-light-secondary">Secondary</button>

- btn-light-success
  btn-light-success

                                      <button type="button" class="btn btn-light-success">Success</button>

- btn-light-danger
  btn-light-danger

                                      <button type="button" class="btn btn-light-danger">Danger</button>

- btn-light-warning
  btn-light-warning

                                      <button type="button" class="btn btn-light-warning">Warning</button>

- btn-light-info
  btn-light-info

                                      <button type="button" class="btn btn-light-info">Info</button>

- btn-light-light
  btn-light-light

                                      <button type="button" class="btn btn-light-light">Light</button>

- btn-light-dark
  btn-light-dark

                                      <button type="button" class="btn btn-light-dark">Dark</button>

- icon-btn
  icon-btn

                                      <button type="button" class="btn btn-primary icon-btn b-r-4"> <i
                                      class="ti ti-capture"></i></button>

                                      <button type="button" class="btn btn-secondary icon-btn b-r-4"><i
                                      class="ti ti-bell-ringing"></i></button>

                                      <button type="button" class="btn btn-outline-primary icon-btn b-r-4"> <i
                                       class="ti ti-capture"></i></button>

                                      <button type="button" class="btn btn-outline-secondary icon-btn b-r-4"><i
                                       class="ti ti-bell-ringing"></i></button>

                                      <button type="button" class="btn btn-light-primary icon-btn b-r-4">
                                       <i class="ti ti-capture"></i></button>

                                      <button type="button" class="btn btn-light-secondary icon-btn b-r-4"><i
                                        class="ti ti-bell-ringing"></i></button>

- btn-facebook
  btn-facebook

                                      <button type="button" class="btn btn-facebook icon-btn b-r-22"><i
                                      class="ti ti-brand-facebook text-white"></i></button>

- btn-twitter
  btn-twitter

                                      <button type="button" class="btn btn-twitter icon-btn b-r-22"><i
                                      class="ti ti-brand-twitter text-white"></i></button>

- btn-pinterest
  btn-pinterest

                                      <button type="button" class="btn btn-pinterest icon-btn b-r-22"><i
                                      class="ti ti-brand-pinterest text-white"></i></button>

- btn-linkedin
  btn-linkedin

                                      <button type="button" class="btn btn-linkedin icon-btn b-r-22"><i
                                      class="ti ti-brand-linkedin text-white"></i></button>

- btn-reddit
  btn-reddit

                                      <button type="button" class="btn btn-reddit icon-btn b-r-22"><i
                                      class="ti ti-brand-reddit text-white"></i></button>

- btn-whatsapp
  btn-whatsapp

                                      <button type="button" class="btn btn-whatsapp icon-btn b-r-22"><i
                                      class="ti ti-brand-whatsapp text-white"></i></button>

- btn-gmail
  btn-gmail

                                      <button type="button" class="btn btn-gmail icon-btn b-r-22"><i
                                      class="ti ti-brand-gmail text-white"></i></button>

- btn-telegram
  btn-telegram

                                      <button type="button" class="btn btn-telegram icon-btn b-r-22"><i
                                      class="ti ti-brand-telegram text-white"></i></button>

- btn-youtube
  btn-youtube

                                      <button type="button" class="btn btn-youtube icon-btn b-r-22"><i
                                      class="ti ti-brand-youtube text-white"></i></button>

- btn-vimeo
  btn-vimeo

                                      <button type="button" class="btn btn-vimeo icon-btn b-r-22"><i
                                      class="ti ti-brand-vimeo text-white"></i></button>

- btn-behance
  btn-behance

                                      <button type="button" class="btn btn-behance icon-btn b-r-22"><i
                                      class="ti ti-brand-behance text-white"></i></button>

- btn-github
  btn-github

                                      <button type="button" class="btn btn-github icon-btn b-r-22"><i
                                      class="ti ti-brand-github text-white"></i></button>

- btn-skype
  btn-skype

                                      <button type="button" class="btn btn-skype icon-btn b-r-22"><i
                                      class="ti ti-brand-skype text-white"></i></button>

- btn-snapchat
  btn-snapchat

                                      <button type="button" class="btn btn-snapchat icon-btn b-r-22"><i
                                      class="ti ti-brand-snapchat text-white"></i></button>

Cards

- card
  card

          <div class="card hover-effect">
          <div class="card-header">
           <h6 class="mb-0 mt-2 f-w-600">My Profile</h6>
          </div>
          <div class="card-body">
           <p>
           ....
           </p>
          </div>
          <div class="card-footer">
           <div class="row">
            <div class="col-6">
             <i class="ti ti-heart-filled text-danger f-s-16 m-r-5"> </i>
             <span> 60 likes </span>
            </div>
            <div class="col-6">
             <ul class="avatar-group float-end">
              <li class="h-25 w-25 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
               data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
               <img src="../assets/images/avatar/4.png" alt="" class="img-fluid b-r-50 overflow-hidden">
              </li>
              <li class="h-25 w-25 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
               data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
               <img src="../assets/images/avatar/3.png" alt="" class="img-fluid b-r-50 overflow-hidden">
              </li>
              <li class="text-bg-primary h-25 w-25 d-flex-center b-r-50" data-bs-toggle="tooltip"
               data-bs-title="5 More">
               5+
              </li>
             </ul>
            </div>
           </div>
          </div>

- card-primary
  card-primary

          <div class="card hover-effect card-primary">
                 <div class="card-header">
                    <h5>primary card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-secondary
  card-secondary

          <div class="card hover-effect card-secondary">
                 <div class="card-header">
                    <h5>secondary card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-success
  card-success

          <div class="card hover-effect card-success">
                 <div class="card-header">
                    <h5>success card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-danger
  card-danger

          <div class="card hover-effect card-danger">
                 <div class="card-header">
                    <h5>danger card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-warning
  card-warning

          <div class="card hover-effect card-warning">
                 <div class="card-header">
                    <h5>warning card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-info
  card-info

          <div class="card hover-effect card-info">
                 <div class="card-header">
                    <h5>info card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-light
  card-light

          <div class="card hover-effect card-light">
                 <div class="card-header">
                    <h5>light card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-dark
  card-dark

          <div class="card hover-effect card-dark">
                 <div class="card-header">
                    <h5>dark card</h5>
                 </div>
                 <div class="card-body">
                      <h6>Card body</h6>
                      <p>...</p>
                 </div>
          </div>

- card-outline-primary
  card-outline-primary

                                      <div class="card hover-effect card-outline-primary">
                                        <div class="card-header">
                                          <h5>Outline card-outline-primary card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-secondary
  card-outline-secondary

                                      <div class="card hover-effect card-outline-secondary">
                                        <div class="card-header">
                                          <h5>Outline card-outline-secondary card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-success
  card-outline-success

                                      <div class="card hover-effect card-outline-success">
                                        <div class="card-header">
                                          <h5>Outline card-outline-success card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-danger
  card-outline-danger

                                      <div class="card hover-effect card-outline-danger">
                                        <div class="card-header">
                                          <h5>Outline card-outline-danger card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-warning
  card-outline-warning

                                      <div class="card hover-effect card-outline-warning">
                                        <div class="card-header">
                                          <h5>Outline card-outline-warning card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-info
  card-outline-info

                                      <div class="card hover-effect card-outline-info">
                                        <div class="card-header">
                                          <h5>Outline card-outline-info card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-light
  card-outline-light

                                      <div class="card hover-effect card-outline-light">
                                        <div class="card-header">
                                          <h5>Outline card-outline-light card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- card-outline-dark
  card-outline-dark

                                      <div class="card hover-effect card-outline-dark">
                                        <div class="card-header">
                                          <h5>Outline card-outline-dark card</h5>
                                        </div>
                                        <div class="card-body">
                                           <h6>Card body</h6>
                                          <p>...</p>
                                        </div>
                                      </div>

- icon-bg
  icon-bg

            <div class="col-lg-8 offset-lg-2">
         <div class="card hover-effect card-primary">
          <div class="card-body">
           <i class="ti ti-alarm icon-bg"></i>
           <h6>Card With icon</h6>
           <p>With supporting text below lead-in to additional content below as a natural.</p>
          </div>
         </div>
        </div>

- border-primary border-top
  border-primary border-top

                                      <div class="card hover-effect border-primary border-top border-4">
                                               <div class="card-body">
                                                <h6>Card With Top border</h6>
                                                <p>With supporting text below lead-in to additional content below as a natural.</p>
                                               </div>
                                              </div>

- border-secondary border-bottom
  border-secondary border-bottom

                                      <div class="card hover-effect border-secondary border-bottom border-4">
                                               <div class="card-body">
                                                <h6>Card With Bottom border</h6>
                                                <p>With supporting text below lead-in to additional content below as a natural.</p>
                                               </div>
                                              </div>

- border-success border-start
  border-success border-start

                                      <div class="card hover-effect border-success border-start border-4">
                                               <div class="card-body">
                                                <h6>Card With Start border</h6>
                                                <p>With supporting text below lead-in to additional content below as a natural.</p>
                                               </div>
                                              </div>

- border-danger border-end
  border-danger border-end

                                      <div class="card hover-effect border-danger border-end border-4">
                                               <div class="card-body">
                                                <h6>Card With End border</h6>
                                                <p>With supporting text below lead-in to additional content below as a natural.</p>
                                               </div>
                                              </div>

Dropdown

- app-dropdown
  app-dropdown

                                      <div class="card">
                                      <div class="card-body d-flex flex-wrap gap-2">
                                      <div class="app-dropdown">
                                      <button class="btn btn-primary border-0 " type="button" data-bs-toggle="dropdown"
                                      data-bs-auto-close="outside" aria-expanded="false">
                                      Clickable Submenu
                                      </button>
                                      <div class="dropdown-menu mb-3">
                                      <a href="#" class="dropdown-item">
                                      <span> Action</span>
                                      <i class="ti ti-user-plus ms-auto"></i>
                                      </a>
                                      <hr class="dropdown-divider">
                                      <a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                      <span>More Option</span>
                                      <i class="ti ti-arrow-badge-right ms-auto"></i>
                                      </a>
                                      <div class="dropdown-menu sub-menu">
                                      <a href="#" class="dropdown-item">
                                      <span> Action</span>
                                      <i class="ti ti-user-plus ms-auto"></i>
                                      </a>
                                      <a href="#" class="dropdown-item">
                                      <span>Another action</span>
                                      <i class="ti ti-circles-relation ms-auto"></i>
                                      </a>
                                      </div>
                                      </div>
                                      </div>

                                      <div class="hover-dropdown app-hover-dropdown">
                                      <button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown"
                                      data-trigger="hover" aria-expanded="false">
                                      Hoverable Dropdown
                                      </button>
                                      <ul class="dropdown-menu bg-dark">
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span> Action</span>
                                      </a>
                                      <i class="ti ti-user-plus ms-auto"></i>
                                      </li>
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span>Another action</span>
                                      </a>
                                      <i class="ti ti-circles-relation ms-auto"></i>
                                      </li>
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span>Something else here</span>
                                      </a>
                                      <i class="ti ti-message-circle ms-auto"></i>
                                      </li>
                                      <li>
                                      <hr class="dropdown-divider">
                                      </li>
                                      <li class="hover-dropdown">
                                      <a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown"
                                      data-trigger="hover" aria-expanded="false">
                                      More Option
                                      </a>
                                      <ul class="dropdown-menu hover-submenu bg-dark">
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span> Action</span>
                                      </a>
                                      <i class="ti ti-user-plus ms-auto"></i>
                                      </li>
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span>Another action</span>
                                      </a>
                                      <i class="ti ti-circles-relation ms-auto"></i>
                                      </li>
                                      <li class="dropdown-item">
                                      <a href="#">
                                      <span>Something else here</span>
                                      </a>
                                      <i class="ti ti-message-circle ms-auto"></i>
                                      </li>
                                      </ul>
                                      </li>

                                      </ul>
                                      </div>

                                      </div>
                                     </div>

- app-dropdown primary
  btn btn-primary

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      primary <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown secondary
  btn btn-secondary

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      secondary <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown success
  btn btn-success

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      success <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown danger
  btn btn-danger

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      danger <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown warning
  btn btn-warning

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      warning <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown info
  btn btn-info

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      info <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown light
  btn btn-light

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      light <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- app-dropdown dark
  btn btn-dark

                                      <div class="btn-group btn-rtl">
                                      <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                                      aria-haspopup="true" aria-expanded="false">
                                      dark <i class="mdi mdi-chevron-down"></i>
                                      </button>
                                      <div class="dropdown-menu">
                                      <!-- item-->
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                      </div>

- dropdown-menu menu-primary
  btn btn-primary

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-primary show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-secondary
  btn btn-secondary

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-secondary show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-success
  btn btn-success

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-success show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-danger
  btn btn-danger

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-danger show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-warning
  btn btn-warning

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-warning show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-info
  btn btn-info

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-info show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-light
  btn btn-light

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-light show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

- dropdown-menu menu-dark
  btn btn-dark

                                      <div class="app-dropdown">
                                          <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
                                           data-bs-auto-close="true" aria-expanded="false">
                                           <i class="ti ti-dots"></i>
                                          </button>
                                          <ul class="dropdown-menu menu-dark show">
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span> Action</span>
                                            <i class="ti ti-user-plus"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Another action</span>
                                            <i class="ti ti-circles-relation"></i>
                                           </li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Something else here</span>
                                            <i class="ti ti-message-circle"></i>
                                           </li>
                                           <li class="dropdown-divider"></li>
                                           <li class="dropdown-item d-flex justify-content-between">
                                            <span>Settings</span>
                                            <i class="ti ti-settings"></i>
                                           </li>
                                          </ul>
                                         </div>

Avatar

- Primary
  bg-primary h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-primary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Secondary
  bg-secondary h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-secondary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Success
  bg-success h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-success h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Danger
  bg-danger h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-danger h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Warning
  bg-warning h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Info
  bg-info h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-info h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Light
  bg-light h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-light h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- Dark
  bg-dark h-45 w-45 d-flex-center b-r-50

                                      <span class="bg-dark h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-primary
  text-outline-primary h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-primary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-secondary
  text-outline-secondary h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-secondary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-success
  text-outline-success h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-success h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-danger
  text-outline-danger h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-danger h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-warning
  text-outline-warning h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-warning h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-info
  text-outline-info h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-info h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-light
  text-outline-light h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-light h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-outline-dark
  text-outline-dark h-45 w-45 d-flex-center b-r-50

                                      <span class="text-outline-dark h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- avatar images

                                      <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/avatar/1.png" alt="" 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/avatar/2.png" alt="" 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/avatar/3.png" alt="" 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/avatar/4.png" alt="" 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/avatar/5.png" alt="" 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/avatar/6.png" alt="" class="img-fluid">
                                      </div>
                                      </div>

- avatar size

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

- text-light-primary
  text-light-primary h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-primary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-secondary
  text-light-secondary h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-secondary h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-success
  text-light-success h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-success h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-danger
  text-light-danger h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-danger h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-warning
  text-light-warning h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-warning h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-info
  text-light-info h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-info h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-light
  text-light-light h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-light h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- text-light-dark
  text-light-dark h-45 w-45 d-flex-center b-r-50

                                      <span class="text-light-dark h-45 w-45 d-flex-center b-r-50">
                                        <i class="fa-solid fa-user"></i>
                                      </span>

- avatar Radius

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

- Avatar group

                                       <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 b-2-light"
                                      data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
                                      <img src="../assets/images/avatar/4.png" alt="" 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/avatar/5.png" alt="" 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/avatar/6.png" alt="" 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/avatar/4.png" alt="" 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/avatar/1.png" alt="" 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/avatar/2.png" alt="" 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/avatar/3.png" alt="" 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>

Tabs

- app-tabs-primary
  app-tabs-primary

           <div class="card">
                   <div class="card-body">
             <ul class="nav nav-tabs app-tabs-primary" role="tablist">
              <li class="nav-item" role="presentation">
               <button class="nav-link active" id="html-tab" data-bs-toggle="tab"
                data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane"
                aria-selected="true">HTML</button>
              </li>
              <li class="nav-item" role="presentation">
               <button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane"
                type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">CSS</button>
              </li>
              <li class="nav-item" role="presentation">
               <button class="nav-link" id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane"
                type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">PHP</button>
              </li>
             </ul>
             <div class="tab-content" id="BasicContent">
              <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel"
               aria-labelledby="html-tab" tabindex="0">
               <p>Hypertext Markup Language is the standard markup language for documents designed to be
                displayed in a web browser.</p>
              </div>
              <div class="tab-pane fade" id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab"
               tabindex="0">
               <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
                of a document written in a markup language like HTML.</p>
               <p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
              </div>
              <div class="tab-pane fade" id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab"
               tabindex="0">
               <p>PHP is a popular general-purpose scripting language that is especially suited to web
                development.</p>
                </div>
               </div>
            </div>
          </div>

- tab-outline-primary
  tab-outline-primary

                                      <div class="card">
                                            <div class="card-body">
                                             <ul class="nav nav-tabs tab-outline-primary" role="tablist">
                                              <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
                                             data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
                                             aria-selected="true">Connect</button>
                                              </li>
                                              <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
                                             data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
                                             aria-selected="false">Discover</button>
                                              </li>
                                              <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
                                             type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                                              </li>
                                             </ul>
                                             <div class="tab-content" id="OutlineContent">
                                              <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
                                            aria-labelledby="connect-tab" tabindex="0">
                                            <h6 class="mb-1">This is the content of tab one.</h6>
                                            ...
                                              </div>
                                              <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
                                            tabindex="0">
                                            <h6 class="mb-1">This is the content of tab two.</h6>
                                            ...
                                              </div>
                                              <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
                                            tabindex="0">
                                            <h6 class="mb-1">This is the content of tab three.</h6>
                                           ...
                                          </div>
                                        </div>
                                      </div>
                                    </div>

- tab-light-primary
  tab-light-primary

              <div class="card">
              <div class="card-body">
               <ul class="nav nav-tabs tab-light-primary" role="tablist">
                <li class="nav-item" role="presentation">
              <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
               data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
               aria-selected="true">Connect</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
               data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
               aria-selected="false">Discover</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
               type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                </li>
               </ul>
               <div class="tab-content" id="OutlineContent">
                <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
              aria-labelledby="connect-tab" tabindex="0">
              <h6 class="mb-1">This is the content of tab one.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab two.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab three.</h6>
             ...
            </div>
               </div>
             </div>
           </div>

- vertical-tab
  vertical-tab

              <div class="card">
              <div class="card-body vertical-tab">
               <ul class="nav nav-tabs tab-light-secondary ms-3" role="tablist">
                <li class="nav-item" role="presentation">
              <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
               data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
               aria-selected="true">Connect</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
               data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
               aria-selected="false">Discover</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
               type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                </li>
               </ul>
               <div class="tab-content" id="OutlineContent">
                <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
              aria-labelledby="connect-tab" tabindex="0">
              <h6 class="mb-1">This is the content of tab one.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab two.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab three.</h6>
             ...
            </div>
               </div>
             </div>
           </div>

- vertical-right-tab
  vertical-right-tab

              <div class="card">
              <div class="card-body vertical-right-tab">
               <ul class="nav nav-tabs app-tabs-success" id="Outline" role="tablist">
                <li class="nav-item" role="presentation">
              <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
               data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
               aria-selected="true">Connect</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
               data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
               aria-selected="false">Discover</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
               type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                </li>
               </ul>
               <div class="tab-content" id="OutlineContent">
                <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
              aria-labelledby="connect-tab" tabindex="0">
              <h6 class="mb-1">This is the content of tab one.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab two.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab three.</h6>
             ...
            </div>
               </div>
             </div>
           </div>

- tab background

                                      <ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
                                      <li class="nav-item" role="presentation">
                                       <button class="nav-link active" id="features-tab" data-bs-toggle="tab"
                                        data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane"
                                        aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i> features</button>
                                      </li>
                                      <li class="nav-item" role="presentation">
                                       <button class="nav-link" id="history-tab" data-bs-toggle="tab"
                                        data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane"
                                        aria-selected="false"><i class="ti ti-history pe-1 ps-1"></i>History</button>
                                      </li>
                                      <li class="nav-item" role="presentation">
                                       <button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
                                        data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane"
                                        aria-selected="false"><i class="ti ti-star pe-1 ps-1"></i>reviews</button>
                                      </li>

                                     </ul>
                                     <div class="tab-content" id="bgContent">
                                      <div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel"
                                       aria-labelledby="features-tab" tabindex="0">
                                       <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                                        identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                                        with fragment identifiers to switch between them.</p>
                                      </div>

                                      <div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab"
                                       tabindex="0">
                                       <ol>
                                        <li>Show only the last tab.</li>
                                        <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
                                        <li>Matches a tab, show it and hide all following siblings.</li>
                                       </ol>
                                      </div>

                                      <div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab"
                                       tabindex="0">
                                       <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                                        identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                                        with fragment identifiers to switch between them.</p>
                                 </div>
                               </div>

- bottom-tab
  bottom-tab

              <div class="card">
              <div class="card-body bottom-tab">
               <ul class="nav nav-tabs app-tabs-success" role="tablist">
                <li class="nav-item" role="presentation">
              <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
               data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
               aria-selected="true">Connect</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
               data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
               aria-selected="false">Discover</button>
                </li>
                <li class="nav-item" role="presentation">
              <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
               type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                </li>
               </ul>
               <div class="tab-content" id="OutlineContent">
                <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
              aria-labelledby="connect-tab" tabindex="0">
              <h6 class="mb-1">This is the content of tab one.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab two.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab three.</h6>
             ...
            </div>
               </div>
             </div>
           </div>

- justify-content-around
  justify-content-around

              <div class="card">
              <div class="card-body">
               <ul class="nav nav-tabs app-tabs-dark justify-content-around" role="tablist">
                <li class="nav-item flex-fill" role="presentation">
              <button class="nav-link w-100 active" id="connect-tab" data-bs-toggle="tab"
               data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
               aria-selected="true">Connect</button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
              <button class="nav-link w-100" id="discover-tab" data-bs-toggle="tab"
               data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
               aria-selected="false">Discover</button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
              <button class="nav-link w-100" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
               type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
                </li>
               </ul>
               <div class="tab-content" id="OutlineContent">
                <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
              aria-labelledby="connect-tab" tabindex="0">
              <h6 class="mb-1">This is the content of tab one.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab two.</h6>
              ...
                </div>
                <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
              tabindex="0">
              <h6 class="mb-1">This is the content of tab three.</h6>
             ...
            </div>
               </div>
             </div>
           </div>

- image as nav link

                                      <ul class="nav nav-tabs tab-light-secondary" id="lang-Light" role="tablist">
                                       <li class="nav-item" role="presentation">
                                        <button class="nav-link gap-2 active" id="lang-home-tab" data-bs-toggle="tab"
                                         data-bs-target="#lang-home-tab-pane" type="button" role="tab"
                                         aria-controls="lang-home-tab-pane" aria-selected="true">
                                         <i class="flag-icon flag-icon-usa"></i>
                                         USA
                                        </button>
                                       </li>
                                       <li class="nav-item" role="presentation">
                                        <button class="nav-link gap-2" id="lang-profile-tab" data-bs-toggle="tab"
                                         data-bs-target="#lang-profile-tab-pane" type="button" role="tab"
                                         aria-controls="lang-profile-tab-pane" aria-selected="false">
                                         <i class="flag-icon flag-icon-gbr"></i>
                                         GBR
                                        </button>
                                       </li>
                                       <li class="nav-item" role="presentation">
                                        <button class="nav-link gap-2" id="lang-contact-tab" data-bs-toggle="tab"
                                         data-bs-target="#lang-contact-tab-pane" type="button" role="tab"
                                         aria-controls="lang-contact-tab-pane" aria-selected="false">
                                         <i class="flag-icon flag-icon-deu"></i>
                                         DEU
                                        </button>
                                       </li>

                                     </ul>
                                     <div class="tab-content" id="lang-LightContent">
                                       <div class="tab-pane fade show active" id="lang-home-tab-pane" role="tabpanel"
                                        aria-labelledby="lang-home-tab" tabindex="0">
                                        <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                                         identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                                         with fragment identifiers to switch between them.</p>
                                       </div>

                                       <div class="tab-pane fade" id="lang-profile-tab-pane" role="tabpanel"
                                        aria-labelledby="lang-profile-tab" tabindex="0">
                                        <ol>
                                         <li>Show only the last tab.</li>
                                         <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
                                         <li>Matches a tab, show it and hide all following siblings.</li>
                                        </ol>
                                       </div>

                                       <div class="tab-pane fade" id="lang-contact-tab-pane" role="tabpanel"
                                        aria-labelledby="lang-contact-tab" tabindex="0">
                                        <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                                         identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                                         with fragment identifiers to switch between them.</p>
                                       </div>

                                      </div>

Accordions

- accordion-primary
  accordion-primary

                                      <div class="card">
                                           <div class="card-body">
                                            <div class="accordion app-accordion accordion-primary">
                                             <div class="accordion-item">
                                              <h2 class="accordion-header">
                                               <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                Accordion Item #1
                                               </button>
                                              </h2>
                                              <div id="collapseOne" class="accordion-collapse collapse show"
                                               data-bs-parent="#accordionExample">
                                               <div class="accordion-body">
                                                ...
                                               </div>
                                              </div>
                                             </div>
                                             <div class="accordion-item">
                                              <h2 class="accordion-header">
                                               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                Accordion Item #2
                                               </button>
                                              </h2>
                                              <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                               <div class="accordion-body">
                                                ...
                                               </div>
                                              </div>
                                             </div>
                                             <div class="accordion-item">
                                              <h2 class="accordion-header">
                                               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                Accordion Item #3
                                               </button>
                                              </h2>
                                              <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                               <div class="accordion-body">
                                                ...
                                             </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>

- accordion-outline-secondary
  accordion-outline-secondary

           <div class="card">
              <div class="card-body">
               <div class="accordion app-accordion accordion-outline-secondary">
                <div class="accordion-item">
                 <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse"
                   data-bs-target="#collapseOneOutline" aria-expanded="true"
                   aria-controls="collapseOneOutline">
                   Accordion Item #1
                  </button>
                 </h2>
                 <div id="collapseOneOutline" class="accordion-collapse collapse show"
                  data-bs-parent="#accordionExampleoutlineoutline">
                  <div class="accordion-body">
                   ...
                  </div>
                 </div>
                </div>
                <div class="accordion-item">
                 <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                   data-bs-target="#collapseTwooutline" aria-expanded="false"
                   aria-controls="collapseTwooutline">
                   Accordion Item #2
                  </button>
                 </h2>
                 <div id="collapseTwooutline" class="accordion-collapse collapse"
                  data-bs-parent="#accordionExampleoutlineoutline">
                  <div class="accordion-body">
                   ...
                  </div>
                 </div>
                </div>
                <div class="accordion-item">
                 <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                   data-bs-target="#collapseThreeoutline" aria-expanded="false"
                   aria-controls="collapseThreeoutline">
                   Accordion Item #3
                  </button>
                 </h2>
                 <div id="collapseThreeoutline" class="accordion-collapse collapse"
                  data-bs-parent="#accordionExampleoutlineoutline">
                  <div class="accordion-body">
                   ...
                 </div>
              </div>
            </div>
            </div>
          </div>
        </div>

- accordion-light-success
  accordion-light-success

                 <div class="accordion app-accordion accordion-light-success" id="accordionFlushExample">
                  <div class="accordion-item">
                   <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                     data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
                     Accordion Item #1
                    </button>
                   </h2>
                   <div id="flush-collapseOne" class="accordion-collapse show"
                    data-bs-parent="#accordionFlushExample">
                    <div class="accordion-body">Placeholder content for this accordion, which is intended to
                     demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
                     body.</div>
                   </div>
                  </div>
                  <div class="accordion-item">
                   <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                     data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                     Accordion Item #2
                    </button>
                   </h2>
                   <div id="flush-collapseTwo" class="accordion-collapse collapse"
                    data-bs-parent="#accordionFlushExample">
                    <div class="accordion-body">Placeholder content for this accordion, which is intended to
                     demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
                     body. Let's imagine this being filled with some actual content.</div>
                   </div>
                  </div>
                  <div class="accordion-item">
                   <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                     data-bs-target="#flush-collapseThree" aria-expanded="false"
                     aria-controls="flush-collapseThree">
                     Accordion Item #3
                    </button>
                   </h2>
                   <div id="flush-collapseThree" class="accordion-collapse collapse"
                    data-bs-parent="#accordionFlushExample">
                    <div class="accordion-body">Placeholder content for this accordion, which is intended to
                     demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
                     body. Nothing more exciting happening here in terms of content, but just filling up the
                     space to make it look, at least at first glance, a bit more representative of how this would
                     look in a real-world application.</div>
                </div>
              </div>
            </div>

- accordion-flush
  accordion-flush

          <div class="card">
              <div class="card-body">
               <div class="accordion app-accordion accordion-flush accordion-secondary"
                id="accordionappflushExample">
                <div class="accordion-item">
              <h2 class="accordion-header">
               <button class="accordion-button" type="button" data-bs-toggle="collapse"
                data-bs-target="#appflush-collapseOne" aria-expanded="true"
                aria-controls="appflush-collapseOne">
                Accordion Item #1
               </button>
              </h2>
              <div id="appflush-collapseOne" class="accordion-collapse show"
               data-bs-parent="#accordionappflushExample">
               <div class="accordion-body">Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-appflush</code> class. This is the first item's accordion
                body.</div>
              </div>
                </div>
                <div class="accordion-item">
              <h2 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#appflush-collapseTwo" aria-expanded="false"
                aria-controls="appflush-collapseTwo">
                Accordion Item #2
               </button>
              </h2>
              <div id="appflush-collapseTwo" class="accordion-collapse collapse"
               data-bs-parent="#accordionappflushExample">
               <div class="accordion-body">Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-appflush</code> class. This is the second item's accordion
                body. Let's imagine this being filled with some actual content.</div>
              </div>
                </div>
                <div class="accordion-item">
              <h2 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#appflush-collapseThree" aria-expanded="false"
                aria-controls="appflush-collapseThree">
                Accordion Item #3
               </button>
              </h2>
              <div id="appflush-collapseThree" class="accordion-collapse collapse"
               data-bs-parent="#accordionrealExample">
               <div class="accordion-body">Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-appflush</code> class. This is the third item's accordion
                body. Nothing more exciting happening here in terms of content, but just filling up the
                space to make it look, at least at first glance, a bit more representative of how this would
                look in a real-world application.</div>
                </div>
               </div>
            </div>
          </div>
         </div>

- app-accordion-icon-left
  app-accordion-icon-left

          <div class="card">

          <div class="card-body">
           <div
            class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus"
            id="accordionlefticonExample">
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseOne" aria-expanded="true"
               aria-controls="lefticon-collapseOne">
               What happens if I just pay my ticket?
              </button>
             </h2>
             <div id="lefticon-collapseOne" class="accordion-collapse collapse show">
              <div class="accordion-body">
              ...
              </div>
             </div>
            </div>
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
               aria-controls="lefticon-collapseTwo">
               Can this ticket affect my job?
              </button>
             </h2>
             <div id="lefticon-collapseTwo" class="accordion-collapse collapse">
              <div class="accordion-body">
               ...
              </div>
             </div>
            </div>
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseThree" aria-expanded="false"
               aria-controls="lefticon-collapseThree">
               How long does it take to resolve my case?
              </button>
             </h2>
             <div id="lefticon-collapseThree" class="accordion-collapse collapse">
              <div class="accordion-body">
              ...
              </div>
             </div>
            </div>
           </div>
          </div>
         </div>

- app-accordion-plus
  app-accordion-plus

          <div class="card">

          <div class="card-body">
           <div
            class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus"
            id="accordionlefticonExample">
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseOne" aria-expanded="true"
               aria-controls="lefticon-collapseOne">
               What happens if I just pay my ticket?
              </button>
             </h2>
             <div id="lefticon-collapseOne" class="accordion-collapse collapse show">
              <div class="accordion-body">
              ...
              </div>
             </div>
            </div>
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
               aria-controls="lefticon-collapseTwo">
               Can this ticket affect my job?
              </button>
             </h2>
             <div id="lefticon-collapseTwo" class="accordion-collapse collapse">
              <div class="accordion-body">
               ...
              </div>
             </div>
            </div>
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseThree" aria-expanded="false"
               aria-controls="lefticon-collapseThree">
               How long does it take to resolve my case?
              </button>
             </h2>
             <div id="lefticon-collapseThree" class="accordion-collapse collapse">
              <div class="accordion-body">
              ...
              </div>
             </div>
            </div>
           </div>
          </div>
         </div>

- No icon indicators

                                      <div class="card">

                                      <div class="card-body">
                                      <div class="accordion app-accordion accordion-light-danger app-accordion-no-icon"
                                      id="accordionnoiconExample">
                                      <div class="accordion-item">
                                      <h2 class="accordion-header">
                                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                      data-bs-target="#noicon-collapseOne" aria-expanded="true"
                                      aria-controls="noicon-collapseOne">
                                      <i class="ti ti-message-report me-1 f-s-20"></i> What happens if I just pay my ticket?
                                      </button>
                                      </h2>
                                      <div id="noicon-collapseOne" class="accordion-collapse collapse show">
                                      <div class="accordion-body">
                                      Paying your ticket without contesting it can result in a conviction on your driving record.
                                      This can have long-lasting consequences such as increased insurance rates, driver's license
                                      suspension, employment restrictions, and additional fines imposed by your state's DMV.
                                      </div>
                                      </div>
                                      </div>
                                      <div class="accordion-item">
                                      <h2 class="accordion-header">
                                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                      data-bs-target="#noicon-collapseTwo" aria-expanded="false"
                                      aria-controls="noicon-collapseTwo">
                                      <i class="ti ti-ticket me-1 f-s-20"></i> Can this ticket affect my job?
                                      </button>
                                      </h2>
                                      <div id="noicon-collapseTwo" class="accordion-collapse collapse">
                                      <div class="accordion-body">
                                      Absolutely, tickets recorded on your driving history can result in disqualification from
                                      driving commercially or obtaining a commercial driver's license (CDL). They can also
                                      disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a
                                      clean driving record.
                                      </div>
                                      </div>
                                      </div>
                                      <div class="accordion-item">
                                      <h2 class="accordion-header">
                                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                      data-bs-target="#noicon-collapseThree" aria-expanded="false"
                                      aria-controls="noicon-collapseThree">
                                      <i class="ti ti-transition-bottom me-1 f-s-20"></i> How long does it take to resolve my
                                      case?
                                      </button>
                                      </h2>
                                      <div id="noicon-collapseThree" class="accordion-collapse collapse">
                                      <div class="accordion-body">
                                      It really depends on the court your ticket landed in. Some courts move faster than others,
                                      but on average, it could take about 1-3 months. This is perfectly normal in the legal
                                      process.
                                      </div>
                                      </div>
                                      </div>
                                      </div>
                                      </div>
                                     </div>

Background

- bg-primary
  bg-primary

                                    <button type="button" class="btn bg-primary text-white">bg-primary</button>

- bg-secondary
  bg-secondary

                                    <button type="button" class="btn bg-secondary text-white">bg-secondary</button>

- bg-success
  bg-success

                                    <button type="button" class="btn bg-success text-white">bg-success</button>

- bg-danger
  bg-danger

                                    <button type="button" class="btn bg-danger text-white">bg-danger</button>

- bg-warning
  bg-warning

                                    <button type="button" class="btn bg-warning text-white">bg-warning</button>

- bg-info
  bg-info

                                    <button type="button" class="btn bg-info text-white">bg-info</button>

- bg-light
  bg-light

                                    <button type="button" class="btn bg-light text-white">bg-light</button>

- bg-dark
  bg-dark

                                    <button type="button" class="btn bg-dark text-white">bg-dark</button>

- bg-primary-900
  bg-primary-900

                                    <button type="button" class="btn bg-primary-900">bg-primary-900</button>

- bg-primary-800
  bg-primary-800

                                    <button type="button" class="btn bg-primary-800">bg-primary-800</button>

- bg-primary-700
  bg-primary-700

                                    <button type="button" class="btn bg-primary-700">bg-primary-700</button>

- bg-primary-600
  bg-primary-600

                                    <button type="button" class="btn bg-primary-600">bg-primary-600</button>

- bg-primary-500
  bg-primary-500

                                    <button type="button" class="btn bg-primary-500">bg-primary-500</button>

- bg-primary-400
  bg-primary-400

                                    <button type="button" class="btn bg-primary-400">bg-primary-400</button>

- bg-primary-300
  bg-primary-300

                                    <button type="button" class="btn bg-primary-300">bg-primary-300</button>

- bg-outline-primary
  bg-outline-primary

                                    <button type="button" class="btn bg-outline-primary">bg-outline-primary</button>

- bg-outline-secondary
  bg-outline-secondary

                                    <button type="button" class="btn bg-outline-secondary">bg-outline-secondary</button>

- bg-outline-success
  bg-outline-success

                                    <button type="button" class="btn bg-outline-success">bg-outline-success</button>

- bg-outline-danger
  bg-outline-danger

                                    <button type="button" class="btn bg-outline-danger">bg-outline-danger</button>

- bg-outline-warning
  bg-outline-warning

                                    <button type="button" class="btn bg-outline-warning">bg-outline-warning</button>

- bg-outline-info
  bg-outline-info

                                    <button type="button" class="btn bg-outline-info">bg-outline-info</button>

- bg-outline-light
  bg-outline-light

                                    <button type="button" class="btn bg-outline-light">bg-outline-light</button>

- bg-outline-dark
  bg-outline-dark

                                    <button type="button" class="btn bg-outline-dark">bg-outline-dark</button>

- bg-light-primary
  bg-light-primary

                                    <button type="button" class="btn bg-light-primary">bg-light-primary</button>

- bg-light-secondary
  bg-light-secondary

                                    <button type="button" class="btn bg-light-secondary">bg-light-secondary</button>

- bg-light-success
  bg-light-success

                                    <button type="button" class="btn bg-light-success">bg-light-success</button>

- bg-light-danger
  bg-light-danger

                                    <button type="button" class="btn bg-light-danger">bg-light-danger</button>

- bg-light-warning
  bg-light-warning

                                    <button type="button" class="btn bg-light-warning">bg-light-warning</button>

- bg-light-info
  bg-light-info

                                    <button type="button" class="btn bg-light-info">bg-light-info</button>

- bg-light-light
  bg-light-light

                                    <button type="button" class="btn bg-light-light">bg-light-light</button>

- bg-light-dark
  bg-light-dark

                                    <button type="button" class="btn bg-light-dark">bg-light-dark</button>

Progress

- progress-bar bg-primary
  progress-bar bg-primary

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-primary" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-secondary
  progress-bar bg-secondary

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-secondary" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-success
  progress-bar bg-success

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-success" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-danger
  progress-bar bg-danger

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-danger" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-warning
  progress-bar bg-warning

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-warning" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-info
  progress-bar bg-info

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-info" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-light
  progress-bar bg-light

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-dark
  progress-bar bg-dark

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-dark" style="width: 12.5%"></div>
                                   </div>

- progress-bar bg-light-primary
  progress-bar bg-primary

                                    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div>
                                     </div>

- progress-bar bg-light-secondary
  progress-bar bg-secondary

                                    <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-secondary" style="width: 25%"> 25% </div>
                                     </div>

- progress-bar bg-light-success
  progress-bar bg-success

                                    <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div>
                                     </div>

- progress-bar bg-light-danger
  progress-bar bg-danger

                                    <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                 aria-valuemax="100">
                                 <div class="progress-bar bg-light-danger" style="width: 50%"> 50% </div>
                                  </div>

- progress-bar bg-light-warning
  progress-bar bg-warning

                                    <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div>
                                     </div>

- progress-bar bg-light-info
  progress-bar bg-info

                                    <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-info" style="width: 62.5%"> 62.5% </div>
                                     </div>

- progress-bar bg-light-light
  progress-bar bg-info

                                    <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
                                    aria-valuemax="100">
                                    <div class="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div>
                                     </div>

- progress-bar bg-light-dark
  progress-bar bg-info

                                    <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
                                 aria-valuemax="100">
                                 <div class="progress-bar bg-light-dark" style="width: 95%"> 95% </div>
                                  </div>

- progress-bar progress-bar-striped
  progress-bar bg-primary progress-bar-striped

                                    <div class="d-flex gap-3 flex-wrap">
                                     <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-primary progress-bar-striped" style="width: 12.5%"> 12.5% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated"
                                       style="width: 25%"> 25% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                                       style="width: 37.5%"> 37.5% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"
                                       style="width: 50%"> 50% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
                                       style="width: 62.5%"> 62.5% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-info progress-bar-striped progress-bar-animated"
                                       style="width: 75%"> 75% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-light progress-bar-striped progress-bar-animated"
                                       style="width: 82.5%"> 82.5% </div>
                                     </div>

                                     <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
                                      aria-valuemax="100">
                                      <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated"
                                       style="width: 95%"> 95% </div>
                                     </div>

                                    </div>

- progress sizes

                                    <div class="d-flex flex-column gap-3">
                                    <div class="progress h-5">
                                     <div class="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 20%;"></div>
                                    </div>

                                    <div class="progress">
                                     <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 30%;">This is normal size</div>
                                    </div>

                                    <div class="progress">
                                     <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 40%;">This is normal size</div>
                                    </div>

                                    <div class="progress h-15">
                                     <div class="progress-bar bg-success h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 50%;"> height 15px</div>
                                    </div>

                                    <div class="progress h-15">
                                     <div class="progress-bar bg-info h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 60%;"> height 15px</div>
                                    </div>

                                    <div class="progress h-20">
                                     <div class="progress-bar bg-danger h-20" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 70%;"> height 20px</div>
                                    </div>

                                    <div class="progress h-25">
                                     <div class="progress-bar bg-warning h-25" role="progressbar" aria-valuenow="70" aria-valuemin="0"
                                      aria-valuemax="100" style="width: 80%;"> height 25px</div>
                                    </div>
                                   </div>

Helper Classes

- text-[color]
  text-primary

                                    <div class="d-flex flex-wrap gap-2">
                                       <span class="text-primary p-2"> - .text-primary</span>
                                       <span class="text-secondary p-2"> - .text-secondary</span>
                                       <span class="text-success p-2"> - .text-success</span>
                                       <span class="text-danger p-2"> - .text-danger</span>
                                       <span class="text-warning p-2"> - .text-warning</span>
                                       <span class="text-info p-2"> - .text-info</span>
                                       <span class="text-light p-2"> - .text-light</span>
                                       <span class="text-dark p-2"> - .text-dark</span>
                                    </div>

- link-[color]
  link-primary

                                    <div class="d-flex flex-wrap gap-2">
                                       <span class="link-primary p-2"> - .link-primary</span>
                                       <span class="link-secondary p-2"> - .link-secondary</span>
                                       <span class="link-success p-2"> - .link-success</span>
                                       <span class="link-danger p-2"> - .link-danger</span>
                                       <span class="link-warning p-2"> - .link-warning</span>
                                       <span class="link-info p-2"> - .link-info</span>
                                       <span class="link-light p-2"> - .link-light</span>
                                       <span class="link-dark p-2"> - .link-dark</span>
                                    </div>

- txt-bg-[color]
  txt-bg-primary

                                    <div class="d-flex flex-wrap gap-2">
                                       <span class="txt-bg-primary p-2"> - .txt-bg-primary</span>
                                       <span class="txt-bg-secondary p-2"> - .txt-bg-secondary</span>
                                       <span class="txt-bg-success p-2"> - .txt-bg-success</span>
                                       <span class="txt-bg-danger p-2"> - .txt-bg-danger</span>
                                       <span class="txt-bg-warning p-2"> - .txt-bg-warning</span>
                                       <span class="txt-bg-info p-2"> - .txt-bg-info</span>
                                       <span class="txt-bg-light p-2"> - .txt-bg-light</span>
                                       <span class="txt-bg-dark p-2"> - .txt-bg-dark</span>
                                    </div>

- text-[option]
  text-start

                                       <div class="text-lowercase p-2">Text-Lowercase</div>
                                       <div class="text-uppercase p-2">Text-Uppercase</div>
                                       <div class="text-capitalize p-2">Text-Capitalize</div>
                                       <div class="text-center">- Text Align Center</div>
                                       <div class="text-start">- Text Align Start</div>
                                       <div class="text-end">- Text Align End</div>

- text-d-[option]
  text-d-underline

                                    <div class="p-2">- Text Decoration<span class="text-d-underline ms-2"> underline </span></div>
                                        <div class="p-2">- Text Decoration<span class="text-d-line-through ms-2"> line-through </span></div>
                                        <div class="p-2">- Text Decoration<span class="text-d-overline ms-2"> overline</span></div>
                                        <div class="p-2">- Text Decoration<span class="text-d-overline-underline ms-2">overline-underline</span></div>
                                        <div class="p-2">- Text Decoration<span class="text-d-line-underline ms-2">underline-line-through</span>

- f-fs-[option]
  f-fs-normal

                                     <div class="p-2">- Font style<span class="f-fs-normal ms-2">Normal</span></div>
                                     <div class="p-2">- Font style<span class="f-fs-italic ms-2">Italic</span></div>
                                     <div class="p-2">- Font style<span class="f-fs-oblique ms-2">Oblique</span></div>
                                     <div class="p-2">- Font style<span class="f-fs-initial ms-2">Initial</span></div>
                                     <div class="p-2">- Font style<span class="f-fs-inherit ms-2">Inherit</span></div>

- h1-h6
  h1-h6

        <div class="h1">h1 Fontsize</div>
         <div class="h2">h2 Fontsize</div>
         <div class="h3">h3 Fontsize</div>
         <div class="h4">h4 Fontsize</div>
         <div class="h5">h5 Fontsize</div>
         <div class="h6">h6 Fontsize</div>

- f-fw-[weight]
  f-fw-500

                                     <div class="p-2">- Font weight<span class="f-fw-100 ms-2">f-fw-100* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-200 ms-2">f-fw-200* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-300 ms-2">f-fw-300* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-400 ms-2">f-fw-400* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-500 ms-2">f-fw-500* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-600 ms-2">f-fw-600* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-700 ms-2">f-fw-700* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-800 ms-2">f-fw-800* </span></div>
                                     <div class="p-2">- Font weight<span class="f-fw-900 ms-2">f-fw-900* </span></div>

- f-s-[size]
  f-s-14

                                         <div class="p-2 f-s-10 ms-2">Size-10 </span></div>
                                         <div class="p-2 f-s-12 ms-2">Size-12 </span></div>
                                         <div class="p-2 f-s-14 ms-2">Size-14 </span></div>
                                         <div class="p-2 f-s-16 ms-2">Size-16 </span></div>
                                         <div class="p-2 f-s-18 ms-2">Size-18 </span></div>
                                         <div class="p-2 f-s-20 ms-2">Size-20 </span></div>
                                         <div class="p-2 f-s-24 ms-2">Size-24 </span></div>
                                         <div class="f-s-80 ms-2">Size-80 </span></div>

- pa-[option]
  pd-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border pa-16">Padding-16</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-14">Padding-14</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-10">Padding-10</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-8">Padding-8</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-4">Padding-4</p>
                                        </div>
                                    </div>

- pa-t-[option]
  pa-t-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border pa-t-40">Padding-Top-40</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-t-35">Padding-Top-35</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-t-20">Padding-Top-20</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-t-15">Padding-Top-15</p>
                                        </div>
                                    </div>

- pa-s-[option]
  pa-s-0

                                    <div class="row">
                                        <div class="col-12">
                                         <p class="border pa-s-40">Padding-Start-40</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border pa-s-35">Padding-Start-35</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border pa-s-20">Padding-Start-20</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border pa-s-15">Padding-Start-15</p>
                                        </div>
                                    </div>

- pa-b-[option]
  pa-t-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border pa-b-40">Padding-Bottom-40</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-b-35">Padding-Bottom-35</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-b-20">Padding-Bottom-20</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-b-15">Padding-Bottom-15</p>
                                        </div>
                                    </div>

- pa-e-[option]
  pa-e-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border pa-e-40">Padding-End-40</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-e-35">Padding-End-35</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-e-20">Padding-End-20</p>
                                        </div>
                                        <div class="col">
                                         <p class="border pa-e-15">Padding-End-15</p>
                                        </div>
                                    </div>

- mg-[option]
  pd-0

                                  <div class="row">
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-40 txt-bg-primary">Margin-40</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-34 txt-bg-dark">Margin-34</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-30 txt-bg-light">Margin-30</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-28 txt-bg-info">Margin-28</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-24 txt-bg-warning">Margin-24</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-20 txt-bg-danger">Margin-20</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <div class="mg-14 txt-bg-success">Margin-14</div>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <p class="mg-10 txt-bg-secondary">Margin-10</p>
                                         </div>
                                        </div>
                                        <div class="col-auto mb-2">
                                         <div class="border">
                                          <p class="mg-4 txt-bg-primary">Margin-4</p>
                                         </div>
                                    </div>

- mg-t-[option]
  mg-t-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border mg-t-40">margin-Top-40</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-t-35">margin-Top-35</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-t-20">margin-Top-20</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-t-15">margin-Top-15</p>
                                        </div>
                                    </div>

- mg-s-[option]
  mg-s-0

                                    <div class="row">
                                        <div class="col-12">
                                         <p class="border mg-s-40">margin-Start-40</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-s-35">margin-Start-35</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-s-20">margin-Start-20</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-s-15">margin-Start-15</p>
                                        </div>
                                    </div>

- mg-b-[option]
  mg-t-0

                                    <div class="row">
                                        <div class="col">
                                         <p class="border mg-b-40">margin-Bottom-40</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-b-35">margin-Bottom-35</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-b-20">margin-Bottom-20</p>
                                        </div>
                                        <div class="col">
                                         <p class="border mg-b-15">margin-Bottom-15</p>
                                        </div>
                                    </div>

- mg-e-[option]
  mg-e-0

                                    <div class="row">
                                        <div class="col-12">
                                         <p class="border mg-e-40">margin-End-40</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-e-35">margin-End-35</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-e-20">margin-End-20</p>
                                        </div>
                                        <div class="col-12">
                                         <p class="border mg-e-15">margin-End-15</p>
                                        </div>
                                    </div>

- w-[option]
  w-50

                                         <div class="w-150 border  p-2 mb-2"> w-150 </div>
                                         <div class="w-80 border  p-2 mb-2"> w-80 </div>
                                         <div class="w-60 border  p-2 mb-2"> w-60 </div>
                                         <div class="w-50 border  p-2 mb-2"> w-50 </div>

- h-[option]
  h-50

                                         <div class="h-150 border  p-2 mb-2"> h-150 </div>
                                         <div class="h-80 border  p-2 mb-2"> h-80 </div>
                                         <div class="h-60 border  p-2 mb-2"> h-60 </div>
                                         <div class="h-50 border  p-2 mb-2"> h-50 </div>

- b-[option]
  border

                                    <div class="app-example">
                                       <div class="border">border</div>
                                       <div class="border-t">border-t</div>
                                       <div class="border-s">border-s</div>
                                       <div class="border-e">border-e</div>
                                       <div class="border-b">border-b</div>
                                    </div>

- b-1-[color]
  b-1-primary

                                    <div class="app-example">
                                        <div class="b-1-primary p-2">b-1-primary</div>
                                        <div class="b-1-secondary p-2">b-1-secondary</div>
                                        <div class="b-1-success p-2">b-1-success</div>
                                        <div class="b-1-danger p-2">b-1-danger</div>
                                        <div class="b-1-warning p-2">b-1-warning</div>
                                        <div class="b-1-info p-2">b-1-info</div>
                                        <div class="b-1-light p-2">b-1-light</div>
                                        <div class="b-1-dark p-2">b-1-dark</div>
                                    </div>

- b-[size]-[color]
  b-1-primary

                                    <div class="app-example">
                                        <div class="b-1-primary p-2">b-1-primary</div>
                                        <div class="b-3-secondary p-2">b-3-secondary</div>
                                        <div class="b-5-success p-2">b-5-success</div>
                                        <div class="b-7-danger p-2">b-7-danger</div>
                                        <div class="b-9-warning p-2">b-9-warning</div>
                                        <div class="b-15-info p-2">b-15-info</div>
                                    </div>

- b-r-[option]
  b-r-5

                                    <div class="app-example">
                                        <div class="b-1-secondary b-r-5">b-r-5</div>
                                        <div class="b-1-secondary b-r-10">b-r-10</div>
                                        <div class="b-1-secondary b-r-15">b-r-15</div>
                                        <div class="b-1-secondary b-r-20">b-r-20</div>
                                        <div class="b-1-secondary b-r-25">b-r-25</div>
                                        <div class="b-1-secondary b-r-30">b-r-30</div>
                                     </div>

Divider

- app-divider-v
  app-divider-v

                                      <div class="app-divider-v"></div>

- app-divider-v dotted
  app-divider-v dotted

                                      <div class="app-divider-v dotted"></div>

- app-divider-v dashed
  app-divider-v dashed

                                      <div class="app-divider-v dashed"></div>

- app-divider-h
  app-divider-h

                                      <div class="app-divider-h"></div>

- app-divider-h dotted
  app-divider-h dotted

                                      <div class="app-divider-h dotted"></div>

- app-divider-h dashed
  app-divider-h dashed

                                      <div class="app-divider-h dashed"></div>

- app-divider-v justify-content-start
  app-divider-v

                                      <div class="app-divider-v">
                                      <p> justify-content-start </p>
                                      </div>

- app-divider-v justify-content-center
  app-divider-v justify-content-center

                                      <div class="app-divider-v justify-content-center">
                                      <p> justify-content-center </p>
                                      </div>

- app-divider-v justify-content-end
  app-divider-v justify-content-end

                                      <div class="app-divider-v justify-content-end">
                                      <p> justify-content-end </p>
                                      </div>

- app-divider-h align-items-start
  app-divider-h

                                      <div class="card h-100">
                                        <div class="card-body divider-body d-flex">
                                          <div class="app-divider-h">
                                            <p>Or</p>
                                           </div>
                                        </div>
                                      </div>

- app-divider-h align-items-center
  app-divider-h align-items-center

                                      <div class="card h-100">
                                        <div class="card-body divider-body d-flex">
                                          <div class="app-divider-h align-items-center">
                                            <p>Or</p>
                                           </div>
                                        </div>
                                      </div>

- app-divider-h align-items-end
  app-divider-h align-items-end

                                      <div class="card h-100">
                                        <div class="card-body divider-body d-flex">
                                          <div class="app-divider-h align-items-end">
                                            <p>Or</p>
                                           </div>
                                        </div>
                                      </div>

- app-divider-v primary
  app-divider-v primary

                                      <div class="app-divider-v primary">
                                      </div>

- app-divider-v secondary
  app-divider-v secondary

                                      <div class="app-divider-v secondary">
                                      </div>

- app-divider-v success
  app-divider-v success

                                      <div class="app-divider-v success">
                                      </div>

- app-divider-v danger
  app-divider-v danger

                                      <div class="app-divider-v danger">
                                      </div>

- app-divider-v warning
  app-divider-v warning

                                      <div class="app-divider-v warning">
                                      </div>

- app-divider-v info
  app-divider-v info

                                      <div class="app-divider-v info">
                                      </div>

- app-divider-v light
  app-divider-v light

                                      <div class="app-divider-v light">
                                      </div>

- app-divider-v dark
  app-divider-v dark

                                      <div class="app-divider-v dark">
                                      </div>

- app-divider-h primary
  app-divider-h primary

                                      <div class="app-divider-h primary">
                                      </div>

- app-divider-h secondary
  app-divider-h secondary

                                      <div class="app-divider-h secondary">
                                      </div>

- app-divider-h success
  app-divider-h success

                                      <div class="app-divider-h success">
                                      </div>

- app-divider-h danger
  app-divider-h danger

                                      <div class="app-divider-h danger">
                                      </div>

- app-divider-h warning
  app-divider-h warning

                                      <div class="app-divider-h warning">
                                      </div>

- app-divider-h info
  app-divider-h info

                                      <div class="app-divider-h info">
                                      </div>

- app-divider-h light
  app-divider-h light

                                      <div class="app-divider-h light">
                                      </div>

- app-divider-h dark
  app-divider-h dark

                                      <div class="app-divider-h dark">
                                      </div>

Ribbon

- ribbon ribbon-left
  ribbon ribbon-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon ribbon-left ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon ribbon-left ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon ribbon-left ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="ribbon ribbon-left ribbon-danger">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="ribbon ribbon-left ribbon-warning">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="ribbon ribbon-left ribbon-info">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="ribbon ribbon-left ribbon-light">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="ribbon ribbon-left ribbon-dark">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- cross-shadow-ribbon cross-left
  cross-shadow-ribbon cross-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-danger">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-warning">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-info">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-light">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="cross-shadow-ribbon cross-left ribbon-dark">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- ribbon-shape shape-left
  ribbon-shape shape-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-shape shape-left ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-shape shape-left ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-shape shape-left ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="ribbon-shape shape-left ribbon-danger">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="ribbon-shape shape-left ribbon-warning">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="ribbon-shape shape-left ribbon-info">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="ribbon-shape shape-left ribbon-light">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="ribbon-shape shape-left ribbon-dark">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- arrow-ribbon arrow-left
  arrow-ribbon arrow-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="arrow-ribbon arrow-left ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="arrow-ribbon arrow-left ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="arrow-ribbon arrow-left ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="arrow-ribbon arrow-left ribbon-danger">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="arrow-ribbon arrow-left ribbon-warning">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="arrow-ribbon arrow-left ribbon-info">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="arrow-ribbon arrow-left ribbon-light">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="arrow-ribbon arrow-left ribbon-dark">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- ribbon-side side-left
  ribbon-side side-left ribbon-primary

                                      <div class="d-flex gap-4 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-side side-left ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-side side-left ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-side side-left ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="ribbon-side side-left ribbon-danger">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="ribbon-side side-left ribbon-warning">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="ribbon-side side-left ribbon-info">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="ribbon-side side-left ribbon-light">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="ribbon-side side-left ribbon-dark">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- ribbon-top top-left
  ribbon-top top-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-top top-left ribbon-primary">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-top top-left ribbon-secondary">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-top top-left ribbon-success">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="ribbon-top top-left ribbon-danger">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="ribbon-top top-left ribbon-warning">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="ribbon-top top-left ribbon-info">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="ribbon-top top-left ribbon-light">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="ribbon-top top-left ribbon-dark">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>
                                      </div>

- circle-ribbon circle-left
  circle-ribbon circle-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="circle-ribbon circle-left ribbon-primary">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="circle-ribbon circle-left ribbon-secondary">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="circle-ribbon circle-left ribbon-success">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="circle-ribbon circle-left ribbon-danger">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="circle-ribbon circle-left ribbon-warning">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="circle-ribbon circle-left ribbon-info">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="circle-ribbon circle-left ribbon-light">
                                                50%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                              <div class="circle-ribbon circle-left ribbon-dark">
                                                50%
                                              </div>
                                           </div>
                                      </div>

- ribbon file-left
  ribbon file-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-file w-120 h-120 bg-primary-500">
                                              <div class="ribbon file-left ribbon-primary">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-secondary-500">
                                              <div class="ribbon file-left ribbon-secondary">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-success-500">
                                              <div class="ribbon file-left ribbon-success">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-danger-500">
                                              <div class="ribbon file-left ribbon-danger">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-warning-500">
                                              <div class="ribbon file-left ribbon-warning">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-info-500">
                                              <div class="ribbon file-left ribbon-info">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-light-500">
                                              <div class="ribbon file-left ribbon-light">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-dark-500">
                                              <div class="ribbon file-left ribbon-dark">
                                                25%
                                              </div>
                                           </div>
                                      </div>

- box-ribbon box-left
  ribbon file-left ribbon-primary

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-primary"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-secondary"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-success"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-danger-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-danger"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-warning-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-warning"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-info-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-info"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-light-500">
                                              <div class="box-ribbon box-left">
                                                <div class="ribbonbox ribbon-light"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-dark-500">
                                           <div class="box-ribbon box-left">
                                             <div class="ribbonbox ribbon-dark"> Box </div>
                                           </div>
                                        </div>
                                      </div>

- ribbon ribbon-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon ribbon-right ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon ribbon-left-bottom ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon ribbon-right-bottom ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- ribbon-shape shape-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-shape shape-right ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-shape shape-left-bottom ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-shape shape-right-bottom ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- arrow-ribbon arrow-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="arrow-ribbon arrow-right ribbon-primary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="arrow-ribbon arrow-left-bottom ribbon-secondary">
                                                Ribbon
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="arrow-ribbon arrow-right-bottom ribbon-success">
                                                Ribbon
                                              </div>
                                           </div>
                                      </div>

- ribbon-top top-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-top top-right ribbon-primary">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-top top-left-bottom ribbon-secondary">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-top top-right-bottom ribbon-success">
                                                <i class="fa-solid fa-gift fa-fw"></i>
                                              </div>
                                           </div>
                                      </div>

- ribbon-side side-[position]

                                      <div class="d-flex gap-4 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="ribbon-side side-right ribbon-primary">
                                                Side
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="ribbon-side side-left-bottom ribbon-secondary">
                                                Side
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="ribbon-side side-right-bottom ribbon-success">
                                                Side
                                              </div>
                                           </div>
                                      </div>

- cross-shadow-ribbon cross-[position]

                                      <div class="d-flex gap-4 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="cross-shadow-ribbon cross-right ribbon-primary">
                                                Side
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="cross-shadow-ribbon cross-left-bottom ribbon-secondary">
                                                Side
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="cross-shadow-ribbon cross-right-bottom ribbon-success">
                                                Side
                                              </div>
                                           </div>
                                      </div>

- circle-ribbon circle-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="circle-ribbon circle-right ribbon-primary">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="circle-ribbon circle-left-bottom ribbon-secondary">
                                                25%
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="circle-ribbon circle-right-bottom ribbon-success">
                                                25%
                                              </div>
                                           </div>
                                      </div>

- ribbon file-[position]

                                      <div class="d-flex gap-2 flex-wrap">
                                           <div class="ribbon-file w-120 h-120 bg-primary-500">
                                              <div class="ribbon file-right ribbon-primary">
                                                10%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-secondary-500">
                                              <div class="ribbon file-left-bottom ribbon-secondary">
                                                10%
                                              </div>
                                           </div>

                                           <div class="ribbon-file w-120 h-120 bg-success-500">
                                              <div class="ribbon file-right-bottom ribbon-success">
                                                10%
                                              </div>
                                           </div>
                                      </div>

- box-ribbon box-[position]

                                      <div class="d-flex gap-3 flex-wrap">
                                           <div class="ribbon-box w-120 h-120 bg-primary-500">
                                              <div class="box-ribbon box-right">
                                                <div class="ribbonbox ribbon-primary"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-secondary-500">
                                              <div class="box-ribbon box-left-bottom">
                                                <div class="ribbonbox ribbon-secondary"> Box </div>
                                              </div>
                                           </div>

                                           <div class="ribbon-box w-120 h-120 bg-success-500">
                                              <div class="box-ribbon box-right-bottom">
                                                <div class="ribbonbox ribbon-success"> Box </div>
                                              </div>
                                           </div>
                                      </div>

####

#### Code

#### Preview