Bootstrap 5 Badges:

Bootstrap 5 badges are versatile UI elements used to display small counts, labels, or other indicators. They are often used alongside buttons, lists, or headings to draw attention to specific information, such as notifications or status updates.

Types of Bootstrap 5 Badges:

1. Default Badges:

Default badges use the .badge class with contextual color classes to indicate different meanings.

Example:

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

Output:

Displays badges with different contextual background colors.

2. Badge with Buttons:

Badges are commonly used with buttons to display counts or notifications.

Example:

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>
<button type="button" class="btn btn-success">
  Messages <span class="badge bg-light text-dark">12</span>
</button>

Output:

Buttons with badges indicating notification counts.

3. Badge with Links:

Badges can be styled as links using <a> tags for interactive functionality.

Example:

<a href="#" class="badge bg-info">Clickable Badge</a>
<a href="#" class="badge bg-warning">Another Link</a>

Output:

Clickable badges styled as links.

4. Badge with Headings:

Use badges with headings to highlight statuses or counts.

Example:

<h1>Heading 1 <span class="badge bg-success">New</span></h1>
<h2>Heading 2 <span class="badge bg-warning">Updated</span></h2>

Output:

Badges appended to headings for additional context.

5. Pill Badges:

Add .rounded-pill to create rounded badges, also called pill badges.

Example:

<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-success rounded-pill">Success</span>

Output:

Circular, rounded badges for a sleek appearance.

6. Badge with Icons:

Combine badges with icons to create visually appealing indicators.

Example:

<span class="badge bg-info">
  <i class="bi bi-info-circle"></i> Info
</span>
<span class="badge bg-danger">
  <i class="bi bi-exclamation-circle"></i> Error
</span>

Output:

Badges with embedded icons for better user experience.