en-UScy-GBbr-FR
X

Labels and badges

  Feature   >   Typography   >   Labels and badges

Labels

Labels Markup
default <span class="label label-default">Default</span>
primary <span class="label label-primary">Success</span>
success <span class="label label-success">Warning</span>
info <span class="label label-info">Important</span>
warning <span class="label label-warning">Info</span>
danger <span class="label label-danger">Inverse</span>

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Inbox 42 
<a href="#">Inbox <span class="badge">42</span></a>

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill navigations.



<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>