Bootstrap 5 – Badges: Highlight UI Elements with Inline Labels

Introduction – What Are Badges in Bootstrap 5?

Badges are small count or label indicators used to emphasize content like unread messages, statuses, or new tags. Bootstrap 5 badges are lightweight and inline-friendly, making them ideal for buttons, headers, navigation tabs, and more.

In this guide, you’ll learn:

• How to use .badge classes
• Style badges with contextual colors
• Use pill badges for rounded corners
• Combine badges with buttons and headings
• Adjust badge sizes and positioning

Example 1 – Basic Badge

<span class="badge bg-primary">New</span>

Explanation:

• .badge is the base class
• .bg-primary applies Bootstrap’s primary color
• Badges are inline by default and don’t break layout

Example 2 – Badge in a Heading

<h4>Notifications <span class="badge bg-danger">3</span></h4>

Explanation:

• Embed badges inside headings for dynamic counters
• .bg-danger gives a red background for urgency

Example 3 – Badge as a Button Add-on

<button type="button" class="btn btn-success">
  Inbox <span class="badge bg-light text-dark">7</span>
</button>

Explanation:

• Combine with .bg-light text-dark for light-colored badge
• Works well for buttons that show counts (e.g., messages, alerts)

Example 4 – Pill Badges with .rounded-pill

<span class="badge bg-info rounded-pill">Info</span>

Explanation:

• .rounded-pill makes the badge fully rounded like a pill
• Use with any .bg-* color for visual variety

Example 5 – Badge Size and Inline Alignment

<h5>
  Task Status 
  <span class="badge bg-success align-middle">Done</span>
</h5>

Explanation:

• Use .align-middle to vertically align badges with text
• Perfect for labels next to inline content

Available Color Variants

You can use all contextual background classes with badges:

Add .text-* for contrast when needed (e.g., .text-dark on .bg-light).

Best Practices for Bootstrap 5 Badges

Summary – Badge Your UI Elements with Style

Bootstrap 5 badges let you add lightweight indicators anywhere in your interface—whether you’re showing unread messages, new tags, or status labels. They’re easy to customize and integrate with buttons, headings, and navs.

Key Takeaways:

• Use .badge and .bg-* to add color-coded labels
• Apply .rounded-pill for circular styles
• Combine with .text-* and alignment utilities for polish
• Badges can be dynamic via JS or server-side rendering

Ideal for dashboards, navigation bars, notifications, product cards, and user profiles.

FAQs – Bootstrap 5 Badges

What is the use of .badge in Bootstrap?
It visually highlights short information like counters, tags, or statuses inline with text or buttons.

Can badges be used inside buttons?
Yes. It’s common to show counts in buttons like:

<button class="btn btn-primary">Inbox <span class="badge bg-light text-dark">4</span></button>

How do I make a badge circular?
Add .rounded-pill to make badges fully rounded.

Do badges scale automatically with headings?
No, badges stay at their default size. You can adjust font size manually if needed.

Are badges responsive?
They adapt with text but don’t scale fluidly—use utility classes for spacing and alignment.