Bootstrap Badges

This chapter will explain Bootstrap badges. Badges are similar to labels, with the main difference being that badges have more rounded corners.

Badges are primarily used to highlight new or unread items. To use badges, simply add <span class="badge"> to elements like links, Bootstrap navigation, etc.

The following example demonstrates this:

Example

Display unread emails:

<a href="#">Mailbox <span class="badge">50</span></a>

The result is as follows:

When there are no new or unread items, badges will collapse, indicating that there is no content inside, thanks to the :empty CSS selector.

Example

Display unread messages:

<div class="container">
    <h2>Badges</h2>
    <p>.badge class specifies the number of unread messages:</p>
    <p><a href="#">Inbox <span class="badge">21</span></a></p>
</div>

Activating Navigation States

You can place badges in active states in pill-style and list navigations. Activate links by using <span class="badge">, 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>

The result is as follows: