BBS5 Badges

Learn how to use badges in Bootstrap 5.

BS5 Badges

Badges are used to add some additional information to any content. Use the .badge class together with a contextual class (like .bg-secondary) within <span> elements to create rectangular badges.

Pill Badges

Use the .rounded-pill utility class to make the badges more rounded (larger border-radius).

Badge inside Button

Badges can be used inside buttons to provide a counter.

Examples

Badges

html/css

Badges scale to match the size of the immediate parent element.

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

Contextual Badges

html/css

Coloring badges with background utilities.

<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>

Pill Badges

html/css

Rounded pill badges.

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

Badge inside Button

html/css

Using a badge as a notification counter.

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-danger">4</span>
</button>

Test Your Knowledge

1. Which class is essential for creating a badge?

2. How do you make a badge rounded like a pill?