Bootstrap Badges

Badges are used for small count and labeling. Badges scale to match the size of the immediate parent element. Badges can be used as part of links or buttons to provide a counter.

For example,

<h3>Example heading <span class="badge badge-secondary">New</span></h3>

Badge on button as counter:

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

1. Pill Badges

You can use the .badge-pill class to make badges more rounded with a larger border-radius and additional horizontal padding. For example,

<span class="badge badge-pill badge-info">Info</span>

2. Badges as Links

You can use the contextual .badge-* classes on an <a> element to provide actionable badges with hover and focus states. For example,

<a href="#" class="badge badge-primary">Primary</a>