// and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
compatibility: 'ie8',
keepSpecialComments: '*',
- advanced: false
- },
- minifyCore: {
- src: 'dist/css/<%= pkg.name %>.css',
- dest: 'dist/css/<%= pkg.name %>.min.css'
+ sourceMap: true,
+ noAdvanced: true
},
- minifyTheme: {
- src: 'dist/css/<%= pkg.name %>-theme.css',
- dest: 'dist/css/<%= pkg.name %>-theme.min.css'
+ core: {
+ files: [
+ {
+ expand: true,
+ cwd: 'dist/css',
+ src: ['*.css', '!*.min.css'],
+ dest: 'dist/css',
+ ext: '.min.css'
+ }
+ ]
},
docs: {
- src: [
- 'docs/assets/css/src/pygments-manni.css',
- 'docs/assets/css/src/docs.css'
- ],
+ src: 'docs/assets/css/docs.min.css',
dest: 'docs/assets/css/docs.min.css'
}
},
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
- â\94\82 â\94\94── bootstrap.min.css
+ â\94\82 â\94\9c── bootstrap.min.css
-│ ├── bootstrap.min.css.map
-│ ├── bootstrap-theme.css
-│ ├── bootstrap-theme.css.map
-│ ├── bootstrap-theme.min.css
-│ └── bootstrap-theme.min.css.map
-├── js/
-│ ├── bootstrap.js
-│ └── bootstrap.min.js
-└── fonts/
- ├── glyphicons-halflings-regular.eot
- ├── glyphicons-halflings-regular.svg
- ├── glyphicons-halflings-regular.ttf
- ├── glyphicons-halflings-regular.woff
- └── glyphicons-halflings-regular.woff2
++│ └── bootstrap.min.css.map
+└── js/
+ ├── bootstrap.js
+ └── bootstrap.min.js
```
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
-
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
## Bugs and feature requests
--<!-- Footer
--================================================== -->
-<footer class="bs-docs-footer" role="contentinfo">
- <div class="container">
-
- <ul class="bs-docs-footer-links">
+<footer class="bd-footer" role="contentinfo">
+ <div class="bd-container">
- {% include social-buttons.html %}
-
- <p>
- Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.
- Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.
- Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
- </p>
-
+ <ul class="bd-footer-links text-muted">
+ <li>Currently v{{ site.current_version }}</li>
- <li>·</li>
<li><a href="{{ site.repo }}">GitHub</a></li>
- <li>·</li>
+ <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
<li><a href="../getting-started/#examples">Examples</a></li>
- <li>·</li>
- <li><a href="../2.3.2/">v2.3.2 docs</a></li>
- <li>·</li>
<li><a href="../about/">About</a></li>
- <li>·</li>
- <li><a href="{{ site.expo }}">Expo</a></li>
- <li>·</li>
- <li><a href="{{ site.blog }}">Blog</a></li>
- <li>·</li>
- <li><a href="{{ site.repo }}/issues">Issues</a></li>
- <li>·</li>
- <li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
-
+ <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
-
+ <p>Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
-
</div>
</footer>
--<!-- Bootstrap core JavaScript
--================================================== -->
--<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script>
{% if site.github %}
- <script src="../dist/js/bootstrap.min.js"></script>
+ <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
{% else %}
- <script src="../dist/js/bootstrap.js"></script>
+ <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
{% endif %}
{% if site.github %}
{% endfor %}
{% endif %}
-{% if page.slug == "customize" %}
- <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script>
- {% if site.github %}
- <script src="../assets/js/customize.min.js"></script>
- {% else %}
- {% for file in site.data.configBridge.paths.customizerJs %}
- <script src="{{ file }}"></script>
- {% endfor %}
- {% endif %}
-{% endif %}
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
+<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
+
+<script>
+SimpleJekyllSearch.init({
+ searchInput: document.getElementById('search-input'),
+ resultsContainer: document.getElementById('search-results'),
+ searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
+ noResultsText: '<li class="no-results">Sorry, there are no results for that search.</li>',
+ dataSource: '/search.json'
+})
+
+Holder.addTheme('gray', {
+ background: '#777',
+ foreground: 'rgba(255,255,255,.75)',
+ font: 'Helvetica',
+ fontweight: 'normal'
+})
+</script>
- {% comment %}
- Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
- JS interface site: https://dev.twitter.com/docs/tfw-javascript
-
- * "js.async=1;" added to add async attribute to the generated script tag.
- {% endcomment %}
- <script>
- window.twttr = (function (d,s,id) {
- var t, js, fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
- js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
- return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
- }(document, "script", "twitter-wjs"));
- </script>
-
--<!-- Analytics
--================================================== -->
<script>
var _gauges = _gauges || [];
(function() {
--- /dev/null
- ## Control sizing
-
- Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
-
- {% example html %}
- <input class="form-control form-control-lg" type="text" placeholder=".input-lg">
- <input class="form-control" type="text" placeholder="Default input">
- <input class="form-control form-control-sm" type="text" placeholder=".input-sm">
- {% endexample %}
-
- {% example html %}
- <select class="form-control form-control-lg"></select>
- <select class="form-control"></select>
- <select class="form-control form-control-sm"></select>
- {% endexample %}
-
- ## Column sizing
-
- Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
-
- {% example html %}
- <div class="row">
- <div class="col-xs-2">
- <input type="text" class="form-control" placeholder=".col-xs-2">
- </div>
- <div class="col-xs-3">
- <input type="text" class="form-control" placeholder=".col-xs-3">
- </div>
- <div class="col-xs-4">
- <input type="text" class="form-control" placeholder=".col-xs-4">
- </div>
- </div>
- {% endexample %}
-
- ## Help text
-
- Block level help text for form controls.
-
- {% example html %}
- <p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
- {% endexample %}
-
-
-
+---
+layout: page
+title: Forms
+---
+
+Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Form controls
+
+Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
+
+Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a `type` attribute** for proper rendering.
+
+{% example html %}
+<form>
+ <fieldset class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleSelect1">Example select</label>
+ <select class="form-control" id="exampleSelect1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleSelect2">Example multiple select</label>
+ <select multiple class="form-control" id="exampleSelect2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleTextarea">Example textarea</label>
+ <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" class="form-control-file" id="exampleInputFile">
+ <p class="help-block">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</p>
+ </fieldset>
+ <div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that—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>
+ <div class="radio disabled">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn btn-secondary">Submit</button>
+</form>
+{% endexample %}
+
+Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
+
+<table>
+ <thead>
+ <tr>
+ <th>Classes</th>
+ <th>Used for</th>
+ <th>Supported variations</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ {% markdown %}`.form-group`{% endmarkdown %}
+ </td>
+ <td class="text-nowrap">
+ Any group of form controls
+ </td>
+ <td>
+ {% markdown %}Use with any block-level element like `<fieldset>` or `<div>`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="3">
+ {% markdown %}`.form-control`{% endmarkdown %}
+ </td>
+ <td>
+ Textual inputs
+ </td>
+ <td>
+ {% markdown %}`text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Select menus
+ </td>
+ <td>
+ {% markdown %}`multiple`, `size`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Textareas
+ </td>
+ <td>
+ <span class="text-muted">N/A</span>
+ </td>
+ </tr>
+ <tr>
+ <td class="text-nowrap">
+ {% markdown %}`.form-control-file`{% endmarkdown %}
+ </td>
+ <td>
+ File inputs
+ </td>
+ <td>
+ {% markdown %}`file`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td class="text-nowrap">
+{% markdown %}
+`.radio`<br>
+`.radio-inline`<br>
+`.checkbox`<br>
+`.checkbox-inline`
+{% endmarkdown %}
+ </td>
+ <td class="text-nowrap">
+ Checkboxes and radios
+ </td>
+ <td>
+ <span class="text-muted">N/A</span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+## Form layouts
+
+Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+
+### Form groups
+
+The `.form-group` class is the easiest way to add some structure to forms. It's only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
+
+{% example html %}
+<form>
+ <fieldset class="form-group">
+ <label for="formGroupExampleInput">Example label</label>
+ <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="formGroupExampleInput2">Another label</label>
+ <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
+ </fieldset>
+</form>
+{% endexample %}
+
+### Inline forms
+
+Use the `.inline-form` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+
+- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
+- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
+- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
+
+Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
+
+#### Visible labels
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label for="exampleInputName2">Name</label>
+ <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail2">Email</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+ </div>
+ <button type="submit" class="btn btn-primary">Send invitation</button>
+</form>
+{% endexample %}
+
+#### Hidden labels
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputEmail3">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputPassword3">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Sign in</button>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
+ <div class="input-group">
+ <div class="input-group-addon">$</div>
+ <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
+ <div class="input-group-addon">.00</div>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Transfer cash</button>
+</form>
+{% endexample %}
+
+### Using the Grid
+
+For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
+
+{% example html %}
+<form>
+ <div class="form-group row">
+ <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
+ <div class="col-sm-10">
+ <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
+ <div class="col-sm-10">
+ <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-2">Radios</label>
+ <div class="col-sm-10">
+ <div class="radio">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+ </div>
+ <div class="radio">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios2" value="option2">
+ Option two can be something else and selecting it will deselect option one
+ </label>
+ </div>
+ <div class="radio disabled">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-2">Checkbox</label>
+ <div class="col-sm-10">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-sm-offset-2 col-sm-10">
+ <button type="submit" class="btn btn-secondary">Sign in</button>
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+## Checkboxes and radios
+
+Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
+Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
+
+### Default (stacked)
+
+{% example html %}
+<div class="checkbox">
+ <label>
+ <input type="checkbox" value="">
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+<div class="checkbox disabled">
+ <label>
+ <input type="checkbox" value="" disabled>
+ Option two is disabled
+ </label>
+</div>
+
+<div class="radio">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+<div class="radio">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
+ Option two can be something else and selecting it will deselect option one
+ </label>
+</div>
+<div class="radio disabled">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+</div>
+{% endexample %}
+
+### Inline
+
+Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
+
+{% example 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>
+{% endexample %}
+
+{% example html %}
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+</label>
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+</label>
+{% endexample %}
+
+### Without labels
+
+Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
+
+{% example html %}
+<div class="checkbox">
+ <label>
+ <input type="checkbox" id="blankCheckbox" value="option1">
+ </label>
+</div>
+<div class="radio">
+ <label>
+ <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+ </label>
+</div>
+{% endexample %}
+
+## Static controls
+
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label">Email</label>
+ <div class="col-sm-10">
+ <p class="form-control-static">email@example.com</p>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+ <div class="col-sm-10">
+ <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only">Email</label>
+ <p class="form-control-static">email@example.com</p>
+ </div>
+ <div class="form-group">
+ <label for="inputPassword2" class="sr-only">Password</label>
+ <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+ </div>
+ <button type="submit" class="btn btn-primary">Confirm identity</button>
+</form>
+{% endexample %}
+
+## Focus state
+
+We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
+
+<div class="bd-example">
+ <form>
+ <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
+ </form>
+</div>
+
+## Disabled states
+
+Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
+
+{% highlight html %}
+<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+{% endhighlight %}
+
+Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
+
+{% example html %}
+<form>
+ <fieldset disabled>
+ <div class="form-group">
+ <label for="disabledTextInput">Disabled input</label>
+ <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+ </div>
+ <div class="form-group">
+ <label for="disabledSelect">Disabled select menu</label>
+ <select id="disabledSelect" class="form-control">
+ <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>
+{% endexample %}
+
+{% callout warning %}
+#### Caveat about link functionality of `<a>`
+
+By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](#buttons-disabled) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+{% endcallout %}
+
+{% callout danger %}
+#### Cross-browser compatibility
+
+While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
+{% endcallout %}
+
+## Readonly inputs
+
+Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.<
+
+{% example html %}
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+{% endexample %}
+
++## Control sizing
++
++Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
++
++{% example html %}
++<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
++<input class="form-control" type="text" placeholder="Default input">
++<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
++{% endexample %}
++
++{% example html %}
++<select class="form-control form-control-lg"></select>
++<select class="form-control"></select>
++<select class="form-control form-control-sm"></select>
++{% endexample %}
++
++## Column sizing
++
++Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
++
++{% example html %}
++<div class="row">
++ <div class="col-xs-2">
++ <input type="text" class="form-control" placeholder=".col-xs-2">
++ </div>
++ <div class="col-xs-3">
++ <input type="text" class="form-control" placeholder=".col-xs-3">
++ </div>
++ <div class="col-xs-4">
++ <input type="text" class="form-control" placeholder=".col-xs-4">
++ </div>
++</div>
++{% endexample %}
++
++## Help text
++
++Block level help text for form controls.
++
++{% example html %}
++<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
++{% endexample %}
++
+## Validation
+
+Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
+
+{% callout warning %}
+#### Conveying validation state to assistive technologies and colorblind users
+
+Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
+
+Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
+{% endcallout %}
+
+{% example html %}
+<div class="form-group has-success">
+ <label class="control-label" for="inputSuccess1">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess1">
+</div>
+<div class="form-group has-warning">
+ <label class="control-label" for="inputWarning1">Input with warning</label>
+ <input type="text" class="form-control" id="inputWarning1">
+</div>
+<div class="form-group has-error">
+ <label class="control-label" for="inputError1">Input with error</label>
+ <input type="text" class="form-control" id="inputError1">
+</div>
+<div class="has-success">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxSuccess" value="option1">
+ Checkbox with success
+ </label>
+ </div>
+</div>
+<div class="has-warning">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxWarning" value="option1">
+ Checkbox with warning
+ </label>
+ </div>
+</div>
+<div class="has-error">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxError" value="option1">
+ Checkbox with error
+ </label>
+ </div>
+</div>
+{% endexample %}
+
+You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
+
+{% callout warning %}
+#### Icons, labels, and input groups
+
+Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
+{% endcallout %}
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputSuccess2">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputSuccess2Status" class="sr-only">(success)</span>
+</div>
+<div class="form-group has-warning has-feedback">
+ <label class="control-label" for="inputWarning2">Input with warning</label>
+ <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
+ <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
+ <span id="inputWarning2Status" class="sr-only">(warning)</span>
+</div>
+<div class="form-group has-error has-feedback">
+ <label class="control-label" for="inputError2">Input with error</label>
+ <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
+ <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+ <span id="inputError2Status" class="sr-only">(error)</span>
+</div>
+<div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+</div>
+{% endexample %}
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" id="inputSuccess3">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ </div>
+ </div>
+ <br>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+ <div class="col-sm-9">
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputSuccess4">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess4">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+</div>
+{% endexample %}
+
+For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
+ <input type="text" class="form-control" id="inputSuccess5">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+</div>
+{% endexample %}
+
+## Custom forms
+
+For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
+
+### Checkboxes and radios
+
+Each checkbox and radio is wrapped in a `<label>` for three reasons:
+
+- It provides a larger hit areas for checking the control.
+- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
+- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
+
+We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
+
+With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
+
+In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](http://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
+
+#### Checkboxes
+
+{% example html %}
+<label class="c-input c-checkbox">
+ <input type="checkbox">
+ <span class="c-indicator"></span>
+ Check this custom checkbox
+</label>
+{% endexample %}
+
+Custom checkboxes can also utilize the `:indeterminate` pseudo class.
+
+<div class="bd-example bd-example-indeterminate">
+ <label class="c-input c-checkbox">
+ <input type="checkbox">
+ <span class="c-indicator"></span>
+ Check this custom checkbox
+ </label>
+</div>
+
+**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice:
+
+{% highlight js %}
+$('.your-checkbox').prop('indeterminate', true)
+{% endhighlight %}
+
+#### Radios
+
+{% example html %}
+<label class="c-input c-radio">
+ <input id="radio1" name="radio" type="radio">
+ <span class="c-indicator"></span>
+ Toggle this custom radio
+</label>
+<label class="c-input c-radio">
+ <input id="radio2" name="radio" type="radio">
+ <span class="c-indicator"></span>
+ Or toggle this other custom radio
+</label>
+{% endexample %}
+
+#### Stacked
+
+Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
+
+{% example html %}
+<div class="c-inputs-stacked">
+ <label class="c-input c-radio">
+ <input id="radioStacked1" name="radio-stacked" type="radio">
+ <span class="c-indicator"></span>
+ Toggle this custom radio
+ </label>
+ <label class="c-input c-radio">
+ <input id="radioStacked2" name="radio-stacked" type="radio">
+ <span class="c-indicator"></span>
+ Or toggle this other custom radio
+ </label>
+</div>
+{% endexample %}
+
+### Select menu
+
+Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
+
+{% example html %}
+<label class="select">
+ <select>
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+</label>
+{% endexample %}
+
+The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
+
+- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
+- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
+- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
+- The arrow is hidden in IE10+ with a simple selector.
+- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
+
+**Heads up!** This one comes with some quirks right now:
+
+- `select[multiple]` is currently currently **not supported**.
+- Clickability is limited in IE9.
+- Firefox's dropdown of `option`s looks rather ugly.
+- The custom caret is unable to receive the selected state's `color`.
+
+Any ideas on improving these are most welcome.
+
+### File browser
+
+{% example html %}
+<label class="file">
+ <input type="file" id="file">
+ <span class="file-custom"></span>
+</label>
+{% endexample %}
+
+The file input is the most gnarly of the bunch. Here's how it works:
+
+- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
+- We hide the default file `<input>` via `opacity`.
+- We use `:after` to generate a custom background and directive (*Choose file...*).
+- We use `:before` to generate and position the *Browse* button.
+- We declare a `height` on the `<input>` for proper spacing for surrounding content.
+
+In other words, it's an entirely custom element, all generated via CSS.
+
+**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
--- /dev/null
+---
+layout: page
+title: Input group
+---
+
+Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Basic example
+
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
+
+{% example html %}
+<div class="input-group">
+ <span class="input-group-addon" id="basic-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
+</div>
+<br>
+<div class="input-group">
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+ <span class="input-group-addon" id="basic-addon2">.00</span>
+</div>
+<br>
++<label for="basic-url">Your vanity URL</label>
++<div class="input-group">
++ <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
++ <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
++</div>
++<br>
+<div class="input-group">
+ <span class="input-group-addon">$</span>
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+ <span class="input-group-addon">.00</span>
+</div>
+{% endexample %}
+
+## Sizing
+
+Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+{% example html %}
+<div class="input-group input-group-lg">
+ <span class="input-group-addon" id="sizing-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
+</div>
+<br>
+<div class="input-group">
+ <span class="input-group-addon" id="sizing-addon2">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
+</div>
+<br>
+<div class="input-group input-group-sm">
+ <span class="input-group-addon" id="sizing-addon3">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
+</div>
+{% endexample %}
+
+## Checkboxes and radio addons
+
+Place any checkbox or radio option within an input group's addon instead of text.
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <input type="checkbox" aria-label="Checkbox for following text input">
+ </span>
+ <input type="text" class="form-control" aria-label="Text input with checkbox">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <input type="radio" aria-label="Radio button for following text input">
+ </span>
+ <input type="text" class="form-control" aria-label="Text input with radio button">
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Button addons
+
+Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Go!</button>
+ </span>
+ <input type="text" class="form-control" placeholder="Search for...">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Search for...">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Go!</button>
+ </span>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Buttons with dropdowns
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </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 role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Segmented buttons
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary">Action</button>
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary">Action</button>
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Accessibility
+
+Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
+
+The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label`, `aria-labelledby`, `aria-describedby`, `title` or `placeholder` attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
--- /dev/null
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
- </div>
- <div class="row">
- <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
- <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
- </div>
- <div class="row">
- <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
- </div>
- <div class="row">
- <div class="col-sm-9">
- Level 1: .col-sm-9
- <div class="row">
- <div class="col-xs-8 col-sm-6">
- Level 2: .col-xs-8 .col-sm-6
- </div>
- <div class="col-xs-4 col-sm-6">
- Level 2: .col-xs-4 .col-sm-6
- </div>
+---
+layout: page
+title: Modal
+---
+
+Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript:
+
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+ $('#myInput').focus()
+})
+{% endhighlight %}
+
+{% callout warning %}
+#### Multiple open modals not supported
+
+Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
+{% endcallout %}
+
+{% callout warning %}
+#### Modal markup placement
+
+Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
+{% endcallout %}
+
+{% callout warning %}
+#### Mobile device caveats
+
+There are some caveats regarding using modals on mobile devices. [See our browser support docs](../getting-started/#support-fixed-position-keyboards) for details.
+{% endcallout %}
+
+### Static example
+
+A rendered modal with header, body, and set of actions in the footer.</p>
+
+<div class="bd-example bd-example-modal">
+ <div class="modal">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+</div>
+
+{% highlight html %}
+<div class="modal fade">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+{% endhighlight %}
+
+### Live demo
+
+Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
+
+<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <h4>Text in a modal</h4>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+ <h4>Popover in a modal</h4>
+ <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+
+ <h4>Tooltips in a modal</h4>
+ <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+ <hr>
+
+ <h4>Overflowing text to show scroll behavior</h4>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div>
+
+<div class="bd-example" style="padding-bottom: 24px;">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+ </button>
+</div>
+
+{% highlight html %}
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+{% callout warning %}
+#### Make modals accessible
+
+Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself.
+
+Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
+{% endcallout %}
+
+{% callout info %}
+#### Embedding YouTube videos
+
+Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+{% endcallout %}
+
+## Optional sizes
+
+Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
+
+<div class="bd-example">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
+</div>
+
+{% highlight html %}
+<!-- Large modal -->
+<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+
+<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+
+<!-- Small modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
+
+<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+## Remove animation
+
+For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
+
+{% highlight html %}
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
+ ...
+</div>
+{% endhighlight %}
+
+## Using the grid system
+
+To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container.
+
+{% example html %}
+<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
++ <div class="row">
++ <div class="col-md-4">.col-md-4</div>
++ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
++ </div>
++ <div class="row">
++ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
++ <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
++ </div>
++ <div class="row">
++ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
++ </div>
++ <div class="row">
++ <div class="col-sm-9">
++ Level 1: .col-sm-9
++ <div class="row">
++ <div class="col-xs-8 col-sm-6">
++ Level 2: .col-xs-8 .col-sm-6
++ </div>
++ <div class="col-xs-4 col-sm-6">
++ Level 2: .col-xs-4 .col-sm-6
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="bd-example bd-example-padded-bottom">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+ Launch demo modal
+ </button>
+</div>
+{% endexample %}
+
+## Varying modal content based on trigger button
+
+Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
+
+{% example html %}
+<div class="bd-example">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
+ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
+ </div>
+ <div class="modal-body">
+ <form>
+ <div class="form-group">
+ <label for="recipient-name" class="control-label">Recipient:</label>
+ <input type="text" class="form-control" id="recipient-name">
+ </div>
+ <div class="form-group">
+ <label for="message-text" class="control-label">Message:</label>
+ <textarea class="form-control" id="message-text"></textarea>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Send message</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+{% highlight js %}
+$('#exampleModal').on('show.bs.modal', function (event) {
+ var button = $(event.relatedTarget) // Button that triggered the modal
+ var recipient = button.data('whatever') // Extract info from data-* attributes
+ // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+ // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+ var modal = $(this)
+ modal.find('.modal-title').text('New message to ' + recipient)
+ modal.find('.modal-body input').val(recipient)
+})
+{% endhighlight %}
+
+## Modals with dynamic heights
+
+If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+
+## Usage
+
+The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+
+### Via data attributes
+
+Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
+
+{% highlight html %}
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call a modal with id `myModal` with a single line of JavaScript:
+
+{% highlight js %}$('#myModal').modal(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 50px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>backdrop</td>
+ <td>boolean or the string <code>'static'</code></td>
+ <td>true</td>
+ <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Closes the modal when escape key is pressed</td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Shows the modal when initialized.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Methods
+
+#### .modal(options)
+
+Activates your content as a modal. Accepts an optional options `object`.
+
+{% highlight js %}
+$('#myModal').modal({
+ keyboard: false
+})
+{% endhighlight %}
+
+#### .modal('toggle')
+
+Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
+
+#### .modal('show')
+
+Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('show'){% endhighlight %}
+
+#### .modal('hide')
+
+Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
+
+### Events
+
+Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.modal</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.modal</td>
+ <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>hide.bs.modal</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.modal</td>
+ <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>loaded.bs.modal</td>
+ <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myModal').on('hidden.bs.modal', function (e) {
+ // do something...
+})
+{% endhighlight %}
--- /dev/null
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
+---
+layout: page
+title: Reboot
+---
+
+Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
+
+Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Approach
+
+Here are our guidelines and reasons for choosing what to override in Reboot:
+
+- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
+- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
+- Keep declarations of `font`-related properties to a minimal, using `inherit` whenever possible.
+
+## Page defaults
+
+The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
+
+- The `box-sizing` is globally set on every element—including `*:before` and `*after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queryies.
+- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
+- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
+
+## Headings and paragraphs
+
+All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
+
+<div class="bd-example">
+{% markdown %}
+# h1 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+## h2 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+### h3 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+#### h4 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+##### h5 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+###### h6 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+{% endmarkdown %}
+</div>
+
+## Lists
+
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
+
+<div class="bd-example">
+{% markdown %}
+* Lorem ipsum dolor sit amet
+* Consectetur adipiscing elit
+* Integer molestie lorem at massa
+* Facilisis in pretium nisl aliquet
+* Nulla volutpat aliquam velit
+ * Phasellus iaculis neque
+ * Purus sodales ultricies
+ * Vestibulum laoreet porttitor sem
+ * Ac tristique libero volutpat at
+* Faucibus porta lacus fringilla vel
+* Aenean sit amet erat nunc
+* Eget porttitor lorem
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+{% endmarkdown %}
+</div>
+
+For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
+
+<div class="bd-example">
+{% markdown %}
+<dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>
+{% endmarkdown %}
+</div>
+
+## Preformatted text
+
+The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+<div class="bd-example">
+{% markdown %}
+<pre>
+.element {
+ margin-bottom: 1rem;
+}
+</pre>
+{% endmarkdown %}
+</div>
+
+## Tables
+
+Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/components/tables/).
+
+<div class="bd-example">
+ <table>
+ <caption>
+ This is an example table, and this is its caption to describe the contents.
+ </caption>
+ <thead>
+ <tr>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+## Forms
+
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
+
+- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
+- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
+- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
+- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout.
+
+These changes, and more, are demonstrated below.
+
+<form class="bd-example">
+ <fieldset>
+ <legend>Example legend</legend>
+
+ <p>
+ <label for="input">Example input</label>
+ <input type="text" id="input" placeholder="Example input">
+ </p>
+
+ <p>
+ <label for="select">Example select</label>
+ <select id="select">
+ <option value="">Choose...</option>
+ <optgroup label="Option group 1">
+ <option value="">Option 1</option>
+ <option value="">Option 2</option>
+ <option value="">Option 3</option>
+ </optgroup>
+ <optgroup label="Option group 2">
+ <option value="">Option 4</option>
+ <option value="">Option 5</option>
+ <option value="">Option 6</option>
+ </optgroup>
+ </select>
+ </p>
+
+ <p>
+ <label>
+ <input type="checkbox" value="">
+ Check this checkbox
+ </label>
+ </p>
+
+ <p>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </p>
+
+ <p>
+ <label for="textarea">Example textarea</label>
+ <textarea id="textarea" rows="3"></textarea>
+ </p>
+
+ <p>
+ <label for="time">Example temporal</label>
+ <input type="datetime" id="time">
+ </p>
+
+ <p>
+ <label for="output">Example output</label>
+ <output name="result" id="output">100</output>
+ </p>
+
+ <p>
+ <button type="submit">Button submit</button>
+ <input type="submit" value="Input submit button">
+ <input type="button" value="Input button">
+ </p>
+
+ <p>
+ <button type="submit" disabled>Button submit</button>
+ <input type="submit" value="Input submit button" disabled>
+ <input type="button" value="Input button" disabled>
+ </p>
+ </fieldset>
+</form>
+
+## Misc elements
+
+### Address
+
+The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.
+
+<div class="bd-example">
+ <address>
+ <strong>Twitter, Inc.</strong><br>
++ 1355 Market St, Suite 900<br>
++ San Francisco, CA 94103<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+
+ <address>
+ <strong>Full Name</strong><br>
+ <a href="mailto:#">first.last@example.com</a>
+ </address>
+</div>
+
+### Blockquote
+
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
+
+<div class="bd-example">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+ </blockquote>
+</div>
+
+### Inline elements
+
+The `<abbr>` element receives basic styling to make it stand the amongst paragraph text.
+
+<div class="bd-example">
+ Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
+</div>
--- /dev/null
+---
+layout: page
+title: Examples
+---
+
+Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+
++[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
++
+## Framework
+
+Examples that focus on implementing uses of built-in components provided by Bootstrap.
+
+<div class="row bd-examples">
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/starter-template/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
+ </a>
+ <h4>Starter template</h4>
+ <p>Nothing but the basics: compiled CSS and JavaScript.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/grid/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt="">
+ </a>
+ <h4>Grids</h4>
+ <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/jumbotron/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron.jpg" alt="">
+ </a>
+ <h4>Jumbotron</h4>
+ <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/jumbotron-narrow/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt="">
+ </a>
+ <h4>Narrow jumbotron</h4>
+ <p>Build a more custom page by narrowing the default container and jumbotron.</p>
+ </div>
+</div>
+
+## Navbars
+
+Taking the default navbar component and showing how it can be moved, placed, and extended.
+
+<div class="row bd-examples">
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/navbar/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar.jpg" alt="">
+ </a>
+ <h4>Navbar</h4>
+ <p>Super basic template that includes the navbar along with some additional content.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/navbar-top/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-static.jpg" alt="">
+ </a>
+ <h4>Static top navbar</h4>
+ <p>Super basic template with a static top navbar along with some additional content.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/navbar-top-fixed/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-fixed.jpg" alt="">
+ </a>
+ <h4>Fixed navbar</h4>
+ <p>Super basic template with a fixed top navbar along with some additional content.</p>
+ </div>
+</div>
+
+## Custom components
+
+Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
+
+<div class="row bd-examples">
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/album/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/album.jpg" alt="">
+ </a>
+ <h4>Album</h4>
+ <p>Simple one-page template for photo galleries, portfolios, and more.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/cover/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/cover.jpg" alt="">
+ </a>
+ <h4>Cover</h4>
+ <p>A one-page template for building simple and beautiful home pages.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/carousel/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/carousel.jpg" alt="">
+ </a>
+ <h4>Carousel</h4>
+ <p>Customize the navbar and carousel, then add some new components.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/blog/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/blog.jpg" alt="">
+ </a>
+ <h4>Blog</h4>
+ <p>Simple two-column blog layout with custom navigation, header, and type.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/dashboard/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/dashboard.jpg" alt="">
+ </a>
+ <h4>Dashboard</h4>
+ <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/signin/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sign-in.jpg" alt="">
+ </a>
+ <h4>Sign-in page</h4>
+ <p>Custom form layout and design for a simple sign in form.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/justified-nav/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt="">
+ </a>
+ <h4>Justified nav</h4>
+ <p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}components/#nav-justified">Not too Safari friendly.</a></p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/sticky-footer/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer.jpg" alt="">
+ </a>
+ <h4>Sticky footer</h4>
+ <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
+ </div>
+ <div class="clearfix hidden-sm-up"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/sticky-footer-navbar/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
+ </a>
+ <h4>Sticky footer w/ navbar</h4>
+ <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
+ </div>
+</div>
+
+## Experiments
+
+Examples that focus on future-friendly features or techniques.
+
+<div class="row bd-examples">
+ <div class="col-xs-6 col-md-4">
+ <a href="{{ site.baseurl }}/examples/offcanvas/">
+ <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/offcanvas.jpg" alt="">
+ </a>
+ <h4>Offcanvas</h4>
+ <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
+ </div>
+</div>
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
--- /dev/null
+---
+layout: page
+title: Contents
+---
+
+Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
+
+{% callout warning %}
+#### jQuery required
+
+Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
+{% endcallout %}
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Precompiled Bootstrap
+
+Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
+
+<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
+
+{% highlight bash %}
+bootstrap/
+├── css/
+│ ├── bootstrap.css
+│ ├── bootstrap.css.map
+│ ├── bootstrap.min.css
++│ └── bootstrap.min.css.map
+└── js/
+ ├── bootstrap.js
+ └── bootstrap.min.js
+{% endhighlight %}
+
+This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
+
+## Bootstrap source code
+
+The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
+
+{% highlight bash %}
+bootstrap/
+├── dist/
+│ ├── css/
+│ └── js/
+├── docs/
+│ └── examples/
+├── js/
+└── scss/
+{% endhighlight %}
+
+The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
- min-height: ($modal-title-padding + $modal-title-line-height);
- padding: @modal-title-padding;
- border-bottom: 1px solid @modal-header-border-color;
- &:extend(.clearfix all);
+ padding: $modal-title-padding;
+ border-bottom: 1px solid $modal-header-border-color;
++ @include clearfix;
}
// Close icon
.modal-header .close {
--- /dev/null
- &,
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border) {
+ color: $color;
+ background-color: $background;
+ border-color: $border;
+// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+// .box-shadow($shadow);
+
+ $active-background: darken($background, 10%);
+ $active-border: darken($border, 12%);
+
+ &:focus,
+ &.focus,
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ color: $color;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+ @include hover {
+ color: $color;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ // Remove the gradient for the pressed/active state
+ background-image: none;
+ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+ }
+ &.disabled,
+ &:disabled,
+ fieldset[disabled] & {
- &.focus,
- &:active,
- &.active {
+ &:focus,
++ &.focus {
+ background-color: $background;
+ border-color: $border;
+ }
+ @include hover {
+ background-color: $background;
+ border-color: $border;
+ }
+ }
+
+ .badge {
+ color: $background;
+ background-color: $color;
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ @include border-radius($border-radius);
+}
projects / thirdparty / bootstrap.git / commitdiff
