Nearby lessons
13 of 39🏷️ BS5 Badges
📌 What Are Bootstrap 5 Badges?
Badges are small labels or counts used to highlight status, notifications, or categories. Use the base class .badge plus a background color class like .bg-primary or .bg-success.
🎨 Badge Color Variants (.badge + .bg-*)
.badge – base class for all badges.
.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark – set the background color. Use .text-dark on light/warning/info badges for readable text.
💊 Pill Badges (.rounded-pill)
.rounded-pill – makes the badge fully rounded (pill shape). Use with .badge and any .bg-* class.
🔘 Badges Inside Buttons
Place a .badge (with .bg-*) inside a button to show counts (e.g. notifications).
📋 Badges in Headings and Text
Use badges next to headings or in paragraphs to show labels like "New" or numbers.
📍 Positioned Badges (.position-absolute)
Use .position-relative on the parent and .position-absolute with .top-0 .start-100 .translate-middle on the badge to place it at the top-right corner (e.g. notification count on an icon).
✅ Badge Best Practices
- Match color to meaning: Use success for positive, danger for alerts, etc.
- Keep text short: Badges work best with one word or a small number.
- Use pill style for counts:
.rounded-pillis common for numbers. - Ensure contrast: Use
.text-darkon light/warning/info badges.