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.

<a href="#">Messages <span class="badge">23</span></a>

Badges Inside Buttons

You can nest a badges inside <button> elements.

<button class="btn btn-primary" type="button">
Inbox <span class="badge">14</span>
</button>

Badges Inside Navigation

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Inbox <span class="badge">14</span></a></li>
  <li role="presentation"><a href="#">Trash <span class="badge">328</span></a></li>
  <li role="presentation"><a href="#">Spam <span class="badge">94327</span></a></li>
</ul>