This chapter will discuss about Bootstrap badges. Badges are similar to labels; the primary difference is that the corners are more rounded.
Badges are mainly used to highlight new or unread items. To use badges just add <span class = “badge”> to links, Bootstrap navs, and more.
The following example demonstrates this −
<a href = "#">Mailbox <span class = "badge">50</span></a>
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
You can place badges in active states of pill and list navigations. You can achieve this by placing <span class = “badge”> to active links, as demonstrated 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>
Next Topic : Click Here