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

Heading New

Heading New

Heading New

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