Bootstrap Badges

Badges are small count and labeling components. You see them every day acting as "New!" tags next to product names, or as red unread message counts attached to inbox icons.

---

1. Contextual Badges

To create a badge, wrap your text in a <span> element, apply the base .badge class, and then apply a background color utility like .bg-primary or .bg-danger.

<!-- Notice we use standard background utilities for badge colors -->
<span class="badge bg-success">New!</span>
<span class="badge bg-warning text-dark">Pending</span>

---

2. Scaling with Parent Sizing

Bootstrap brilliantly engineered badges to be entirely relative to their parent element. If you put a badge inside an <h1> tag, it will scale up large. If you put it inside a small paragraph, it will scale down perfectly.

<h1>Product Title <span class="badge bg-secondary">New</span></h1>

---

3. Pill Badges

To give a badge the modern, fully rounded "pill" look, simply attach Bootstrap's .rounded-pill utility class next to it.

<span class="badge rounded-pill bg-primary">Pill Shape</span>

---

4. Badges Inside Buttons (Notifications)

Badges are most commonly used to display notification counts inside of buttons. Their relative sizing means they fit perfectly without breaking the button's layout.

<button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-dark ms-1">4</span>
</button>

---

5. Positioned Profile Badges

You can use Bootstrap's positioning utilities to stick a badge perfectly over the top-right corner of a button or profile icon—creating a classic "Unread Activity" red dot.

<!-- The button MUST have .position-relative -->
<button type="button" class="btn btn-primary position-relative">
    Inbox
    
    <!-- The Badge MUST have .position-absolute -->
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
    </span>
</button>