Using Badges in Bootstrap

What are Badges?

Badges are lightweight components in Bootstrap that display a small count or label beside a parent element. They are commonly used to indicate unread messages, notifications, or to highlight specific information, enhancing the user interface of web applications.

Basic Badge Example

The simplest way to use badges is to add the .badge class to an element. Here’s how to create a basic badge:

Example: Basic Badge

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

Expected Output

This will render a blue badge displaying the text "New".

Badge Variants

Bootstrap provides several contextual classes to style badges, allowing you to change their colors according to the context:

Example: Badge Variants

    <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 text-dark">Warning</span>
    <span class="badge bg-info text-dark">Info</span>
    <span class="badge bg-light text-dark">Light</span>
    <span class="badge bg-dark">Dark</span>
                

Expected Output

Badges with Links

You can also use badges as part of a link by wrapping them in anchor tags:

Example: Badge in a Link

    <a href="#" class="badge bg-primary">Inbox <span class="badge bg-light text-dark">4</span></a>
                

Expected Output

This will create a badge that acts as a link, showing a count of items in the inbox:

Pill Badges

Pill badges have rounded corners, providing a different aesthetic. You can achieve this by adding the .rounded-pill class:

Example: Pill Badge

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

Expected Output

Summary

Bootstrap badges are a versatile tool for displaying small counts and labels. They can be used in various ways, including as standalone elements, part of links, and with different styles and sizes to fit your design needs.