In Bootstrap 5, badges are adaptable and straightforward elements that are utilized to draw attention to important data, such as labels, numbers, or notifications. Badges are an easy way to add clarity and context to your design, whether you want to mark items with specific statuses or show a count next to a button.

We'll go over every aspect of using Bootstrap 5 badges in this blog post, including how to utilize them with other elements, alter them to fit your design, and their variations.

1. Fundamental Badges

The.badge class is used to build Bootstrap 5 badges. Important information can be emphasized by adding badges to a variety of elements, including buttons, paragraphs, and headings.

Example:

Example Heading New

This is a badge example. Info

In this example, the badge "New" is applied to a heading, and "Info" is applied to a paragraph.

Badge Colors

To give badges a contextual look, Bootstrap provides several color classes. These can be added using the .bg-* classes, such as .bg-primary, .bg-success, or .bg-danger.

Color Classes:

.bg-primary: Blue

.bg-secondary: Grey

.bg-success: Green

.bg-danger: Red

.bg-warning: Yellow

.bg-info: Light Blue

.bg-light: Light Grey

.bg-dark: Dark Grey

Example:

<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-dark">Dark</span>

 

These color-coded badges provide context to the user about the status or category of the associated content.

2. Badge Inside Buttons

One of the most common uses of badges is to show notification counts inside buttons. This is especially useful in applications that have messaging or shopping cart features.

Example:

<button type="button" class="btn btn-primary">

  Notifications <span class="badge bg-light text-dark">4</span>

</button>

 

<button type="button" class="btn btn-danger">

  Messages <span class="badge bg-light text-dark">10</span>

</button>

In these examples, the badge is used to display a count inside buttons, indicating unread messages or notifications.

3. Pill Badges

Bootstrap 5 introduces a more rounded, pill-shaped badge, which can be created using the .rounded-pill class. This gives badges a more modern, smooth appearance.

Example:

<span class="badge bg-success rounded-pill">Pill Badge</span>

<span class="badge bg-danger rounded-pill">Alert</span>

Pill badges are ideal for rounded button designs or areas where a softer look is desired.

4. Positioning Badges

To show alerts or fresh messages, badges can also be placed over other elements like buttons or icons. Although there isn't a dedicated class in Bootstrap for badge positioning, you can still accomplish this with ease by using utility classes like position-absolute, top-0, start-100, etc.

Example:

<button type="button" class="btn btn-primary position-relative">

  Inbox

  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">

    5+

    <span class="visually-hidden">unread messages</span>

  </span>

</button>

 

In this example, the badge is positioned on the top-right corner of the button, and a screen reader-only message is included using the visually-hidden class for accessibility.

5. Customizing Badges

Badges can be further customized with Bootstrap’s utility classes. For instance, you can change the badge’s text color, background color, size, and more using these utilities.

Example: Custom Color Badge

<span class="badge" style="background-color: #ff6347; color: white;">Custom Badge</span>

You can use inline styles or create custom CSS classes to set your badge’s background and text colors to whatever fits your design.

6. Using Badges in Lists

Badges are also great for displaying counts or statuses in list groups. This is useful for displaying user tasks, categories, or notifications.

Example:

<ul class="list-group">

  <li class="list-group-item d-flex justify-content-between align-items-center">

    Inbox

    <span class="badge bg-primary rounded-pill">12</span>

  </li>

  <li class="list-group-item d-flex justify-content-between align-items-center">

    Sent

    <span class="badge bg-success rounded-pill">5</span>

  </li>

</ul>

  Here, the badges are used inside a list group to show the count of messages in each category.

7. Badge Links

Although badges are often used with text, they can also be used as clickable elements. You can wrap a badge in an anchor tag () to create interactive badges.

Example:

<a href="#" class="badge bg-primary">Clickable Badge</a>

This clickable badge can be used as a button or link, making badges more interactive when needed.

8. Badges with Icons

Adding icons to badges can make them more visually appealing and informative. You can use Bootstrap Icons or other icon libraries to combine icons with badges.

Example:

<span class="badge bg-warning">

  <i class="bi bi-exclamation-triangle-fill"></i> Warning

</span>

 

This example combines a warning icon with a badge, making the purpose of the badge immediately clear.

Conclusion

In Bootstrap 5, badges are a flexible element that may show labels, counts, notifications, and more. You can use badges to improve the user experience and draw attention to key information because they come in a range of colors, shapes (pill badges), and positioning possibilities.

You may successfully integrate badges into your web designs and make interactive, eye-catching user interface elements by using these examples and personalizing your badges.