Bootstrap 5Utilities

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.

Bootstrap class

.badge

Common 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 and classes

Variant	Description and classes	Classes
Contextual badge	Standard coloured label badge.`badge text-bg-primary / text-bg-success / text-bg-danger / text-bg-warning`	`badge text-bg-primary / text-bg-success / text-bg-danger / text-bg-warning`
Pill badge	Fully rounded badge.`badge rounded-pill text-bg-primary`	`badge rounded-pill text-bg-primary`
Positioned badge	Notification dot on a button or icon.`position-relative + badge position-absolute top-0 start-100 translate-middle`	`position-relative + badge position-absolute top-0 start-100 translate-middle`
Outline badge	Badge with border instead of fill.`badge border border-primary text-primary bg-transparent`	`badge border border-primary text-primary bg-transparent`

Code example

HTML

<!-- 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>

Live examples

Category Badges

Pill-shaped category tags commonly used on blog posts or product cards.

Example 1

Notification Badge on Button

Positioned counter badge on a notification button.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.

FAQ

How do I position a Bootstrap 5 badge on a button?

Use position-relative on the button and position-absolute top-0 start-100 translate-middle on the badge. This positions the badge at the top-right corner of the button.