Similarly, you can create pill shape badges (i.e. badges with more rounded corners) using the .rounded-pill modifier class, as shown in the following example:

Example

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

— The output of the above example will look something like this:

Showing Counter with Badges

You can also use badges as part of links or buttons to provide a counter, such as number of received or unread messages, number of notifications etc. They’re most commonly found in email clients, application dashboards, social networking websites, etc. Here’s an example:

Example

<nav class="nav nav-pills">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">Profile</a>
    <a href="#" class="nav-link active">Messages <span class="badge bg-light text-primary">24</span></a>
    <a href="#" class="nav-link">Notification <span class="badge bg-primary">5</span></a>
</nav>

— The output of the above example will look something like this:

Creating Positioned Badges

You can use positioning utilities to modify a .badge and position it in the corner of a link or button.

Let’s take a look at the following example to understand how it basically works:

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">50+</span>
</button>

— The output of the above example will look something like this: