Bootstrap Badges
Badges are small labels used to highlight extra information next to text, like counts, statuses, or new-item indicators. Add the .badge class along with a color like .bg-primary.
Badges automatically scale their size relative to their parent element, so a badge inside an <h3> will look larger than one inside a <button>.
<span class="badge bg-primary">New</span>Basic badges
Add .badge and a background color class like .bg-danger to a <span> to create a small colored label, commonly used for notification counts.
Pill badges and placement
Add .rounded-pill for fully rounded, pill-shaped badges. Badges are often placed inside buttons or headings to show counts like unread messages.
<h3>Inbox <span class="badge bg-secondary">4</span></h3>A heading 'Inbox' followed by a small gray badge showing 4The badge scales to match the size of its parent heading and shows a count.
<button class="btn btn-primary">
Messages <span class="badge rounded-pill bg-danger">9</span>
</button>A blue button with a pill-shaped red badge showing 9rounded-pill makes the badge fully rounded, which looks great for notification counts.
Key points
- .badge creates a small labeling element.
- Combine with .bg-{color} to set the badge's color.
- .rounded-pill creates a fully rounded, pill-shaped badge.
- Badges scale relative to their parent element's font size.