Badge

Default Badges
Primary Secondary Success Danger Warning Info Light Dark
Pill Badges
Primary Secondary Success Danger Warning Info Light Dark
Icon Badges
Primary Secondary Success Danger Warning Info Light Dark
Border Badges
Primary Secondary Success Danger Warning Info Light Dark
Button Badges
Copy 
  
   
<div class="row">
  <div class="col-lg-6">
  <div class="card">
  <div class="card-body">
    <h5 class="card-title">Default Badges</h5>

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

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Pill Badges</h5>
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-warning text-dark">Warning</span>
    <span class="badge rounded-pill bg-info text-dark">Info</span>
    <span class="badge rounded-pill bg-light text-dark">Light</span>
    <span class="badge rounded-pill bg-dark">Dark</span>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Icon Badges</h5>
    <span class="badge bg-primary"> Primary<i class="bi bi-x ms-1"></i></span>                                        <span class="badge bg-secondary"><i class="bi bi-collection me-1"></i> Secondary</span>
    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Success</span>
    <span class="badge bg-danger"><i class="bi bi-exclamation-octagon me-1"></i> Danger</span>
    <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-triangle me-1"></i> Warning</span>
    <span class="badge bg-info text-dark"><i class="bi bi-info-circle me-1"></i> Info</span>
    <span class="badge bg-light text-dark"><i class="bi bi-star me-1"></i> Light</span>
    <span class="badge bg-dark"><i class="bi bi-folder me-1"></i> Dark</span>
  </div>
</div>

</div>



<div class="col-lg-6">

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Border Badges</h5>
    <span class="badge border-primary border-1 text-primary">Primary</span>
    <span class="badge border-secondary border-1 text-secondary">Secondary</span>
    <span class="badge border-success border-1 text-success">Success</span>
    <span class="badge border-danger border-1 text-danger">Danger</span>
    <span class="badge border-warning border-1 text-warning">Warning</span>
    <span class="badge border-info border-1 text-info">Info</span>
    <span class="badge border-light border-1 text-black-50">Light</span>
    <span class="badge border-dark border-1 text-dark">Dark</span>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Button Badges</h5>

    <button type="button" class="btn btn-primary mb-2">
      Primary <span class="badge bg-white text-primary">4</span>
    </button>
    <button type="button" class="btn btn-secondary mb-2">
      Secondary <span class="badge bg-white text-secondary">4</span>
    </button>
    <button type="button" class="btn btn-success mb-2">
      Success <span class="badge bg-white text-success">4</span>
    </button>
    <button type="button" class="btn btn-danger mb-2">
      Danger <span class="badge bg-white text-danger">4</span>
    </button>
    <button type="button" class="btn btn-warning mb-2">
      Warning <span class="badge bg-white text-warning">4</span>
    </button>
    <button type="button" class="btn btn-info mb-2">
      Info <span class="badge bg-white text-info">4</span>
    </button>
    <button type="button" class="btn btn-light mb-2">
      Light <span class="badge bg-secondary text-light">4</span>
    </button>
    <button type="button" class="btn btn-dark mb-2">
      Dark <span class="badge bg-white text-dark">4</span>
    </button>
  </div>
</div>


</div>












</div>
Copy 
  
   

   
      
     .badge {
       // scss-docs-start badge-css-vars
       --#{$prefix}badge-padding-x: #{$badge-padding-x};
       --#{$prefix}badge-padding-y: #{$badge-padding-y};
       @include rfs($badge-font-size, --#{$prefix}badge-font-size);
       --#{$prefix}badge-font-weight: #{$badge-font-weight};
       --#{$prefix}badge-color: #{$badge-color};
       --#{$prefix}badge-border-radius: #{$badge-border-radius};
       // scss-docs-end badge-css-vars
     
       display: inline-block;
       padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
       @include font-size(var(--#{$prefix}badge-font-size));
       font-weight: var(--#{$prefix}badge-font-weight);
       line-height: 1;
       color: var(--#{$prefix}badge-color);
       text-align: center;
       white-space: nowrap;
       vertical-align: baseline;
       @include border-radius(var(--#{$prefix}badge-border-radius));
       @include gradient-bg();
     
       // Empty badges collapse automatically
       &:empty {
         display: none;
       }
     }
     
     // Quick fix for badges in buttons
     .btn .badge {
       position: relative;
       top: -1px;
     }