Menu

Labels & Badges

Shortcodes  /  Labels & Badges
breadcrumb shadow

    Text/HTML

    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>

    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 and list navigations.


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