Labels

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>                                          
                     

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>                                          
                     

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

Badges

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

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