Badge

Documentation and examples for badges, our small count and labeling component.

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

 
      <span class="badge rounded-pill bg-primary me-5 pulse mb-4">Primary</span>
      <span class="badge rounded-pill bg-secondary me-5 mb-4">Secondary</span>
      <span class="badge rounded-pill bg-success me-5 mb-4">Success</span>
      <span class="badge rounded-pill bg-danger me-5 mb-4">Danger</span>
      <span class="badge rounded-pill bg-warning me-5 mb-4">Warning</span>
      <span class="badge rounded-pill bg-info me-5 mb-4">Info</span>
      <span class="badge rounded-pill bg-light me-5 mb-4">Light</span>
      <span class="badge rounded-pill bg-dark me-5 mb-4">Dark</span>

Contextual variations Badges

Primary Secondary Success Danger Warning Info Light Dark

  
      <span class="badge bg-primary me-5 pulse mb-4">Primary</span>
      <span class="badge bg-secondary me-5 mb-4">Secondary</span>
      <span class="badge bg-success me-5 mb-4">Success</span>
      <span class="badge bg-danger me-5 mb-4">Danger</span>
      <span class="badge bg-warning me-5 mb-4">Warning</span>
      <span class="badge bg-info me-5 mb-4">Info</span>
      <span class="badge bg-light me-5 mb-4">Light</span>
      <span class="badge bg-dark me-5 mb-4">Dark</span>

Contextual variations Badge With Link

Primary Secondary Success Danger Warning Info Light Dark

   
      <a href="#" class="badge bg-primary me-5 pulse mb-4">Primary</a>
      <a href="#" class="badge bg-secondary me-5 mb-4">Secondary</a>
      <a href="#" class="badge bg-success me-5 mb-4">Success</a>
      <a href="#" class="badge bg-danger me-5 mb-4">Danger</a>
      <a href="#" class="badge bg-warning me-5 mb-4">Warning</a>
      <a href="#" class="badge bg-info me-5 mb-4">Info</a>
      <a href="#" class="badge bg-light me-5 mb-4">Light</a>
      <a href="#" class="badge bg-dark me-5 mb-4">Dark</a>