Bootstrap 3 Badges

Use badges to append and highlight new or unread items.

Bootstrap's badges are similar to labels in that they allow you to highlight appended text. However, badges generally highlight the number of new or unread items that are associated with a link. They could also be used to indicate how many items are associated with a link (such as how many user comments an article has).

Badges also self-collapse when there are no items within the badge.

Creating a Badge

To create a badge, apply the .badge class to the <span> element that represents the text to be highlighted.

View Output

Badges Inside Buttons

You can nest a badges inside <button> elements.

View Output

Badges Inside Navigation

Bootstrap includes styles that change the way the badge appears when it's inside an active pill nav item.

View Output