Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Badges in Bootstrap 5
Badges: Small count and labeling component that scales to match the size of the immediate parent element.
Basic Badges
Use the .badge class together with contextual classes for colored badges.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<!-- Basic Badges --> <h1>Example heading <span class="badge bg-secondary">New</span></h1> <h2>Example heading <span class="badge bg-secondary">New</span></h2> <!-- Standalone badges --> <span class="badge bg-primary">Primary</span> <span class="badge bg-secondary">Secondary</span> <span class="badge bg-success">Success</span>
Contextual Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
Pill Badges
Use the .rounded-pill class to make badges more rounded.
PrimarySecondarySuccessDangerWarningInfoLightDark
<!-- Pill Badges --> <span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span>
Badges in Buttons
<!-- Badges in Buttons --> <button type="button" class="btn btn-primary"> Notifications <span class="badge bg-danger">4</span> </button> <button type="button" class="btn btn-success"> Messages <span class="badge bg-light text-dark">12</span> </button>
Positioned Badges
<!-- Positioned Badge -->
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<!-- Dot Badge -->
<button type="button" class="btn btn-success position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>Badges in Navigation
Background Colors
Solid Badges
PrimarySuccessDangerWarningInfo
Outline Badges
PrimarySuccessDangerWarningInfo
Sizing Badges
LargeNormalSmallExtra Small
With PaddingMore Padding
<!-- Sizing Badges --> <span class="badge bg-primary fs-6">Large</span> <span class="badge bg-success">Normal</span> <span class="badge bg-danger fs-7">Small</span> <!-- With Padding --> <span class="badge bg-primary p-2">With Padding</span>
Badges with Icons
Featured Verified Warning Information
Practical Examples
Example: Email Inbox
Example: Status Indicators
Online Users24
Pending Orders12
New Messages8
Critical Errors3
Accessibility
Accessibility Guidelines
- Use
.visually-hiddenfor screen readers when badges convey important information - Ensure sufficient color contrast for badge text
- Don't rely solely on color to convey meaning
- For notification badges, consider adding ARIA labels
- Make clickable badges (in buttons/navs) keyboard accessible
Best Practices
Do's
- ✅ Use for counts, labels, and status indicators
- ✅ Match badge size with parent element
- ✅ Use appropriate colors for different states
- ✅ Consider pill badges for counts
- ✅ Add icons for better visual communication
Don'ts
- ❌ Don't use badges for long text
- ❌ Avoid too many badges on one element
- ❌ Don't use badges for critical information only
- ❌ Avoid conflicting color combinations
- ❌ Don't forget accessibility considerations
