css.html

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

    <h2 id="forms-example">Basic example</h2>
    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default.</p>
    <form class="bs-example">
      <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input type="text" placeholder="Type something…">
        <p class="help-block">Example block-level help text here.</p>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </fieldset>
    </form><!-- /example -->
{% highlight html %}
<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <p class="help-block">Example block-level help text here.</p>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </fieldset>
</form>
{% endhighlight %}


    <h2>Optional layouts</h2>
    <p>Included with Bootstrap are optional form layouts for common use cases.</p>

    <h3 id="forms-inline">Inline form</h3>
    <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
    <div class="bs-callout">
      <h4>Requires custom widths</h4>
      <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
    </div>
    <form class="bs-example form-inline">
      <input type="text" placeholder="Email">
      <input type="password" placeholder="Password">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form><!-- /example -->
{% highlight html %}
<form class="form-inline">
  <input type="text" placeholder="Email">
  <input type="password" placeholder="Password">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
{% endhighlight %}

    <h3 id="forms-horizontal">Horizontal form</h3>
    <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
    <form class="bs-example form-horizontal">
      <div class="row">
        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="row">
        <label for="" class="col-lg-2 control-label">Password</label>
        <div class="col-lg-10">
          <input type="password" id="inputPassword" placeholder="Password">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
        <div class="col-lg-10 col-offset-2">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>
{% highlight html %}
<form class="form-horizontal">
  <div class="row">
    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="row">
    <label for="" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" id="inputPassword" placeholder="Password">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
    <div class="col-lg-10 col-offset-2">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
{% endhighlight %}


    <h2 id="forms-controls">Supported form controls</h2>
    <p>Examples of standard form controls supported in an example form layout.</p>

    <h3>Inputs</h3>
    <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
    <div class="bs-callout">
      <h4>Type declaration required</h4>
      <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
    </div>
    <form class="bs-example">
      <input type="text" placeholder="Text input">
    </form>
{% highlight html %}
<input type="text" placeholder="Text input">
{% endhighlight %}

    <h3>Textarea</h3>
    <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
    <form class="bs-example">
      <textarea rows="3"></textarea>
    </form>
{% highlight html %}
<textarea rows="3"></textarea>
{% endhighlight %}

    <h3>Checkboxes and radios</h3>
    <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
    <h4>Default (stacked)</h4>
    <form class="bs-example">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <br>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
    </form>
{% highlight html %}
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
{% endhighlight %}

    <h4>Inline checkboxes</h4>
    <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
    <form class="bs-example">
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
      </label>
    </form>
{% highlight html %}
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
{% endhighlight %}

    <h3>Selects</h3>
    <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
    <form class="bs-example">
      <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <br>
      <select multiple="multiple">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </form>
{% highlight html %}
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
{% endhighlight %}



    <h2 id="forms-control-states">Form control states</h2>
    <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>

    <h3 id="forms-input-focus">Input focus</h3>
    <p>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>.</p>
    <form class="bs-example">
      <input class="focused" id="focusedInput" type="text" value="This is focused...">
    </form>
{% highlight html %}
<input id="focusedInput" type="text" value="This is focused...">
{% endhighlight %}

    <h3 id="forms-invalid-inputs">Invalid inputs</h3>
    <p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>

    <div class="bs-callout">
      <h4>Cross-browser compatibility</h4>
      <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
    </div>

    <form class="bs-example">
      <input type="email" placeholder="test@example.com" required>
    </form>
{% highlight html %}
<input type="email" placeholder="test@example.com" required>
{% endhighlight %}

    <h3 id="forms-disabled-inputs">Disabled inputs</h3>
    <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
    <form class="bs-example">
      <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
    </form>
{% highlight html %}
<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %}

    <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
    <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>

    <div class="bs-callout">
      <h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
      <p>This class will only change the appearance of <code>&lt;a class="btn btn-default"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
    </div>

    <div class="bs-callout">
      <h4>Cross-browser compatibility</h4>
      <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
    </div>

    <form class="bs-example form-inline">
      <fieldset disabled>
        <input type="text" placeholder="Disabled input">
        <select>
          <option>Disabled select</option>
        </select>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Can't check this
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>
{% highlight html %}
<form class="form-inline">
  <fieldset disabled>
    <div>
      <input type="text" placeholder="Disabled input">
    </div>
    <div>
      <select>
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
{% endhighlight %}

    <h3 id="forms-validation">Validation states</h3>
    <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
    <ul>
      <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
      <li>Add .input-with-feedback to the field(s) in question</li>
    </ul>
    <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>

    <form class="bs-example form-horizontal">
      <div class="control-group has-warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
        <div class="controls">
          <input type="text" class="input-with-feedback" id="inputWarning">
        </div>
      </div>
      <div class="control-group has-error">
        <label class="control-label" for="inputError">Input with error</label>
        <div class="controls">
          <input type="text" class="input-with-feedback" id="inputError">
        </div>
      </div>
      <div class="control-group has-success">
        <label class="control-label" for="inputSuccess">Input with success</label>
        <div class="controls">
          <input type="text" class="input-with-feedback" id="inputSuccess">
        </div>
      </div>
    </form>
{% highlight html %}
<div class="control-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputWarning">
  </div>
</div>
<div class="control-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputError">
  </div>
</div>
<div class="control-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputSuccess">
  </div>
</div>
{% endhighlight %}



    <h2 id="forms-extending">Extending form controls</h2>
    <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>

    <h3 id="forms-input-groups">Input groups</h3>
    <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>

    <div class="bs-callout">
      <h4>Cross-browser compatibility</h4>
      <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
    </div>

    <form class="bs-example">
      <div class="input-group col-lg-9">
        <span class="input-group-addon">@</span>
        <input type="text" placeholder="Username">
      </div>
      <br>
      <div class="input-group col-lg-6">
        <input type="text">
        <span class="input-group-addon">.00</span>
      </div>
      <br>
      <div class="input-group col-lg-3">
        <span class="input-group-addon">$</span>
        <input type="text">
        <span class="input-group-addon">.00</span>
      </div>
    </form>
{% highlight html %}
<div class="input-group col-lg-9">
  <span class="input-group-addon">@</span>
  <input type="text" placeholder="Username">
</div>

<div class="input-group col-lg-6">
  <input type="text">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group col-lg-3">
  <span class="input-group-addon">$</span>
  <input type="text">
  <span class="input-group-addon">.00</span>
</div>
{% endhighlight %}

    <h4>Optional sizes</h4>
    <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
    <form class="bs-example">
      <div class="input-group col-lg-9">
        <span class="input-group-addon input-large">@</span>
        <input type="text" class="input-large" placeholder="Username">
      </div>
      <br>
      <div class="input-group col-lg-9">
        <span class="input-group-addon">@</span>
        <input type="text" placeholder="Username">
      </div>
      <br>
      <div class="input-group col-lg-9">
        <span class="input-group-addon input-small">@</span>
        <input type="text" class="input-small" placeholder="Username">
      </div>
    </form>
{% highlight html %}
<div class="input-group col-lg-9">
  <span class="input-group-addon input-large">@</span>
  <input type="text" class="input-large" placeholder="Username">
</div>

<div class="input-group col-lg-9">
  <span class="input-group-addon">@</span>
  <input type="text" placeholder="Username">
</div>

<div class="input-group col-lg-9">
  <span class="input-group-addon input-small">@</span>
  <input type="text" class="input-small" placeholder="Username">
</div>
{% endhighlight %}

    <h4>Buttons instead of text</h4>
    <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
    <form class="bs-example">
      <div class="input-group col-lg-7">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text">
      </div>
      <br>
      <div class="input-group col-lg-7">
        <input type="text">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
      </div>
    </form>
{% highlight html %}
<div class="input-group col-lg-7">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text">
</div>

<div class="input-group col-lg-7">
  <input type="text">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>
{% endhighlight %}

    <h4>Button dropdowns</h4>
    <p></p>
    <form class="bs-example">
      <div class="input-group col-lg-7">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default 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 -->
        <input type="text">
      </div><!-- /input-group -->
      <br>
      <div class="input-group col-lg-7">
        <input type="text">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default 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><!-- /input-group -->
    </form>
{% highlight html %}
<div class="input-group col-lg-7">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default 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 -->
  <input type="text">
</div><!-- /input-group -->

<div class="input-group col-lg-7">
  <input type="text">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default 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><!-- /input-group -->
{% endhighlight %}

    <h4>Segmented dropdown groups</h4>
    <form class="bs-example">
      <div class="input-group col-lg-7">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" tabindex="-1">Action</button>
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
            <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>
        <input type="text">
      </div>

      <br>

      <div class="input-group col-lg-7">
        <input type="text">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" tabindex="-1">Action</button>
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
            <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>
      </div>
    </form>
{% highlight html %}
<div class="input-group col-lg-7">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text">
</div>

<div class="input-group col-lg-7">
  <input type="text">
  <div class="input-group-btn btn-group">
    <!-- Button and dropdown menu -->
  </div>
</div>
{% endhighlight %}

    <h3 id="forms-control-sizes">Control sizing</h3>
    <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>

    <h4>Relative sizing</h4>
    <p>Create larger or smaller form controls that match button sizes.</p>
    <form class="bs-example bs-example-control-sizing">
      <div class="controls docs-input-sizes">
        <input class="input-large" type="text" placeholder=".input-large">
        <input type="text" placeholder="Default input">
        <input class="input-small" type="text" placeholder=".input-small">
      </div>
    </form>
{% highlight html %}
<input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small">
{% endhighlight %}

    <h4>Column sizing</h4>
    <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
    <form class="bs-example" style="padding-bottom: 15px;">
      <div class="row">
        <div class="col-lg-2">
          <input type="text" placeholder="col-large-2">
        </div>
        <div class="col-lg-3">
          <input type="text" placeholder="col-large-3">
        </div>
        <div class="col-lg-4">
          <input type="text" placeholder="col-large-4">
        </div>
      </div>
    </form>
{% highlight html %}
<div class="row">
  <div class="col-lg-2">
    <input type="text" placeholder="col-large-2">
  </div>
  <div class="col-lg-3">
    <input type="text" placeholder="col-large-3">
  </div>
  <div class="col-lg-4">
    <input type="text" placeholder="col-large-4">
  </div>
</div>
{% endhighlight %}

    <h3 id="forms-help-text">Help text</h3>
    <p>Block level help text for form controls.</p>
    <form class="bs-example">
      <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>
{% highlight html %}
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}

  </div>



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

    <h2 id="buttons-options">Button options</h2>
    <p>Use any of the available button classes to quickly create a styled button.</p>
    <div class="bs-example">
      <button type="button" class="btn btn-default">Default</button>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-link">Link</button>
    </div>
{% highlight html %}
<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}

    <h2 id="buttons-sizes">Button sizes</h2>
    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
    <div class="bs-example">
      <p>
        <button type="button" class="btn btn-primary btn-large">Large button</button>
        <button type="button" class="btn btn-default btn-large">Large button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">Default button</button>
        <button type="button" class="btn btn-default">Default button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-small">Small button</button>
        <button type="button" class="btn btn-default btn-small">Small button</button>
      </p>
    </div>
{% highlight html %}
<p>
  <button type="button" class="btn btn-primary btn-large">Large button</button>
  <button type="button" class="btn btn-default btn-large">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-small">Small button</button>
  <button type="button" class="btn btn-default btn-small">Small button</button>
</p>
{% endhighlight %}

    <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
    <div class="bs-example">
      <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
        <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
        <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
      </div>
    </div>
{% highlight html %}
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
{% endhighlight %}


    <h2 id="buttons-disabled">Disabled state</h2>
    <p>Make buttons look unclickable by fading them back 50%.</p>

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

    <div class="bs-callout">
      <h4>Cross-browser compatibility</h4>
      <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
    </div>

    <h3>Anchor element</h3>
    <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
    <p class="bs-example">
      <a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
      <a href="#" class="btn btn-default btn-large disabled">Link</a>
    </p>
{% highlight html %}
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default 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.
    </p>
    <div class="bs-callout">
      <h4>Link functionality not impacted</h4>
      <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
    </div>


    <h2 id="buttons-tags">Using multiple tags</h2>
    <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
    <form class="bs-example">
      <a class="btn btn-default" href="#">Link</a>
      <button class="btn btn-default" type="submit">Button</button>
      <input class="btn btn-default" type="button" value="Input">
      <input class="btn btn-default" type="submit" value="Submit">
    </form>
{% highlight html %}
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %}

    <div class="bs-callout">
      <h4>Cross-browser rendering</h4>
      <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
    </div>

  </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.</p>
    <div class="bs-callout">
      <h4>Cross-browser compatibility</h4>
      <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
    </div>
    <div class="bs-example bs-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 %}
<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-example">
      <p><button type="button" class="close">&times;</button></p>
    </div>
{% highlight html %}
<button type="button" class="close">&times;</button>
{% endhighlight %}

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

    <h3>.pull-right</h3>
    <p>Float an element right</p>
{% highlight html %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
.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 %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css %}
// 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>
    <div class="hidden-sm">
      <table class="table table-bordered table-striped responsive-utilities">
        <thead>
          <tr>
            <th>Class</th>
            <th>Small devices <small>Up to 768px</small></th>
            <th>Medium devices <small>768px to 979px</small></th>
            <th>Large devices <small>980px and up</small></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th><code>.visible-sm</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-md</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-lg</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-sm</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-md</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-lg</code></th>
            <td class="is-visible">Visible</td>
            <td class="is-visible">Visible</td>
            <td class="is-hidden">Hidden</td>
          </tr>
        </tbody>
      </table>
    </div>

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