Bootstrap Badges
This chapter will explain Bootstrap badges. Badges are similar to labels, the main difference being that badges have more rounded corners.
Badges are mainly used to highlight new or unread items. To use a badge, simply add<span class="badge">them to links, Bootstrap navigation, and other such elements.
The following example demonstrates this:
The result is shown below:
When there are no new or unread items, through the CSS :emptyselector, the badge collapses, indicating that there is no content inside.
Example
Show unread messages:
<div class="container">
<h2>Badge</h2>
<p>The .badge class specifies the number of unread messages:</p>
<p><a href="#">Inbox<span class="badge">21</span></a></p>
</div>
Try it »
Activating Navigation States
You can place badges in active pill navigation and list navigation. By using<span class="badge">to activate the link, as shown in the following example:
Example
<h4>Active state in pill navigation</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>Active state in list navigation</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>
Try it »
The result is shown below:
