<h3>Labels</h3>

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

<br><br>


<div id="accordion1" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion1">How to use</a></div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;span class="label label-default"&gt;Default&lt;/span&gt;
&lt;span class="label label-primary"&gt;Primary&lt;/span&gt;
&lt;span class="label label-success"&gt;Success&lt;/span&gt;
&lt;span class="label label-info"&gt;Info&lt;/span&gt;
&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;
&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;
</code>
</pre>
</div>
</div>
</div>
</div>

<br><br>



<h3>Badges</h3>



    <ul class="nav nav-pills">
      <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>
    <br>
    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
      <li class="active">
        <a href="#">
          <span class="badge pull-right">42</span>
          Home
        </a>
      </li>
      <li><a href="#">Profile</a></li>
      <li>
        <a href="#">
          <span class="badge pull-right">3</span>
          Messages
        </a>
      </li>
    </ul>
    <br>
    <button class="btn btn-primary" type="button">
      Messages <span class="badge">4</span>
    </button>

<br><br>

<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">How to use</a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
  &lt;ul class="nav nav-pills"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;42&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Messages &lt;span class="badge"&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;br&gt;
    &lt;ul class="nav nav-pills nav-stacked" style="max-width: 260px;"&gt;
      &lt;li class="active"&gt;
        &lt;a href="#"&gt;
          &lt;span class="badge pull-right"&gt;42&lt;/span&gt;
          Home
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;span class="badge pull-right"&gt;3&lt;/span&gt;
          Messages
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;br&gt;
    &lt;button class="btn btn-primary" type="button"&gt;
      Messages &lt;span class="badge"&gt;4&lt;/span&gt;
    &lt;/button&gt;
</code>
</pre>
</div>
</div>
</div>
</div>