base-css.mustache

<div class="input-append">
  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
</div>
</pre>

        <h4>{{_i}}Search form{{/i}}</h4>
        <form class="bs-docs-example form-search">
          <div class="input-append">
            <input type="text" class="span2 search-query">
            <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
          </div>
          <div class="input-prepend">
            <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
            <input type="text" class="span2 search-query">
          </div>
        </form>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
  &lt;input type="text" class="span2 search-query"&gt;
  &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>

        <h3>{{_i}}Control sizing{{/i}}</h3>
        <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>

        <h4>{{_i}}Relative sizing{{/i}}</h4>
        <form class="bs-docs-example" style="padding-bottom: 15px;">
          <div class="controls docs-input-sizes">
            <input class="input-mini" type="text" placeholder=".input-mini">
            <input class="input-small" type="text" placeholder=".input-small">
            <input class="input-medium" type="text" placeholder=".input-medium">
            <input class="input-large" type="text" placeholder=".input-large">
            <input class="input-xlarge" type="text" placeholder=".input-xlarge">
            <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
          </div>
        </form>
<pre class="prettyprint linenums">
&lt;input class="input-mini" type="text"&gt;
&lt;input class="input-small" type="text"&gt;
&lt;input class="input-medium" type="text"&gt;
&lt;input class="input-large" type="text"&gt;
&lt;input class="input-xlarge" type="text"&gt;
&lt;input class="input-xxlarge" type="text"&gt;
</pre>
        <p>
          <span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
        </p>

        <h4>{{_i}}Grid sizing{{/i}}</h4>
        <p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
        <form class="bs-docs-example" style="padding-bottom: 15px;">
          <div class="controls docs-input-sizes">
            <input class="span1" type="text" placeholder=".span1">
            <input class="span2" type="text" placeholder=".span2">
            <input class="span3" type="text" placeholder=".span3">
            <select class="span1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <select class="span2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <select class="span3">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
<pre class="prettyprint linenums">
&lt;input class="span1" type="text"&gt;
&lt;input class="span2" type="text"&gt;
&lt;input class="span3" type="text"&gt;
</pre>

        <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
        <form class="bs-docs-example" style="padding-bottom: 15px;">
          <div class="controls">
            <input class="span5" type="text" placeholder=".span5">
          </div>
          <div class="controls controls-row">
            <input class="span4" type="text" placeholder=".span4">
            <input class="span1" type="text" placeholder=".span1">
          </div>
          <div class="controls controls-row">
            <input class="span3" type="text" placeholder=".span3">
            <input class="span2" type="text" placeholder=".span2">
          </div>
          <div class="controls controls-row">
            <input class="span2" type="text" placeholder=".span2">
            <input class="span3" type="text" placeholder=".span3">
          </div>
          <div class="controls controls-row">
            <input class="span1" type="text" placeholder=".span1">
            <input class="span4" type="text" placeholder=".span4">
          </div>
        </form>
<pre class="prettyprint linenums">
&lt;div class="controls controls-row"&gt;
  &lt;input class="span4" type="text" placeholder=".span4"&gt;
  &lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
</pre>

        <h3>{{_i}}Uneditable inputs{{/i}}</h3>
        <p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p>
        <form class="bs-docs-example">
          <span class="input-xlarge uneditable-input">Some value here</span>
        </form>
<pre class="prettyprint linenums">
  &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
</pre>

        <h3>{{_i}}Form actions{{/i}}</h3>
        <p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p>
        <form class="bs-docs-example">
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
            <button type="button" class="btn">{{_i}}Cancel{{/i}}</button>
          </div>
        </form>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
  &lt;button type="button" class="btn"&gt;{{_i}}Cancel{{/i}}&lt;/button&gt;
&lt;/div&gt;
</pre>

        <h3>{{_i}}Help text{{/i}}</h3>
        <p>{{_i}}Inline and block level support for help text that appears around form controls.{{/i}}</p>
        <h4>{{_i}}Inline help{{/i}}</h4>
        <form class="bs-docs-example form-inline">
          <input type="text"> <span class="help-inline">Inline help text</span>
        </form>
<pre class="prettyprint linenums">
&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;
</pre>

        <h4>{{_i}}Block help{{/i}}</h4>
        <form class="bs-docs-example form-inline">
          <input type="text">
          <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
        </form>
<pre class="prettyprint linenums">
&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
</pre>


        <hr class="bs-docs-separator"></hr>


        <h2>{{_i}}Form control states{{/i}}</h2>
        <p>{{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}</p>

        <h3>{{_i}}Input focus{{/i}}</h3>
        <p>{{_i}}We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
        <form class="bs-docs-example form-inline">
          <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
        </form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
</pre>

        <h3>{{_i}}Disabled inputs{{/i}}</h3>
        <p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
        <form class="bs-docs-example form-inline">
          <input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
        </form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled&gt;
</pre>

        <h3>{{_i}}Validation states{{/i}}</h3>
        <p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>

        <form class="bs-docs-example form-horizontal">
          <div class="control-group warning">
            <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
            </div>
          </div>
          <div class="control-group error">
            <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
            </div>
          </div>
        </form>
<pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt;
  &lt;label class="control-label" for="inputWarning"&gt;{{_i}}Input with warning{{/i}}&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputWarning"&gt;
    &lt;span class="help-inline"&gt;{{_i}}Something may have gone wrong{{/i}}&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group error"&gt;
  &lt;label class="control-label" for="inputError"&gt;{{_i}}Input with error{{/i}}&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputError"&gt;
    &lt;span class="help-inline"&gt;{{_i}}Please correct the error{{/i}}&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group success"&gt;
  &lt;label class="control-label" for="inputSuccess"&gt;{{_i}}Input with success{{/i}}&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputSuccess"&gt;
    &lt;span class="help-inline"&gt;{{_i}}Woohoo!{{/i}}&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

      </section>



      <!-- Buttons
      ================================================== -->
      <section id="buttons">
        <div class="page-header">
          <h1>{{_i}}Buttons{{/i}}</h1>
        </div>

        <h2>Default buttons</h2>
        <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.{{/i}}</p>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>{{_i}}Button{{/i}}</th>
              <th>{{_i}}class=""{{/i}}</th>
              <th>{{_i}}Description{{/i}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><button type="button" class="btn">{{_i}}Default{{/i}}</button></td>
              <td><code>btn</code></td>
              <td>{{_i}}Standard gray button with gradient{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-primary">{{_i}}Primary{{/i}}</button></td>
              <td><code>btn btn-primary</code></td>
              <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-info">{{_i}}Info{{/i}}</button></td>
              <td><code>btn btn-info</code></td>
              <td>{{_i}}Used as an alternative to the default styles{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-success">{{_i}}Success{{/i}}</button></td>
              <td><code>btn btn-success</code></td>
              <td>{{_i}}Indicates a successful or positive action{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-warning">{{_i}}Warning{{/i}}</button></td>
              <td><code>btn btn-warning</code></td>
              <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-danger">{{_i}}Danger{{/i}}</button></td>
              <td><code>btn btn-danger</code></td>
              <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-inverse">{{_i}}Inverse{{/i}}</button></td>
              <td><code>btn btn-inverse</code></td>
              <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
            </tr>
          </tbody>
        </table>

        <h4>{{_i}}Cross browser compatibility{{/i}}</h4>
        <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>


        <hr class="bs-docs-separator">


        <h2>{{_i}}Button sizes{{/i}}</h2>
        <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
        <p>
          <button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
          <button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
        </p>
        <p>
          <button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
          <button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
        </p>
        <p>
          <button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
          <button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button>
        </p>


        <hr class="bs-docs-separator">


        <h2>{{_i}}Disabled state{{/i}}</h2>
        <p>{{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}</p>

        <h3>Anchor element</h3>
        <p>{{_i}}Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.{{/i}}</p>
        <p class="bs-docs-example">
          <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
          <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
        </p>
<pre class="prettyprint linenums">
&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;{{_i}}Primary link{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-large disabled"&gt;{{_i}}Link{{/i}}&lt;/a&gt;
</pre>
        <p>
          <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
          {{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
        </p>

        <h3>Button element</h3>
        <p>{{_i}}Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.{{/i}}</p>
        <p class="bs-docs-example">
          <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
          <button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
        </p>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;{{_i}}Primary button{{/i}}&lt;/button&gt;
&lt;button type="button" class="btn btn-large" disabled&gt;{{_i}}Button{{/i}}&lt;/button&gt;
</pre>


        <hr class="bs-docs-separator">


        <h2>{{_i}}One class, multiple tags{{/i}}</h2>
        <p>{{_i}}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.{{/i}}</p>
        <form class="bs-docs-example">
          <a class="btn" href="">{{_i}}Link{{/i}}</a>
          <button class="btn" type="submit">{{_i}}Button{{/i}}</button>
          <input class="btn" type="button" value="{{_i}}Input{{/i}}">
          <input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
        </form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
  {{_i}}Button{{/i}}
&lt;/button&gt;
&lt;input class="btn" type="button"
         value="{{_i}}Input{{/i}}"&gt;
&lt;input class="btn" type="submit"
         value="{{_i}}Submit{{/i}}"&gt;
</pre>
        <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>

      </section>



      <!-- Icons
      ================================================== -->
      <section id="icons">
        <div class="page-header">
          <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
        </div>

        <h2>{{_i}}Icon glyphs{{/i}}</h2>
        <p>{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.{{/i}}</p>
        <ul class="the-icons clearfix">
          <li><i class="icon-glass"></i> icon-glass</li>
          <li><i class="icon-music"></i> icon-music</li>
          <li><i class="icon-search"></i> icon-search</li>
          <li><i class="icon-envelope"></i> icon-envelope</li>
          <li><i class="icon-heart"></i> icon-heart</li>
          <li><i class="icon-star"></i> icon-star</li>
          <li><i class="icon-star-empty"></i> icon-star-empty</li>
          <li><i class="icon-user"></i> icon-user</li>
          <li><i class="icon-film"></i> icon-film</li>
          <li><i class="icon-th-large"></i> icon-th-large</li>
          <li><i class="icon-th"></i> icon-th</li>
          <li><i class="icon-th-list"></i> icon-th-list</li>
          <li><i class="icon-ok"></i> icon-ok</li>
          <li><i class="icon-remove"></i> icon-remove</li>
          <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
          <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
          <li><i class="icon-off"></i> icon-off</li>
          <li><i class="icon-signal"></i> icon-signal</li>
          <li><i class="icon-cog"></i> icon-cog</li>
          <li><i class="icon-trash"></i> icon-trash</li>
          <li><i class="icon-home"></i> icon-home</li>
          <li><i class="icon-file"></i> icon-file</li>
          <li><i class="icon-time"></i> icon-time</li>
          <li><i class="icon-road"></i> icon-road</li>
          <li><i class="icon-download-alt"></i> icon-download-alt</li>
          <li><i class="icon-download"></i> icon-download</li>
          <li><i class="icon-upload"></i> icon-upload</li>
          <li><i class="icon-inbox"></i> icon-inbox</li>

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

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

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

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

        <h3>Glyphicons attribution</h3>
        <p>{{_i}}<a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not 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.{{/i}}</p>


        <hr class="bs-docs-separator">


        <h2>{{_i}}How to use{{/i}}</h2>
        <p>{{_i}}All icons require an <code>&lt;i&gt;</code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt;
</pre>
        <p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre>
        <p>
          <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
          {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}}
        </p>


        <hr class="bs-docs-separator">


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

        <h4>{{_i}}Buttons{{/i}}</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin-bottom: 9px">
            <div class="btn-group">
              <a class="btn" href="#"><i class="icon-align-left"></i></a>
              <a class="btn" href="#"><i class="icon-align-center"></i></a>
              <a class="btn" href="#"><i class="icon-align-right"></i></a>
              <a class="btn" href="#"><i class="icon-align-justify"></i></a>
            </div>
            <div class="btn-group">
              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</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="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
                <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
                <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
              </ul>
            </div>
          </div>
        </div>{{! /bs-docs-example }}

        <h4>{{_i}}Navigation{{/i}}</h4>
        <div class="bs-docs-example">
          <div class="well" style="padding: 8px 0; margin-bottom: 0;">
            <ul class="nav nav-list">
              <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
              <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
              <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
              <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
            </ul>
          </div>{{! /well }}
        </div>{{! /bs-docs-example }}

        <h4>{{_i}}Form fields{{/i}}</h4>
        <form class="bs-docs-example form-horizontal">
          <div class="control-group">
            <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
            <div class="controls">
              <div class="input-prepend">
                <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
              </div>
            </div>
          </div>
        </form>

      </section>



    </div>{{! /span9 }}
  </div>{{! row}}

</div>{{! /container }}