Utilizor
HomeBootstrap 5 BasicsBS5 Badges

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?