Labels

Great way to highlight secondary information

Variations

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

Theme color

<h1>Amazing heading h1 <span class="label label-theme">New</span></h1>
<h2>Amazing heading h2 <span class="label label-theme">New</span></h2>
<h3>Amazing heading h3 <span class="label label-theme">New</span></h3>
<h4>Amazing heading h4 <span class="label label-theme">New</span></h4>
<h5>Amazing heading h5 <span class="label label-theme">New</span></h5>
<h6>Amazing heading h6 <span class="label label-theme">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Default

<h1>Amazing heading h1 <span class="label label-default">New</span></h1>
<h2>Amazing heading h2 <span class="label label-default">New</span></h2>
<h3>Amazing heading h3 <span class="label label-default">New</span></h3>
<h4>Amazing heading h4 <span class="label label-default">New</span></h4>
<h5>Amazing heading h5 <span class="label label-default">New</span></h5>
<h6>Amazing heading h6 <span class="label label-default">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Primary color

<h1>Amazing heading h1 <span class="label label-primary">New</span></h1>
<h2>Amazing heading h2 <span class="label label-primary">New</span></h2>
<h3>Amazing heading h3 <span class="label label-primary">New</span></h3>
<h4>Amazing heading h4 <span class="label label-primary">New</span></h4>
<h5>Amazing heading h5 <span class="label label-primary">New</span></h5>
<h6>Amazing heading h6 <span class="label label-primary">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Success color

<h1>Amazing heading h1 <span class="label label-success">New</span></h1>
<h2>Amazing heading h2 <span class="label label-success">New</span></h2>
<h3>Amazing heading h3 <span class="label label-success">New</span></h3>
<h4>Amazing heading h4 <span class="label label-success">New</span></h4>
<h5>Amazing heading h5 <span class="label label-success">New</span></h5>
<h6>Amazing heading h6 <span class="label label-success">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Info color

<h1>Amazing heading h1 <span class="label label-info">New</span></h1>
<h2>Amazing heading h2 <span class="label label-info">New</span></h2>
<h3>Amazing heading h3 <span class="label label-info">New</span></h3>
<h4>Amazing heading h4 <span class="label label-info">New</span></h4>
<h5>Amazing heading h5 <span class="label label-info">New</span></h5>
<h6>Amazing heading h6 <span class="label label-info">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Warning color

<h1>Amazing heading h1 <span class="label label-warning">New</span></h1>
<h2>Amazing heading h2 <span class="label label-warning">New</span></h2>
<h3>Amazing heading h3 <span class="label label-warning">New</span></h3>
<h4>Amazing heading h4 <span class="label label-warning">New</span></h4>
<h5>Amazing heading h5 <span class="label label-warning">New</span></h5>
<h6>Amazing heading h6 <span class="label label-warning">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Danger color

<h1>Amazing heading h1 <span class="label label-danger">New</span></h1>
<h2>Amazing heading h2 <span class="label label-danger">New</span></h2>
<h3>Amazing heading h3 <span class="label label-danger">New</span></h3>
<h4>Amazing heading h4 <span class="label label-danger">New</span></h4>
<h5>Amazing heading h5 <span class="label label-danger">New</span></h5>
<h6>Amazing heading h6 <span class="label label-danger">New</span></h6>

Amazing heading h1 New

Amazing heading h2 New

Amazing heading h3 New

Amazing heading h4 New

Amazing heading h5 New
Amazing heading h6 New

Badges

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

<a href="#">Spam <span class="badge">5</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

<button class="btn btn-primary" type="button">
  Archive <span class="badge">120</span>
</button>
Inbox 42 Spam 5

Badges nav

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
  <li role="presentation"><a href="#">Archive <span class="badge">120</span></a></li>
</ul>

Badges nav colors

<ul class="nav nav-pills" role="tablist">
  <li role="presentation">
    <button class="btn btn-primary" type="button">
    Home <span class="badge">42</span>
    </button>
  </li>
  <li role="presentation">
    <button class="btn btn-info" type="button">
    Profile <span class="badge">44</span>
    </button>
  </li>
  <li role="presentation">
    <button class="btn btn-danger" type="button">
    Messages <span class="badge">3</span>
    </button>
  </li>
  <li role="presentation">
    <button class="btn btn-warning" type="button">
    Archive <span class="badge">120</span>
    </button>
  </li>
  <li role="presentation">
    <button class="btn btn-success" type="button">
    Archive <span class="badge">120</span>
    </button>
  </li>
</ul>

Badges nav stacked

<ul class="nav nav-pills nav-stacked" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
  <li role="presentation"><a href="#">Archive <span class="badge">120</span></a></li>
</ul>