Badges

Here's an example of badges styled with different background colors:

<div class="container">
  <span class="badge text-bg-primary">Primary</span>
  <span class="badge text-bg-secondary">Secondary</span>
  <span class="badge text-bg-success">Success</span>
  <span class="badge text-bg-danger">Danger</span>
  <span class="badge text-bg-warning">Warning</span>
  <span class="badge text-bg-info">Info</span>
  <span class="badge text-bg-light">Light</span>
  <span class="badge text-bg-dark">Dark</span>
</div>

Key Features

• Badge Styling: Each <span> element has a class (badge) for styling badges and a specific class (text-bg-*) for background color variations.

• Color Variations: Badges are styled with different background colors (text-bg-primary, text-bg-secondary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info, text-bg-light, text-bg-dark).

• Semantic Usage: Badges are used to visually represent status, category, or labels within the content.

Usage

• Customization: Adjust the classes (text-bg-primary, text-bg-secondary, etc.) to match your design system or theme colors.

• Accessibility: Ensure badges have sufficient contrast with their background colors for readability.

• Responsive: Badges will adapt to different screen sizes within the container.

This example provides a straightforward way to implement badges with different background colors to enhance visual hierarchy and communication in your web applications or websites.