Bootstrap 5 Badges

Bootstrap 5 Badges Guide

Bootstrap 5 Badges are small count indicators or labels that can be used with buttons, headings, navigation items, and more. They help highlight important information such as notifications, unread messages, or status updates.

---

1. Basic Badge

Use the .badge class to create a badge.

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

---

2. Badges Inside Headings

Badges can be placed inside headings to highlight information.

<h1>Heading 1 <span class="badge bg-secondary">New</span></h1>
<h2>Heading 2 <span class="badge bg-success">Updated</span></h2>
<h3>Heading 3 <span class="badge bg-danger">Alert</span></h3>

---

3. Badges in Buttons

You can use badges inside buttons to show notifications or counts.

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

<button type="button" class="btn btn-danger">
    Alerts <span class="badge bg-warning text-dark">2</span>
</button>

---

4. Colored Badges

Bootstrap provides several color classes for badges.

<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>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

---

5. Pill-Shaped Badges

Use .rounded-pill to create a rounded badge.

<span class="badge rounded-pill bg-success">Approved</span>
<span class="badge rounded-pill bg-danger">Rejected</span>

---

6. Badge Inside Navigation Links

You can use badges inside nav items.

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">Inbox <span class="badge bg-primary">5</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Notifications <span class="badge bg-danger">3</span></a>
    </li>
</ul>

---

7. Badge as a Counter (Dynamic Update with JavaScript)

This example dynamically updates the badge count when the button is clicked.

<button id="updateBtn" class="btn btn-warning">
    Cart <span id="cartBadge" class="badge bg-dark">0</span>
</button>

<script>
    let count = 0;
    document.getElementById("updateBtn").addEventListener("click", function() {
        count++;
        document.getElementById("cartBadge").textContent = count;
    });
</script>

How It Works:

• Clicking the button increases the count inside the badge.

---

Conclusion

✔ Bootstrap 5 Badges are useful for indicating notifications, labels, and counts.
✔ They can be used in buttons, headings, navigation, and dynamically updated with JavaScript.
✔ Easy to customize with colors, rounded styles, and different sizes.

Need more examples? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.