Bootstrap Badges

A badge is a small label, for a count, a status or a tag. In Bootstrap 5 it is made with .badge and a text-bg-* color class.

Badge colors

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

In Bootstrap 4 you wrote badge-primary. In Bootstrap 5 use text-bg-primary.

Badge in headings and buttons

<h3>Inbox <span class="badge text-bg-secondary">4</span></h3>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-light">9</span>
</button>

Pill badges

<span class="badge rounded-pill text-bg-primary">Pill</span>
<span class="badge rounded-pill text-bg-success">New</span>

Positioned badge (notification dot)

<button type="button" class="btn btn-primary position-relative">
  Messages
  <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>

Accessibility

If the badge only has a number, add hidden text for screen readers with .visually-hidden, as shown above. A screen reader user would not understand “99+” alone.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.