Bootstrap 5 Badge
Bootstrap 5 badges are small labelling components used to add counts, status labels, tags, or category indicators to other elements. They can be inline in headings, positioned on buttons as notification counters, or used as standalone tags in card grids.
Primary Class
.badgeCommon Use Cases
- →Notification count on nav icons
- →New/featured labels on cards
- →Category tags on blog posts
- →Status indicators (Active, Pending)
- →Plan labels (Pro, Free, Beta)
Variants & Classes
| Variant | Description |
|---|---|
| Contextual badge | Standard coloured label badge. |
| Pill badge | Fully rounded badge. |
| Positioned badge | Notification dot on a button or icon. |
| Outline badge (custom) | Badge with border instead of fill. |
Code Example
<!-- Category tag badges -->
<div class="d-flex gap-2 flex-wrap">
<span class="badge rounded-pill bg-primary">Bootstrap 5</span>
<span class="badge rounded-pill bg-success">Tutorial</span>
<span class="badge rounded-pill text-bg-warning">New</span>
</div>
<!-- Notification counter on button -->
<button type="button" class="btn btn-primary position-relative">
Notifications
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3 <span class="visually-hidden">unread messages</span>
</span>
</button>
<!-- Status badge in table row -->
<span class="badge bg-success-subtle text-success-emphasis rounded-pill">Active</span>Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Blog category tag strip
- ✓Plan indicator badge in pricing table
- ✓Status badge column in data table
- ✓New feature badge in navigation
- ✓Icon with count badge
Best Practices
Use text-bg-* classes for automatic contrast
Bootstrap 5.3+ introduced text-bg-primary, text-bg-success etc. which automatically set both the background and text colour for correct contrast. Use these instead of manually combining bg-* and text-* classes.
Add visually-hidden text for accessibility
Badge notification counters need a screen-reader-friendly label. Add a span.visually-hidden inside the badge: '3 unread messages' hidden visually but readable by screen readers.