Bootstrap Badges

Advertisements


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

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>
Active nav state Badges Demo


Advertisements
Advertisements