Bootstrap Badges and Labels
Bootstrap Badges and Labels are used to highlight important information like notifications, status, or categories.
📌 These features are available mainly in Bootstrap 3. In Bootstrap 4+, labels became badges only.
🎯 Bootstrap Labels
Labels are small inline-highlight elements.
✔ Basic Label Example:
🎨 Label Classes
| Class | Purpose | Color |
|---|---|---|
label-default |
Standard label | Gray |
label-primary |
Important/Primary | Blue |
label-success |
Success | Green |
label-info |
Info | Light blue |
label-warning |
Warning | Orange |
label-danger |
Danger/Error | Red |
Example:
🔔 Bootstrap Badges
Badges are used to display small count values like unread notifications.
✔ Basic Badge Example:
📍 Badges in Button
🎯 Badges in Navigation
🧾 Badges in List Group
✔ Summary
| Feature | Labels | Badges |
|---|---|---|
| Display small inline text | ✔️ | ❌ |
| Used for counts/notifications | ❌ | ✔️ |
| Available in Bootstrap 3 | ✔️ | ✔️ |
| Bootstrap 4 changes | Removed (merged into badges) | Still available |
