Bootstrap Badges/Labels

Bootstrap 5 Badges

In Bootstrap 5, the concept of “Labels” has been merged into “Badges”. Badges are small count and labeling components, often used for highlighting new items, notification counts, or status indicators.

Basic Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. They can be used within headings, buttons, or standalone.

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">Updated</span></h2>
<h3>Example heading <span class="badge bg-success">Completed!</span></h3>
<p>Regular text with a <span class="badge bg-info text-dark">Info Badge</span>.</p>

<!--
  Key change from older Bootstrap:
  - `.label` class is removed. All are now `.badge`.
  - Contextual colors are applied using background utility classes (e.g., `bg-primary`, `bg-success`) or the combined `text-bg-*` classes.
  - For example, an old `.label .label-default` is now `<span class="badge bg-secondary">...</span>` or `<span class="badge text-bg-secondary">...</span>`.
-->

Application Scenario: Use badges in navigation menus to show unread messages, on product cards to highlight ‘New’ or ‘Sale’ items, or in lists to indicate status.

Contextual Badge Colors

Use Bootstrap’s background color utilities or the combined text-bg-* classes to style badges with different colors, conveying semantic meaning.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

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

<!--
  Using `text-bg-*` classes is often simpler as they handle text contrast automatically.
  Alternatively, use separate `bg-*` and `text-*` classes:
  <span class="badge bg-primary text-white me-1">Primary (manual text color)</span>
-->

Pill Badges

For a more rounded, pill-like appearance, use the .rounded-pill utility class alongside the .badge class.

Primary Pill
Secondary Pill
Success Pill

<span class="badge rounded-pill text-bg-primary me-1">Primary Pill</span>
<span class="badge rounded-pill text-bg-secondary me-1">Secondary Pill</span>
<span class="badge rounded-pill text-bg-success me-1">99+</span>
<span class="badge rounded-pill text-bg-danger position-relative me-3">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-warning p-2"><span class="visually-hidden">unread messages</span></span>
</span>

<!-- The last example shows a more complex notification badge positioned relative to text. -->

Badges in Buttons

Badges can be easily placed inside buttons to act as counters or indicators.

Messages 4

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary ms-1">4</span>
</button>

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

<!--
  Tip: Use margin utilities like `ms-1` (margin-start) to add a little space between the button text and the badge.
  The second example uses position utilities for a more prominent notification badge outside the button's normal flow.
  `.visually-hidden` is used for accessibility to provide context for screen readers about the badge's meaning if it's just a number.
-->

Application Scenario: Badges on buttons are commonly used in user interfaces for message counts, shopping cart item numbers, or pending task indicators.

Further Learning

Explore all badge functionalities, including positioning and accessibility considerations, in the official Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/components/badge/