Bootstrap Badges

Bootstrap Badges Overview

A .badge applies small, bold, padded styling to inline text, and combining it with a theme color class like bg-primary or bg-danger communicates status at a glance. Badges scale their font size relative to their parent element, so a badge inside an h5 looks different from one inside a button.

The .rounded-pill modifier gives badges a fully rounded, pill-shaped appearance often preferred for counts, and Bootstrap's position utilities let you place a badge in the corner of a button or icon for notification-style indicators.

Bootstrap Badges Example

<h5>Notifications <span class="badge bg-secondary">4</span></h5>

<span class="badge rounded-pill bg-success">Active</span>
<span class="badge rounded-pill bg-danger">Expired</span>

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    9+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

The heading badge shows a plain count next to a title. The two pill badges use rounded-pill with success and danger colors to represent status. The button example positions a notification badge in the top-right corner using position-absolute, top-0, start-100, and translate-middle, with a visually-hidden span providing context for screen readers.

Top 10 Bootstrap Badges Examples

These are the badge patterns you'll use for counts, statuses, and notification indicators.

Popular Real-World Bootstrap Badges Examples

These badge patterns are common in inboxes, product listings, and status-driven interfaces.

Best Practices

• Keep badge text extremely short—ideally a number, single word, or short status label.
• Use theme colors consistently so badge color always maps to the same meaning across the app.
• Add visually-hidden context text for icon-attached notification badges so screen readers understand them.
• Use rounded-pill for numeric counts, which reads more naturally in a circular shape.
• Position notification badges with the documented position-absolute/translate-middle pattern instead of custom CSS.
• Use subtle badge variants for less urgent, informational tags like 'Beta' or 'New'.
• Avoid placing badges on every single list item unless the count truly matters for every row.

Common Mistakes

• Cramming long text into a badge, causing awkward wrapping or truncation.
• Using the same badge color for unrelated meanings, confusing users about status.
• Forgetting position-relative on the parent element, breaking positioned notification badges.
• Omitting a visually-hidden description on icon-only badges, hurting accessibility.
• Overusing bright danger/warning badges for non-urgent labels, causing visual fatigue.
• Not updating badge counts dynamically when the underlying data changes.

Key Takeaways

• badge combined with bg-{color} creates small, bold status or count indicators.
• rounded-pill gives badges a fully rounded, count-friendly shape.
• Position utilities let badges overlay the corner of icons or buttons for notifications.
• Badges scale their size relative to their parent element's font size.
• Consistent color-to-meaning mapping keeps badges useful at a glance.