Badges

Badges

Badges are small counters or labels. Use the .badge class together with a contextual color class. They inherit the font size of the parent.

Basic badges

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

In Bootstrap 5, badge colors use the *.bg-* background classes (not .badge- like older versions).

Badge inside a heading

A common use is a badge inside a heading, like a notification count:

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

Rounded pill badges

Use .rounded-pill to make badges fully rounded:

<span class="badge rounded-pill bg-primary">Primary</span>

Positioned badges

Use utilities to position a badge, for example on top of a button or icon.

TL;DR

• Use .badge plus .bg-{color}.
• Badges inherit the font size of the parent.
• .rounded-pill makes pill-shaped badges.
• They are great as notification counters.