Labels & Badges

Labels

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.

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

EXAMPLE
Inbox 42


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

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


Adapts to active nav states


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