Bootstrap Badges and Labels: Adding Visual Cues and Information to Web Pages
Learn how to use Bootstrap's badges and labels to enhance your web pages. This tutorial explains how to create and customize badges (for displaying counts and notifications) and labels (for adding context and categorization), improving the visual appeal and usability of your web applications.
Bootstrap Badges and Labels
Bootstrap provides styled badges and labels for enhancing your web pages. Badges are typically used to show counts or notifications, while labels offer additional information or categorization.
Bootstrap Badges
Badges are small numerical indicators, often used to show the number of unread items or notifications. The `.badge` class is used to create a badge.
Badges can also be placed inside other elements, like buttons:
Bootstrap Labels
Labels provide additional context or information about an element. The `.label` class is used to create a basic label.
Customizing Label Colors
You can change label colors using contextual classes:
- `.label-primary`
- `.label-success`
- `.label-info`
- `.label-warning`
- `.label-danger`
Bootstrap 4 Badges
In Bootstrap 4, badges can be used with heading tags (`
` to ``). Use the `.badge` class combined with contextual classes (e.g., `.badge-secondary`) within the heading elements.
Contextual Badges (Bootstrap 4)
Control badge colors using contextual classes: `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-danger`, `.badge-warning`, `.badge-info`, `.badge-light`, `.badge-dark`.
Pill Badges (Bootstrap 4)
Create rounder pill-shaped badges using the `.badge-pill` class.