Badges in Collection

    
<div class="collection">
    <a href="#!" class="collection-item">New<span class="badge-md">1</span></a>
    <a href="#!" class="collection-item">Comments<span class="new badge-md">4</span></a>
    <a href="#!" class="collection-item">Updates<span class="badge-md">14</span></a>
</div>

Badges in Dropdown

Click me!

<ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">one<span class="badge-md">1</span></a></li>
    <li><a href="#!">two<span class="new badge-md">1</span></a></li>
    <li><a href="#!">three</a></li>
    </ul>
    
<a class="btn btn-primary dropdown-button" href="#!" data-activates="dropdown2">Click me!<i class="mdi-navigation-arrow-drop-down right"></i></a>

Classic Bootstrap Badges

Basic Badges

News 5
Comments 10
Updates 2

  <a href="#">News <span class="badge">5</span></a><br>
  <a href="#">Comments <span class="badge">10</span></a><br>
  <a href="#">Updates <span class="badge">2</span></a>

Badges on Buttons



<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>    
<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button> 

Labels

Example New

Example New

Example New

Example New


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

Contextual Label Classes

Contextual classes can be used to color the label.

Default Label Primary Label Success Label Info Label Warning Label Danger Label

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