Bootstrap - Badges
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>