docs.html

    <h3>Button element</h3>
    <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
    <p class="bs-docs-example">
      <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
      <button type="button" class="btn btn-large" disabled="disabled">Button</button>
    </p>
{% highlight html linenos %}
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
{% endhighlight %}

    <h3>Anchor element</h3>
    <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
    <p class="bs-docs-example">
      <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
      <a href="#" class="btn btn-large disabled">Link</a>
    </p>
{% highlight html linenos %}
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
{% endhighlight %}
    <p>
      We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
    </p>


    <h2 id="buttons-tags">One class, multiple tags</h2>
    <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
    <form class="bs-docs-example">
      <a class="btn" href="">Link</a>
      <button class="btn" type="submit">Button</button>
      <input class="btn" type="button" value="Input">
      <input class="btn" type="submit" value="Submit">
    </form>
{% highlight html linenos %}
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
{% endhighlight %}
    <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>

  </div>



  <!-- Images
  ================================================== -->
  <div class="bs-docs-section" id="images">
    <div class="page-header">
      <h1>Images</h1>
    </div>

    <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
    <div class="bs-docs-example bs-docs-example-images">
      <img data-src="holder.js/140x140" class="img-rounded">
      <img data-src="holder.js/140x140" class="img-circle">
      <img data-src="holder.js/140x140" class="img-thumbnail">
    </div>
{% highlight html linenos %}
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">
{% endhighlight %}

  </div>


  <!-- Helpers
  ================================================== -->
  <div class="bs-docs-section" id="helper-classes">
    <div class="page-header">
      <h1>Helper classes</h1>
    </div>

    <h3>Close icon</h3>
    <p>Use the generic close icon for dismissing content like modals and alerts.</p>
    <div class="bs-docs-example">
      <p><button class="close" style="float: none;">&times;</button></p>
    </div>
{% highlight html linenos %}
<button class="close" style="float: none;">&times;</button>
{% endhighlight %}

    <h3>.pull-left</h3>
    <p>Float an element left</p>
{% highlight html linenos %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css linenos %}
.pull-left {
  float: left;
}
{% endhighlight %}

    <h3>.pull-right</h3>
    <p>Float an element right</p>
{% highlight html linenos %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css linenos %}
.pull-right {
  float: right;
}
{% endhighlight %}

    <h3>.clearfix</h3>
    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
{% highlight html linenos %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css linenos %}
// Mixin
.clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.element {
  .clearfix();
}
{% endhighlight %}
  </div>


  <!-- Responsive utilities
  ================================================== -->
  <div class="bs-docs-section" id="responsive-utilities">
    <div class="page-header">
      <h1>Responsive utilities</h1>
    </div>
    <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>

    <h3>Responsive classes</h3>
    <table class="table table-bordered table-striped responsive-utilities hidden-phone">
      <thead>
        <tr>
          <th>Class</th>
          <th>Phones <small>767px and below</small></th>
          <th>Tablets <small>979px to 768px</small></th>
          <th>Desktops <small>Default</small></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><code>.visible-phone</code></th>
          <td class="is-visible">Visible</td>
          <td class="is-hidden">Hidden</td>
          <td class="is-hidden">Hidden</td>
        </tr>
        <tr>
          <th><code>.visible-tablet</code></th>
          <td class="is-hidden">Hidden</td>
          <td class="is-visible">Visible</td>
          <td class="is-hidden">Hidden</td>
        </tr>
        <tr>
          <th><code>.visible-desktop</code></th>
          <td class="is-hidden">Hidden</td>
          <td class="is-hidden">Hidden</td>
          <td class="is-visible">Visible</td>
        </tr>
        <tr>
          <th><code>.hidden-phone</code></th>
          <td class="is-hidden">Hidden</td>
          <td class="is-visible">Visible</td>
          <td class="is-visible">Visible</td>
        </tr>
        <tr>
          <th><code>.hidden-tablet</code></th>
          <td class="is-visible">Visible</td>
          <td class="is-hidden">Hidden</td>
          <td class="is-visible">Visible</td>
        </tr>
        <tr>
          <th><code>.hidden-desktop</code></th>
          <td class="is-visible">Visible</td>
          <td class="is-visible">Visible</td>
          <td class="is-hidden">Hidden</td>
        </tr>
      </tbody>
    </table>

    <h3>Print classes</h3>
    <table class="table table-bordered table-striped responsive-utilities">
      <thead>
        <tr>
          <th>Class</th>
          <th>Browser</th>
          <th>Print</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><code>.visible-print</code></th>
          <td class="is-hidden">Hidden</td>
          <td class="is-visible">Visible</td>
        </tr>
        <tr>
          <th><code>.hidden-print</code></th>
          <td class="is-visible">Visible</td>
          <td class="is-hidden">Hidden</td>
        </tr>
      </tbody>
    </table>

    <h3>When to use</h3>
    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>

    <h3>Test case</h3>
    <p>Resize your browser or load on different devices to test the above classes.</p>
    <h4>Visible on...</h4>
    <p>Green checkmarks indicate that class is visible in your current viewport.</p>
    <ul class="responsive-utilities-test">
      <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
      <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
      <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
    </ul>
    <h4>Hidden on...</h4>
    <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
    <ul class="responsive-utilities-test hidden-on">
      <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
      <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
      <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
    </ul>

  </div>





  <div class="bs-docs-section-header" id="components">
    <h1>Components</h1>
    <p class="lead">Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.</p>
  </div>


  <!-- Icons
  ================================================== -->
  <div class="bs-docs-section" id="icons">
    <div class="page-header">
      <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
    </div>

    <h2>Included glyphs</h2>
    <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>

    <ul class="the-icons clearfix">
      <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
      <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
      <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
      <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
      <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
      <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
      <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
      <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
      <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
      <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
      <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
      <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
      <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
      <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
      <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
      <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
      <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
      <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
      <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
      <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
      <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
      <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
      <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
      <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
      <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
      <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
      <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
      <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>

      <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
      <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
      <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
      <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
      <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
      <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
      <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
      <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
      <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
      <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
      <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
      <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
      <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
      <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
      <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
      <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
      <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
      <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
      <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
      <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
      <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
      <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
      <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
      <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
      <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
      <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
      <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
      <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>

      <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
      <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
      <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
      <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
      <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
      <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
      <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
      <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
      <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
      <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
      <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
      <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
      <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
      <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
      <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
      <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
      <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
      <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
      <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
      <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
      <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
      <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
      <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
      <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
      <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
      <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
      <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
      <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>

      <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
      <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
      <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
      <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
      <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
      <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
      <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
      <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
      <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
      <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
      <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
      <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
      <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
      <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
      <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
      <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
      <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
      <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
      <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
      <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
      <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
      <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
      <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
      <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
      <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
      <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
      <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
      <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>

      <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
      <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
      <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
      <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
      <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
      <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
      <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
      <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
      <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
      <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
      <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
      <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
      <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
      <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
      <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
      <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
      <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
      <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
      <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
      <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
      <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
      <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
      <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
      <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
      <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
      <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
      <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
      <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>

      <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
      <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
      <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
      <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
      <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
      <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
      <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
      <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
      <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
      <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
      <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
      <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
      <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
      <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
      <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
      <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
      <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
      <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
      <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
      <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>

    </ul>

    <h3>Glyphicons attribution</h3>
    <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>


    <h2>How to use</h2>
    <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
{% highlight html linenos %}
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}
    <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
    <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>


    <h2>Icon examples</h2>
    <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>

    <h4>Buttons</h4>

    <h5>Button group in a button toolbar</h5>
    <div class="bs-docs-example">
      <div class="btn-toolbar">
        <div class="btn-group">
          <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
          <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
          <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
          <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
        </div>
      </div>
    </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
  </div>
</div>
{% endhighlight %}

    <h5>Dropdown in a button group</h5>
    <div class="bs-docs-example">
      <div class="btn-group">
        <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
          <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
          <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
        </ul>
      </div>
    </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-group">
  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
  </ul>
</div>
{% endhighlight %}

    <h5>Large button</h5>
    <div class="bs-docs-example">
      <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
    </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %}

    <h5>Small button</h5>
    <div class="bs-docs-example">
      <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
    </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %}


    <h4>Navigation</h4>
    <div class="bs-docs-example">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
      </ul>
    </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul>
{% endhighlight %}

    <h4>Form fields</h4>
    <form class="bs-docs-example form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputIcon">Email address</label>
        <div class="controls">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
            <input class="span2" id="inputIcon" type="text">
          </div>
        </div>
      </div>
    </form>
{% highlight html linenos %}
<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>
{% endhighlight %}

  </div>



  <!-- Dropdowns
  ================================================== -->
  <div class="bs-docs-section" id="dropdowns">
    <div class="page-header">
      <h1>Dropdown menus</h1>
    </div>
    <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>

    <h3 id="dropdowns-example">Example</h3>
    <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
    <div class="bs-docs-example">
      <div class="dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
          <li><a tabindex="-1" href="#">Action</a></li>
          <li><a tabindex="-1" href="#">Another action</a></li>
          <li><a tabindex="-1" href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>
    </div><!-- /example -->
{% highlight html linenos %}
<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
{% endhighlight %}

    <h3 id="dropdowns-alignment">Aligning the menus</h3>
    <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
{% highlight html linenos %}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>
{% endhighlight %}

    <h3 id="dropdowns-disabled">Disabled menu options</h3>
    <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
    <div class="bs-docs-example">
      <div class="dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
          <li><a tabindex="-1" href="#">Regular link</a></li>
          <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
          <li><a tabindex="-1" href="#">Another link</a></li>
        </ul>
      </div>
    </div><!-- /example -->
{% highlight html linenos %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Regular link</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  <li><a tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}

    <h3 id="dropdowns-submenus">Sub menus on dropdowns</h3>
    <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
    <div class="bs-docs-example bs-docs-example-submenu">

      <div class="pull-left">
        <p class="text-muted">Default</p>
        <div class="dropdown clearfix">
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
            <li><a tabindex="-1" href="#">Action</a></li>
            <li><a tabindex="-1" href="#">Another action</a></li>
            <li><a tabindex="-1" href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">More options</a>
              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <div class="pull-left">
        <p class="text-muted">Dropup</p>
        <div class="dropup">
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
            <li><a tabindex="-1" href="#">Action</a></li>
            <li><a tabindex="-1" href="#">Another action</a></li>
            <li><a tabindex="-1" href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">More options</a>
              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <div class="pull-left">
        <p class="text-muted">Left submenu</p>
        <div class="dropdown">
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
            <li><a tabindex="-1" href="#">Action</a></li>
            <li><a tabindex="-1" href="#">Another action</a></li>
            <li><a tabindex="-1" href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu pull-left">
              <a tabindex="-1" href="#">More options</a>
              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

    </div>
{% highlight html linenos %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  ...
  <li class="dropdown-submenu pull-left">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
    </ul>
  </li>
  ...
</ul>
{% endhighlight %}

  </div>



  <!-- Button Groups
  ================================================== -->
  <div class="bs-docs-section" id="btn-groups">
    <div class="page-header">
      <h1>Button groups</h1>
    </div>
    <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>

    <h3 id="btn-groups-single">Basic button group</h3>
    <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
    <div class="bs-docs-example">
      <div class="btn-group" style="margin: 9px 0 5px;">
        <button type="button" class="btn">Left</button>
        <button type="button" class="btn">Middle</button>
        <button type="button" class="btn">Right</button>
      </div>
    </div>
{% highlight html linenos %}
<div class="btn-group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>
{% endhighlight %}

    <h3 id="btn-groups-toolbar">Multiple button groups</h3>
    <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
    <div class="bs-docs-example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
          <button type="button" class="btn">1</button>
          <button type="button" class="btn">2</button>
          <button type="button" class="btn">3</button>
          <button type="button" class="btn">4</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn">5</button>
          <button type="button" class="btn">6</button>
          <button type="button" class="btn">7</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn">8</button>
        </div>
      </div>
    </div>
{% highlight html linenos %}
<div class="btn-toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
{% endhighlight %}

    <h3 id="btn-groups-vertical">Vertical button groups</h3>
    <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
    <div class="bs-docs-example">
      <div class="btn-group btn-group-vertical">
        <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
        <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
        <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
        <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
      </div>
    </div>
{% highlight html linenos %}
<div class="btn-group btn-group-vertical">
  ...
</div>
{% endhighlight %}

    <h3 id="btn-groups-justified">Justified button groups</h3>
    <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
    <div class="bs-docs-example">
      <div class="btn-group btn-group-justified">
        <a href="#" class="btn">Left</a>
        <a href="#" class="btn">Right</a>
        <a href="#" class="btn">Middle</a>
      </div>
    </div>
{% highlight html linenos %}
<div class="btn-group btn-group-justified">
  ...
</div>
{% endhighlight %}

  </div>



  <!-- Split button dropdowns
  ================================================== -->
  <div class="bs-docs-section" id="btn-dropdowns">
    <div class="page-header">
      <h1>Button dropdown menus</h1>
    </div>
    <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>

    <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
    <p>Turn a button into dropdown toggle with some basic markup changes.</p>
    <div class="bs-docs-example">
      <div class="btn-toolbar" style="margin-bottom: 10px;">
        <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
    </div>
{% highlight html linenos %}
<!-- Single button -->
<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
{% endhighlight %}

    <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
    <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
    <div class="bs-docs-example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
          <button class="btn">Action</button>
          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-primary">Action</button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-danger">Danger</button>
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-warning">Warning</button>
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-success">Success</button>
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
    </div>
{% highlight html linenos %}
<!-- Split button -->
<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
{% endhighlight %}

    <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
    <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
    <div class="bs-docs-example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
          <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
            Large button <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
            Small button <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
            Mini button <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
    </div><!-- /example -->
{% highlight html linenos %}
<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">