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?

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

BBS5 Badges

BS5 Badges

Pill Badges

Badge inside Button

Examples

Badges

Contextual Badges

Pill Badges

Badge inside Button

Test Your Knowledge

1. Which class is essential for creating a badge?

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

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Badges

BS5 Badges

Pill Badges

Badge inside Button

Examples

Badges

Contextual Badges

Pill Badges

Badge inside Button

Test Your Knowledge

1. Which class is essential for creating a badge?

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