Basic Badges
Primary Secondary Success Danger Warning Info Light Dark
                    

                       <div class="d-flex gap-2 flex-wrap">
                        <span class="badge text-bg-primary">Primary</span>
                        <span class="badge text-bg-secondary">Secondary</span>
                        <span class="badge text-bg-success">Success</span>
                        <span class="badge text-bg-danger">Danger</span>
                        <span class="badge text-bg-warning">Warning</span>
                        <span class="badge text-bg-info">Info</span>
                        <span class="badge text-bg-light">Light</span>
                        <span class="badge text-bg-dark">Dark</span>
                        </div>

                    
                
Outline Badges
Primary Secondary Success Danger Warning Info Dark
                    

                        <div class="d-flex gap-2 flex-wrap">
                         <span class="badge text-outline-primary">Primary</span>
                         <span class="badge text-outline-secondary">Secondary</span>
                         <span class="badge text-outline-success">Success</span>
                         <span class="badge text-outline-danger">Danger</span>
                         <span class="badge text-outline-warning">Warning</span>
                         <span class="badge text-outline-info">Info</span>
                         <span class="badge text-outline-dark">Dark</span>
                         </div>

                    
                
Light Badges
Primary Secondary Success Danger Warning Info Dark
 

         <div class="d-flex gap-2 flex-wrap">
           <span class="badge text-light-primary"> <i class="ti ti-download me-1"></i>Primary</span>
           <span class="badge text-light-secondary">Secondary</span>
           <span class="badge text-light-success">Success</span>
           <span class="badge text-light-danger">Danger</span>
           <span class="badge text-light-warning">Warning</span>
           <span class="badge text-light-info">Info</span>
           <span class="badge text-light-dark">Dark</span>
         </div>

 
Radious option on Badges
Primary Secondary Success Danger
                    

                       <div class="d-flex gap-2 flex-wrap">
                           <span class="badge text-bg-primary b-r-0">Primary</span>
                           <span class="badge text-bg-secondary b-r-6">Secondary</span>
                           <span class="badge text-bg-success b-r-8">Success</span>
                           <span class="badge text-bg-danger b-r-10">Danger</span>
                        </div>

                    
                
Badges position
                    

                   <div class="d-flex gap-3 flex-wrap">
                        <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> </div>
Icon's badges
  

     <div class="d-flex gap-3 flex-wrap">
          <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> </div>
Badges with button
                    

                    <div class="d-flex gap-4 flex-wrap">
                         <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>
</div>
Radious Badges

Heading New

Heading New

Heading New

Heading New

Heading New
Heading New
                    

                    <div class="">
                            <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>
                      </div>