Badge

Badge

A badge is a small label for counts and statuses. Its font size and padding are in em units, so it scales with its parent, whether a heading or a button. Color it with a .text-bg-{color} helper (added in 5.2.0), which sets the background and a contrasting text color in one class, and round it with .rounded-pill.

Badges in a heading, on buttons and as a notification dotHTMLLive

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 d-flex flex-wrap align-items-center gap-4">
  <h4 class="m-0">Bootstrap <span class="badge text-bg-secondary">5.3.8</span></h4>
  <button class="btn btn-primary">Messages <span class="badge text-bg-light">4</span></button>
  <button class="btn btn-outline-dark 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>
</div>

Browser output of Listing 3.23 — Browser output of 23

For the notification badge, .position-relative makes the button the containing block, top-0 start-100 moves the badge to its top-right corner, and .translate-middle centers it on that corner. The .visually-hidden span tells screen readers what "99+" means.

MENU