Bootstrap 5 Badges

Welcome to The Coding College—your ultimate resource for coding tutorials and programming insights! In this tutorial, we’ll explore Badges in Bootstrap 5, an essential component for highlighting key information on your website or app.

Badges are small, customizable elements that are typically used to display counts, labels, or statuses. With Bootstrap 5, you can easily style and position badges to create visually appealing and informative designs.

What Are Badges in Bootstrap 5?

Badges in Bootstrap 5 are versatile UI elements often used to display numerical counts (like unread messages) or to label items with statuses or categories (like “New” or “Sale”). They are created using the .badge class and come with multiple styling options for customization.

Key Features of Bootstrap 5 Badges:

• Lightweight and easy to implement.
• Fully responsive and customizable.
• Can be used with buttons, text, or other elements.

Creating a Basic Badge

To create a badge, simply add the .badge class to a <span> or similar inline element.

Example: Basic Badge

<span class="badge bg-primary">Primary Badge</span>
<span class="badge bg-secondary">Secondary Badge</span>

Output:

• A primary-colored badge with “Primary Badge.”
• A secondary-colored badge with “Secondary Badge.”

Badge Colors

Bootstrap 5 provides a variety of color options for badges, making it easy to match them to your website’s theme.

Available Classes:

Example: Colorful Badges

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

Using Badges with Text

Badges can be paired with headings or text elements to highlight key information.

Example: Badges with Text

<h1>Heading <span class="badge bg-success">New</span></h1>
<p>This is a paragraph with a badge <span class="badge bg-info">Info</span>.</p>

Output:
A badge next to the heading or within the paragraph text.

Badge Sizes

Badges can be styled to suit different sizes of text or UI components.

• Default Size: Fits normal text.
• Larger Size: Use Bootstrap’s utilities like .fs-4 (font size).

Example: Larger Badges

<span class="badge bg-primary fs-4">Large Badge</span>

Pill Badges

Pill badges are rounded badges that provide a softer and more modern look. Use the .rounded-pill class to create them.

Example: Pill Badges

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

Use Case:
Perfect for indicating status or labels like “New,” “Hot,” or “Sale.”

Badges with Buttons

Badges can be combined with buttons to display counters or additional information.

Example: Button with Badge

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

Output:
A button labeled “Notifications” with a badge displaying the count.

Interactive Badges

You can make badges interactive by embedding them inside links or buttons.

Example: Link with Badge

<a href="#" class="text-decoration-none">
  Messages <span class="badge bg-danger">5</span>
</a>

Use Case:
Highlight unread messages, notifications, or alerts.

Badge Positioning

Use utility classes like .position-absolute and .top-0 to position badges precisely within a container.

Example: Positioned Badge

<div class="position-relative">
  <button type="button" class="btn btn-primary">
    Inbox
  </button>
  <span class="position-absolute top-0 start-100 translate-middle badge bg-danger rounded-pill">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</div>

Output:
A badge placed on the top-right corner of the button.

Accessibility Best Practices for Badges

1. Use aria-labels: Provide descriptive labels for badges to ensure screen readers convey their meaning.
2. Avoid Overloading: Use concise text to keep badges easy to read.
3. Combine with Visual Indicators: When using color-coded badges, add icons or text to improve accessibility for colorblind users.

Use Cases for Bootstrap 5 Badges

1. Notification Counters: Display the number of unread messages or alerts.
2. Status Indicators: Highlight product status (e.g., “In Stock,” “Out of Stock”).
3. Category Tags: Label content with categories or keywords (e.g., “Sports,” “Technology”).
4. Feature Highlights: Draw attention to new or exclusive features.

FAQs About Bootstrap 5 Badges

Q1: Can I use badges inside navigation menus?

A: Absolutely! Badges work well in navigation items to display counts or statuses.

Q2: Are badges responsive in Bootstrap 5?

A: Yes, badges adapt to different screen sizes and layouts when combined with Bootstrap’s grid system and utilities.

Q3: How do I change the badge shape?

A: Use the .rounded-pill class for pill-shaped badges or .rounded-0 for square edges.

Conclusion

Badges in Bootstrap 5 are a versatile and essential component for modern web design. They allow you to highlight key information in a visually appealing way, whether it’s a notification count, status indicator, or category label.