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>