Bootstrap Badges

Badges are just like the labels there is only one major difference in between of both and that the corners are more rounded. This tutorial is regarding Bootstrap badges.

Badges are mostly used to highlight new or unread items by using a <span class="badge"> to links, Bootstrap navs, and more. The following example demonstrates this:

<a href="#">Mailbox <span class="badge">50</span></a>

Demo

When there are no new or unread items, badges will simply collapse via CSS’s :empty selector provided no content exists within.

Active nav states

Badges can be place in list navigations and active states of pill. You can get this by placing <span class="badge"> to active links, as displayed in the following example:

<h4>Example for Active State in Pill </h4>
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
 <li class="active">
 <a href="#">
 <span class="badge pull-right">42</span>
 Home
 </a>
 </li>
 <li><a href="#">Profile</a></li>
 <li>
 <a href="#">
 <span class="badge pull-right">3</span>
 Messages
 </a>
 </li>
</ul>

Demo

Bootstrap Badges