Bs5 Badges in Bootstrap
In Bootstrap 5 (BS5), badges are small count and labeling components used to add extra information or highlight items like notifications, statuses, or tags.
?? Basic Badge
<span class="badge bg-primary">Primary</span>? Contextual Color Classes
You can use different bg-* classes for various contexts:
| Class | Description |
|---|---|
bg-primary | Primary badge |
bg-secondary | Secondary badge |
bg-success | Success message |
bg-danger | Danger alert |
bg-warning | Warning message |
bg-info | Informational message |
bg-light | Light themed badge |
bg-dark | Dark themed badge |
? Badge Inside Headings
<h1>Notifications <span class="badge bg-danger">New</span></h1>? Badge in Buttons
<button type="button" class="btn btn-primary"> Messages <span class="badge bg-light text-dark">4</span></button>? Pill Badges
Rounded-pill badges use the .rounded-pill class:
<span class="badge bg-success rounded-pill">Success</span>? Badge with Links
Badges can be used as links by applying them to <a> elements:
<a href="#" class="badge bg-info text-decoration-none">Click Me</a>?? Deprecated Classes in BS5
Bootstrap 5 removed the
.badge-*color classes (used in BS4).Use
.bg-*for background color andtext-*for text color.
Would you like to see examples with icons, dropdowns, or notification indicators next?
