🏷️ 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:

Class	Use Case
bg-primary	Default/main status
bg-secondary	Neutral info
bg-success	Positive status
bg-danger	Errors, warnings
bg-warning	Warnings
bg-info	Informational tag
bg-light	Light background
bg-dark	Dark background

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

---

🛠️ Best Practices for Bootstrap 5 Badges

Tip	Why It Helps
Use .rounded-pill for aesthetics	Improves UI for notification-style elements
Keep text short	Avoid long phrases that break layout
Use inside buttons or tabs	Indicates dynamic content (e.g., unread counts)
Add .text-* for contrast	Enhances readability on light/dark backgrounds
Combine with accessibility roles	Improves screen reader support for dynamic values

---

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

---

Share Now :