#### Badges

##### Basic Badges

Primary Secondary Success Danger Warning Info Light Dark

     <span class="badge text-bg-primary">...</span>
     <span class="badge text-bg-secondary">...</span>
     <span class="badge text-bg-success">...</span>
     <span class="badge text-bg-danger">...</span>
     <span class="badge text-bg-warning">...</span>
     <span class="badge text-bg-info">...</span>
     <span class="badge text-bg-light">...</span>
     <span class="badge text-bg-dark">...</span>

##### Outline Badges

Primary Secondary Success Danger Warning Info Dark

    <span class="badge text-outline-primary">...</span>
    <span class="badge text-outline-secondary">...</span>
    <span class="badge text-outline-success">...</span>
    <span class="badge text-outline-danger">...</span>
    <span class="badge text-outline-warning">...</span>
    <span class="badge text-outline-info">...</span>
    <span class="badge text-outline-dark">...</span>

##### Light Badges

Primary Secondary Success Danger Warning Info Dark

      <span class="badge text-light-primary"> <i class="ti ti-download me-1"></i>...</span>
      <span class="badge text-light-secondary">...</span>
      <span class="badge text-light-success">...</span>
      <span class="badge text-light-danger">...</span>
      <span class="badge text-light-warning">...</span>
      <span class="badge text-light-info">...</span>
      <span class="badge text-light-dark">...</span>

##### Radious option on Badges

Primary Secondary Success Danger

    <span class="badge text-bg-primary b-r-0">...</span>
    <span class="badge text-bg-secondary b-r-6">...</span>
    <span class="badge text-bg-success b-r-8">...</span>
    <span class="badge text-bg-danger b-r-10">...</span>

##### Badges position

    <button type="button" class="btn btn-outline-danger position-relative">
       Offline
       <span
         class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
         <span class="visually-hidden">Offline</span>
       </span>
    </button>

    <button type="button" class="btn btn-outline-warning position-relative">
       Busy
       <span
         class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
         <span class="visually-hidden">Busy</span>
       </span>
    </button>

    <button type="button" class="btn btn-outline-success position-relative">
       Online
       <span
         class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
         <span class="visually-hidden">Online</span>
       </span>
    </button>

    <button type="button" class="btn btn-outline-secondary position-relative">
       Disable
       <span
         class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
         <span class="visually-hidden">Disable</span>
       </span>
    </button>

##### Icon's badges

        <a href="#" class="position-relative bg-light-primary px-2 py-1 b-r-10">
          <i class="ti ti-shopping-cart f-s-22"></i>
          <span
            class="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a href="#" class="position-relative bg-light-secondary px-2 py-1 b-r-10">
          <i class="ti ti-line-dashed f-s-22"></i>
          <span
            class="position-absolute top-0 start-100 translate-middle p-1 bg-secondary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a href="#" class="position-relative bg-light-success px-2 py-1 b-r-10">
          <i class="ti ti-speakerphone f-s-22"></i>
          <span
            class="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a href="#" class="position-relative bg-light-danger px-2 py-1 b-r-10">
          <i class="ti ti-mail f-s-22"></i>
          <span
            class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a href="#" class="position-relative bg-light-dark px-2 py-1 b-r-10">
          <i class="ti ti-moon-filled f-s-22"></i>
          <span
            class="position-absolute top-0 start-100 translate-middle p-1 bg-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

##### Badges with button

         <button type="button" class="btn btn-light-primary">
           Notifications <span class="badge text-bg-primary badge-notification">4</span>
         </button>

         <button type="button" class="btn btn-light-secondary position-relative">
          Disable
          <span
            class="position-absolute top-0 start-100 translate-middle p-2 bg-secondary border border-light rounded-circle">
            <span class="visually-hidden">Disable</span>
          </span>
         </button>

         <button type="button" class="btn btn-light-success position-relative">
           Inbox
           <span
             class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success badge-notification">
             99+
             <span class="visually-hidden">unread messages</span>
           </span>
         </button>

         <button type="button" class="btn btn-light-danger position-relative">
           Unread

           <span
             class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger badge-notification">
             <i class="ti ti-bell-ringing"></i>
           </span>
         </button>

         <button type="button" class="btn btn-outline-warning position-relative">
           Inbox
           <span class="badge rounded-pill bg-warning badge-notification">
             99+
             <span class="visually-hidden">unread messages</span>
           </span>
         </button>

         <button type="button" class="btn btn-light-info position-relative f-s-14">
           <b>50%</b> Off
           <span
             class="position-absolute top-0 start-100 translate-middle bg-info b-r-6 badge-notification p-1 f-s-12">
             New
           </span>
         </button>

         <button type="button" class="btn btn-light-dark position-relative">
           <b> 1 </b> missed call
           <span
             class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
             <span class="visually-hidden">Busy</span>
           </span>
        </button>

##### Radious Badges

# Heading New

    <h1 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h1>
    <h2 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h2>
    <h3 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h3>
    <h4 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h4>
    <h5 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h5>
    <h6 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h6>