Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. They can be used as part of links or buttons, or standalone as notification indicators.

Examples

Badges automatically scale with the parent element's font size. Use contextual .bg-* classes for colour.

H1 New

H2 New

H4 New

H6 New

PrimarySecondarySuccessDangerWarningInfo

HTML

<!-- Badges in headings -->
<h1>Heading <span class="badge bg-secondary">New</span></h1>
<h2>Heading <span class="badge bg-secondary">New</span></h2>
<h4>Heading <span class="badge bg-secondary">New</span></h4>

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

Pill badges

Use .rounded-pill to make badges more rounded. Great for notification counters.

PrimarySecondarySuccessDangerWarningInfo

HTML

<!-- Pill badges — use .rounded-pill -->
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>

On buttons

Badges can be used as part of links or buttons to provide a counter or label. Use Bootstrap's position utilities to position it precisely.

HTML

<!-- Badge as notification counter on a button -->
<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">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>