Bootstrap Badges

Bootstrap badges are small yet powerful components designed to display numerical values or status indicators within a user interface. They are commonly used to highlight notifications, alerts, or item counts, providing users with essential context at a glance.

Key Concepts

• Purpose: Badges serve to offer additional information about UI elements, such as notifications, messages, or item counts.
• Styling: Bootstrap's built-in classes allow for easy styling of badges to seamlessly fit your application's design.

Basic Usage

Creating a badge is straightforward; simply apply the .badge class to any text element, such as a link or button.

Example

<span class="badge bg-primary">New</span>

Displaying Counts

Badges are often paired with links or icons to indicate counts of items, such as unread messages or notifications.

Example with Count

<a href="#" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">3</span>
</a>

Badge Variants

Bootstrap offers various contextual classes to style badges in different colors:

• .bg-primary: Blue background
• .bg-secondary: Gray background
• .bg-success: Green background
• .bg-danger: Red background
• .bg-warning: Yellow background
• .bg-info: Light blue background
• .bg-light: Light gray background
• .bg-dark: Dark gray background

Example of Different Variants

<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>

Conclusion

Bootstrap badges offer a simple yet effective way to convey important information to users. By leveraging Bootstrap's built-in classes, developers can easily integrate these components into their projects, significantly enhancing user experience.