Badges
Badges are small status labels. Colored and pill variants are available.
Live demo
Primary Secondary Success Danger Warning Info Light Dark
Pills: Primary Success Danger
Heading with badge v1.0
Code
<span class="badge badge-primary">Primary</span>
<span class="badge badge-danger badge-pill">Danger</span>
<button class="btn btn-primary">
Notifications <span class="badge badge-light badge-pill">4</span>
</button>Tip: place badges inside buttons or headings to position them in context.