all: {
options: {
build: process.env.TRAVIS_JOB_ID,
- throttled: 10,
+ concurrency: 10,
maxRetries: 3,
+ maxPollRetries: 4,
urls: ['http://127.0.0.1:3000/js/tests/index.html'],
browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
}
expo: http://expo.getbootstrap.com
cdn:
- css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
- js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
+ css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
- css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css
+ js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
+ jquery: //code.jquery.com/jquery-2.1.1.min.js
+
+bug:
+ firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=
+ webkit: https://bugs.webkit.org/show_bug.cgi?id=
+ chrome: https://code.google.com/p/chromium/issues/detail?id=
+ github: https://github.com/twbs/bootstrap/issues/
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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 %}
--- /dev/null
- Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
+---
+layout: page
+title: Forms
+---
+
+Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
+
+## Example form
+
+Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
+
+{% example html %}
+<form>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" id="exampleInputFile">
+ <p class="help-block">Example block-level help text here.</p>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn btn-secondary">Submit</button>
+</form>
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Don't mix form groups with input groups</h4>
+ <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+</div>
+
+## Inline forms
+
- <h4>Requires custom widths</h4>
++Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. **This only applies to form controls within viewports that are at least 768px wide.**
+
+<div class="bs-callout bs-callout-danger">
- <label class="sr-only" for="exampleInputEmail2">Email address</label>
- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
++ <h4>May require custom widths</h4>
+ <p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Always add labels</h4>
+ <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
+</div>
+
++### Visible labels
++
++{% example html %}
++<div class="bs-example" data-example-id="simple-form-inline">
++ <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-default">Send invitation</button>
++ </form>
++</div>
++{% endexample %}
++
++### Hidden labels
++
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
- <label class="sr-only" for="exampleInputPassword2">Password</label>
- <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
++ <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">
- Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
++ <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-default">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 %}
+
+## Horizontal forms
+
- <input type="text" class="form-control" id="inputSuccess2">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
++Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form or form control's parent. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group">
+ <label for="inputEmail3" class="col-sm-2 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">
+ <label for="inputPassword3" class="col-sm-2 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">
+ <div class="col-sm-offset-2 col-sm-10">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-sm-offset-2 col-sm-10">
+ <button type="submit" class="btn btn-secondary">Sign in</button>
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+## Supported controls
+
+Examples of standard form controls supported in an example form layout.
+
+### Inputs
+
+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`.
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Type declaration required</h4>
+ <p>Inputs will only be fully styled if their `type` is properly declared.</p>
+</div>
+
+{% example html %}
+<input type="text" class="form-control" placeholder="Text input">
+{% endexample %}
+
+<div class="bs-callout bs-callout-info">
+ <h4>Input groups</h4>
+ <p>To add integrated text or buttons before and/or after any text-based `<input>`, <a href="../components/#input-groups">check out the input group component</a>.</p>
+</div>
+
+### Textarea
+
+Form control which supports multiple lines of text. Change `rows` attribute as necessary.
+
+{% example html %}
+<textarea class="form-control" rows="3"></textarea>
+{% endexample %}
+
+### Checkboxes and radios
+
+Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
+A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
+
+#### 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="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>
+{% 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>
+
+<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 %}
+
+### Selects
+
+Use the default option, or add `multiple` to show multiple options at once.
+
+{% example html %}
+<select class="form-control">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+<select multiple class="form-control">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+{% 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-default">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`.
+
+<div class="bs-example">
+ <form>
+ <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
+ </form>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Demo `:focus` state</h4>
+ <p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
+</div>
+
+## Disabled states
+
+Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look.
+
+{% 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 %}
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Caveat about link functionality of `<a>`</h4>
+ <p>By default, browsers will treat all native form controls (<code><input></code>, <code><select></code> and <code><button></code> elements) inside a <code><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code><a ... class="btn btn-*"></code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (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.</p>
+</div>
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Cross-browser compatibility</h4>
+ <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
+</div>
+
+## Readonly inputs
+
+Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
+
+{% example html %}
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+{% 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.
+
+{% 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.
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Icons, labels, and input groups</h4>
+ <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> 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.</p>
+</div>
+
+{% 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="inputWarning2">
- <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
++ <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="inputError2">
- <span class="glyphicon glyphicon-remove form-control-feedback"></span>
++ <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 %}
+
+## Control sizing
+
+Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
+
+{% example html %}
+<input class="form-control input-lg" type="text" placeholder=".input-lg">
+<input class="form-control" type="text" placeholder="Default input">
+<input class="form-control input-sm" type="text" placeholder=".input-sm">
+
+<select class="form-control input-lg"></select>
+<select class="form-control"></select>
+<select class="form-control input-sm"></select>
+{% endexample %}
+
+Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group form-group-lg">
+ <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+ </div>
+ </div>
+ <div class="form-group form-group-sm">
+ <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+ </div>
+ </div>
+</form>
+{% 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 %}
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
-
<script src="offcanvas.js"></script>
</body>
</html>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
<!-- 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.1/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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>
-
<script src="tooltip-viewport.js"></script>
</body>
</html>
--- /dev/null
- ### Autoprefixer required for Less/Sass
+---
+layout: page
+title: Download
+---
+
+Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
+
+## Optional builds
+
+### Scaffolding only
+Just our global CSS resets, including Normalize and more. No custom CSS components or JavaScript.
+
+### Grid only
+Literally just our grid container and columns. No global CSS resets, custom CSS components, or JavaScript.
+
+### Individual components
+Choose what CSS and JS components to download and customize further for your own use. Include the global CSS resets.
+
+### Kitchen sink
+Download the entire project and quickly get developing. Includes all CSS and JavaScript, including the source files and basic build tools.
+
+---
+
+### Precompiled
+
+Compiled and minified CSS and JavaScript. No docs or original source files are included.
+
+<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
+
+### Download source and docs
+
+Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
+
+<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+
+### Bower
+
+You can also install and manage Bootstrap's Sass, CSS, and JavaScript using [Bower](http://bower.io).
+
+{% highlight bash %}$ bower install bootstrap{% endhighlight %}
+
+### npm
+
+Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstrap). Install it into your Node powered apps with:
+
+{% highlight bash %}$ npm install bootstrap{% endhighlight %}
+
- Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.
++`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
+
++Bootstrap's `package.json` contains some additional metadata under the following keys:
++
++- `less` - path to Bootstrap's main [Less](http://lesscss.org) source file
++- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
++
++### Autoprefixer required
++
++Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its source Sass and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this as Autoprefixer is already integrated into our Gruntfile.
--- /dev/null
- <a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+---
+layout: page
+title: Popovers
+---
+
+Add small overlays of content, like those on the iPad, to any element for housing secondary information.
+
+Popovers whose both title and content are zero-length are never displayed.
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Plugin dependency</h4>
+ <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
+</div>
+<div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+ <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
+{% highlight js %}
+$(function () {
+ $('[data-toggle="popover"]').popover()
+})
+{% endhighlight %}
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Popovers in button groups and input groups require special setting</h4>
+ <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Don't try to show popovers on hidden elements</h4>
+ <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Popovers on disabled elements require wrapper elements</h4>
+ <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Multiple-line links</h4>
+ <p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+</div>
+
+### Static popover
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bs-example bs-example-popover">
+ <div class="popover popover-top">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover top</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-right">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover right</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-bottom">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover bottom</h3>
+
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-left">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover left</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="clearfix"></div>
+</div>
+
+### Live demo
+
+{% example html %}
+<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+{% endexample %}
+
+#### Four directions
+
+<div class="bs-example popover-demo">
+ <div class="bs-example-popovers">
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+ </button>
+ </div>
+</div>
+
+{% highlight html %}
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+</button>
+{% endhighlight %}
+
+#### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the next click that the user makes.
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Specific markup required for dismiss-on-next-click</h4>
+ <p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
+</div>
+
+{% example html %}
- Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
++<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+{% endexample %}
+
+{% highlight js %}
+$('.popover-dismiss').popover({
+ trigger: 'focus'
+})
+{% endhighlight %}
+
+
+
+## Usage
+
+Enable popovers via JavaScript:
+
+{% highlight js %}$('#example').popover(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the popover</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -Â which will prevent the popover from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'right'</td>
+ <td>
+ <p>How to position the popover - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the popover.</p>
+ <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
+ <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+ <p><code>.popover-arrow</code> will become the popover's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'click'</td>
+ <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Data attributes for individual popovers</h4>
+ <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
+</div>
+
+### Methods
+
+#### $().popover(options)
+
+Initializes popovers for an element collection.
+
+#### .popover('show')
+
- Hides an element's popover.
++Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
+
+{% highlight js %}$('#element').popover('show'){% endhighlight %}
+
+#### .popover('hide')
+
- Toggles an element's popover.
++Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
+
+{% highlight js %}$('#element').popover('hide'){% endhighlight %}
+
+#### .popover('toggle')
+
++Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
+
+{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
+
+#### .popover('destroy')
+
+Hides and destroys an element's popover.
+
+{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
+
+### Events
+
+<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.popover</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.popover</td>
+ <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.popover</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.popover</td>
+ <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myPopover').on('hidden.bs.popover', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
+---
+layout: page
+title: Tooltips
+---
+
+## Examples
+
+Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
+
+Tooltips with zero-length titles are never displayed.
+
+Hover over the links below to see tooltips:
+
+<div class="bs-example tooltip-demo">
+ <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+ </p>
+</div>
+
+### Static demo
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bs-example bs-example-tooltip">
+ <div class="tooltip left" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the left
+ </div>
+ </div>
+ <div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the top
+ </div>
+ </div>
+ <div class="tooltip bottom" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the bottom
+ </div>
+ </div>
+ <div class="tooltip right" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the right
+ </div>
+ </div>
+</div>
+
+### Interactive demo
+
+Hover over the buttons below to see their tooltips.
+
+<div class="bs-example tooltip-demo">
+ <div class="bs-example-tooltips">
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+ </div>
+</div>
+
+{% highlight html %}
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+ Tooltip on left
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+ Tooltip on top
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+ Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+ Tooltip on right
+</button>
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+ <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
+{% highlight js %}
+$(function () {
+ $('[data-toggle="tooltip"]').tooltip()
+})
+{% endhighlight %}
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Tooltips in button groups and input groups require special setting</h4>
+ <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Don't try to show tooltips on hidden elements</h4>
+ <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Tooltips on disabled elements require wrapper elements</h4>
+ <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
+</div>
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
+
+Trigger the tooltip via JavaScript:
+
+{% highlight js %}
+$('#example').tooltip(options)
+{% endhighlight %}
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Multiple-line links</h4>
+ <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+</div>
+
+{% highlight html %}
+<!-- HTML to write -->
+<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Some tooltip text!
+ </div>
+</div>
+{% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -Â which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'top'</td>
+ <td>
+ <p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the tooltip.</p>
+ <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
+ <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'hover focus'</td>
+ <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Data attributes for individual tooltips</h4>
+ <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
+</div>
+
+### Methods
+
+#### $().tooltip(options)
+
+Attaches a tooltip handler to an element collection.
+
+#### .tooltip('show')
+
- Hides an element's tooltip.
++Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
+
+{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+
+#### .tooltip('hide')
+
- Toggles an element's tooltip.
++Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
+
+{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+
+#### .tooltip('toggle')
+
++Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
+
+{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+
+#### .tooltip('destroy')
+
+Hides and destroys an element's tooltip.
+
+{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
+
+### Events
+
+<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.tooltip</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.tooltip</td>
+ <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.tooltip</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.tooltip</td>
+ <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myTooltip').on('hidden.bs.tooltip', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
+---
+layout: page
+title: Grid system
+---
+
+Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
+
+### Quick start
+
+- Example grid class
+- Example mixins
+
+### Introduction
+
+Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
+
+- Rows must be placed within a `.container` (fixed-width) or `.container-fluid` (full-width) for proper alignment and padding.
+- Use rows to create horizontal groups of columns.
+- Content should be placed within columns, and only columns may be immediate children of rows.
+- Predefined grid classes like `.row` and `.col-xs-4` are available for quickly making grid layouts. Sass mixins can also be used for more semantic layouts.
+- Columns create gutters (gaps between column content) via `padding`. That padding is offset in rows for the first and last column via negative margin on `.row`s.
+- The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
+- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three `.col-xs-4`.
+- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
+- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any `.col-md-` class to an element will not only affect its styling on medium devices but also on large devices if a `.col-lg-` class is not present.
+
+Look to the examples for applying these principles to your code.
+
+### Grid options
+
+See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th></th>
+ <th>
+ Extra small devices
+ <small>Portrait phones (<34em)</small>
+ </th>
+ <th>
+ Small devices
+ <small>Landscape phones (≥34em)</small>
+ </th>
+ <th>
+ Medium devices
+ <small>Tablets (≥48em)</small>
+ </th>
+ <th>
+ Large devices
+ <small>Desktops (≥62em)</small>
+ </th>
+ <th>
+ Extra large devices
+ <small>Desktops (≥75em)</small>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th class="text-nowrap" scope="row">Grid behavior</th>
+ <td>Horizontal at all times</td>
+ <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Container width</th>
+ <td>None (auto)</td>
+ <td>34rem</td>
+ <td>45rem</td>
+ <td>60rem</td>
+ <td>72.25rem</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Class prefix</th>
+ <td><code>.col-xs-</code></td>
+ <td><code>.col-sm-</code></td>
+ <td><code>.col-md-</code></td>
+ <td><code>.col-lg-</code></td>
+ <td><code>.col-xl-</code></td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row"># of columns</th>
+ <td colspan="5">12</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Gutter width</th>
+ <td colspan="5">30px (15px on each side of a column)</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Nestable</th>
+ <td colspan="5">Yes</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Offsets</th>
+ <td colspan="5">Yes</td>
+ </tr>
+ <tr>
+ <th class="text-nowrap" scope="row">Column ordering</th>
+ <td colspan="5">Yes</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Semantic mixins
+
+In addition to [prebuilt grid classes](#grid-example-basic) for fast layouts, Bootstrap includes Sass variables and mixins for quickly generating your own simple, semantic layouts.
+
+#### Variables
+
+Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
+
+{% highlight scss %}
+$grid-columns: 12;
+$grid-gutter-width: 1.5rem;
+{% endhighlight %}
+
+#### Mixins
+
+Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
+
+{% highlight scss %}
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+ margin-left: ($gutter / -2);
+ margin-right: ($gutter / -2);
+ @include clearfix();
+}
+
+// Make the element grid-ready (applying everything but the width)
+@mixin make-col($gutter: $grid-gutter-width) {
+ position: relative;
+ float: left;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+}
+
+// Set a width (to be used in or out of media queries)
+@mixin make-col-span($columns) {
+ width: percentage(($columns / $grid-columns));
+}
+
+// Get fancy by offsetting, or changing the sort order
+@mixin make-col-offset($columns) {
+ margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-col-push($columns) {
+ left: percentage(($columns / $grid-columns));
+}
+@mixin make-col-pull($columns) {
+ right: percentage(($columns / $grid-columns));
+}
+{% endhighlight %}
+
+#### Example usage
+
+You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
+
+See it in action in <a href="http://jsbin.com/qiqet/3/edit">this rendered example</a>.
+
+{% highlight scss %}
+.container {
+ max-width: 60em;
+ @include make-container();
+}
+.row {
+ @include make-row();
+}
+.content-main {
+ @include make-col();
+
+ @media (max-width: 32em) {
+ @include make-col-span(6);
+ }
+ @media (min-width: 32.1em) {
+ @include make-col-span(8);
+ }
+}
+.content-secondary {
+ @include make-col();
+
+ @media (max-width: 32em) {
+ @include make-col-span(6);
+ }
+ @media (min-width: 32.1em) {
+ @include make-col-span(4);
+ }
+}
+{% endhighlight %}
+
+{% highlight html %}
+<div class="container">
+ <div class="row">
+ <div class="content-main">...</div>
+ <div class="content-secondary">...</div>
+ </div>
+</div>
+{% endhighlight %}
+
+## Predefined classes
+
+In addition to our semantic mixins, Bootstrap includes an extensive set of prebuilt classes for quickly creating grid columns. It includes options for device-based column sizing, reordering columns, and more.
+
+### Example: Stacked-to-horizontal
+
+Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.
+
+{% example html %}
+<div class="row">
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+</div>
+<div class="row">
+ <div class="col-md-8">.col-md-8</div>
+ <div class="col-md-4">.col-md-4</div>
+</div>
+<div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
+</div>
+<div class="row">
+ <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">.col-md-6</div>
+</div>
+{% endexample %}
+
+### Example: Fluid container
+
+Turn any fixed-width grid layout into a full-width layout by changing your outermost `.container` to `.container-fluid`.
+
+{% highlight html %}
+<div class="container-fluid">
+ <div class="row">
+ ...
+ </div>
+</div>
+{% endhighlight %}
+
+### Example: Mobile and desktop
+
+Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
+
+{% example html %}
+<!-- Stack the columns on mobile by making one full-width and the other half-width -->
+<div class="row">
+ <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+
+<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+<div class="row">
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+
+<!-- Columns are always 50% wide, on mobile and desktop -->
+<div class="row">
+ <div class="col-xs-6">.col-xs-6</div>
+ <div class="col-xs-6">.col-xs-6</div>
+</div>
+{% endexample %}
+
+### Example: Mobile, tablet, desktop
+
+Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.
+
+{% example html %}
+<div class="row">
+ <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row">
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ <!-- Optional: clear the XS cols if their content doesn't match in height -->
+ <div class="clearfix visible-xs-block"></div>
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+</div>
+{% endexample %}
+
+### Example: Column wrapping
+
+If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
+
+{% example html %}
+<div class="row">
+ <div class="col-xs-9">.col-xs-9</div>
+ <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+ <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+</div>
+{% endexample %}
+
+### Example: Responsive column resets
+
+With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes](#responsive-utilities).
+
+{% example html %}
+<div class="row">
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+ <!-- Add the extra clearfix for only the required viewport -->
+ <div class="clearfix visible-xs-block"></div>
+
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+</div>
+{% endexample %}
+
+In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example](../examples/grid/).
+
+{% example html %}
+<div class="row">
+ <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+ <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+</div>
+
+<div class="row">
+ <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
+ <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+</div>
+{% endexample %}
+
+### Example: Offsetting columns
+
+Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
+
+{% example html %}
+<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-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+</div>
+<div class="row">
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+</div>
+{% endexample %}
+
+### Example: Nesting columns
+
++To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
+
+{% example html %}
+<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>
+{% endexample %}
+
+### Example: Column ordering
+
+Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes.
+
+{% example html %}
+<div class="row">
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
+</div>
+{% endexample %}
{
"name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
- "version": "3.3.1",
- "version": "3.3.2",
++ "version": "4.0.0-alpha",
"keywords": [
"css",
- "less",
+ "sass",
"mobile-first",
"responsive",
"front-end",
"grunt-exec": "~0.4.6",
"grunt-html-validation": "~0.1.18",
"grunt-jekyll": "~0.4.2",
- "grunt-jscs": "~1.1.0",
+ "grunt-jscs": "~1.2.0",
+ "grunt-sass": "~0.17.0",
- "grunt-saucelabs": "~8.4.0",
+ "grunt-saucelabs": "~8.4.1",
+ "grunt-scss-lint": "^0.3.4",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~2.0.0",
"npm-shrinkwrap": "^200.0.0",
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
- .btn-group > .btn-group:first-child {
+ .btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
- .border-right-radius(0);
+ @include border-right-radius(0);
}
}
- .btn-group > .btn-group:last-child > .btn:first-child {
+ .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
- .border-left-radius(0);
+ @include border-left-radius(0);
}
// On active and open, don't show outline
}
&:hover,
&:focus {
- color: @link-hover-color;
- text-decoration: @link-hover-decoration;
+ color: $link-hover-color;
- text-decoration: underline;
++ text-decoration: $link-hover-decoration;
background-color: transparent;
}
- &[disabled],
+ &:disabled,
fieldset[disabled] & {
&:hover,
&:focus {
// Dropdown menus
// --------------------------------------------------
-
-// Dropdown arrow/caret
-.caret {
- display: inline-block;
- width: 0;
- height: 0;
- margin-left: 2px;
- vertical-align: middle;
- border-top: @caret-width-base solid;
- border-right: @caret-width-base solid transparent;
- border-left: @caret-width-base solid transparent;
-}
-
// The dropdown wrapper (div)
+ .dropup,
.dropdown {
position: relative;
}
.form-control {
display: block;
width: 100%;
- height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- padding: @padding-base-vertical @padding-base-horizontal;
- font-size: @font-size-base;
- line-height: @line-height-base;
- color: @input-color;
- background-color: @input-bg;
+ height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: $padding-base-vertical $padding-base-horizontal;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $input-color;
+ background-color: $input-bg;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
- border: 1px solid @input-border;
- border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+ border: 1px solid $input-border;
- @include border-radius($input-border-radius);
++ @include border-radius($input-border-radius); // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Customize the `:focus` state to imitate native WebKit styles.
- .form-control-focus();
+ @include form-control-focus();
// Placeholder
- .placeholder();
+ &::placeholder {
+ color: $input-color-placeholder;
+ opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+ }
// Disabled and read-only inputs
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
-.input-sm {
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
-}
+@include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
.form-group-sm {
- .form-control {
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
- }
+ @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
++
+ .form-control-static {
- height: @input-height-small;
- padding: @padding-small-vertical @padding-small-horizontal;
- font-size: @font-size-small;
- line-height: @line-height-small;
++ height: $input-height-sm;
++ padding: $padding-sm-vertical $padding-sm-horizontal;
++ font-size: $font-size-sm;
++ line-height: $line-height-sm;
+ }
+ }
-
-.input-lg {
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
+
+@include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
.form-group-lg {
- .form-control {
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
- }
+ @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
++
+ .form-control-static {
- height: @input-height-large;
- padding: @padding-large-vertical @padding-large-horizontal;
- font-size: @font-size-large;
- line-height: @line-height-large;
++ height: $input-height-lg;
++ padding: $padding-lg-vertical $padding-lg-horizontal;
++ font-size: $font-size-lg;
++ line-height: $line-height-lg;
+ }
}
--- /dev/null
- tbody tr:nth-child(odd) {
+//
+// Reset tabular elements
+//
+
+table {
+ background-color: $table-bg;
+}
+
+caption {
+ padding-top: $table-cell-padding;
+ padding-bottom: $table-cell-padding;
+ color: $text-muted;
+ text-align: left;
+}
+
+th {
+ text-align: left;
+}
+
+
+//
+// Basic tables
+//
+
+.table {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: $spacer;
+
+ th,
+ td {
+ padding: $table-cell-padding;
+ line-height: $line-height-base;
+ vertical-align: top;
+ border-top: 1px solid $table-border-color;
+ }
+
+ thead th {
+ vertical-align: bottom;
+ border-bottom: 2px solid $table-border-color;
+ }
+
+ tbody + tbody {
+ border-top: 2px solid $table-border-color;
+ }
+
+ .table {
+ background-color: $body-bg;
+ }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+ th,
+ td {
+ padding: $table-sm-cell-padding;
+ }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+ border: 1px solid $table-border-color;
+
+ th,
+ td {
+ border: 1px solid $table-border-color;
+ }
+
+ thead {
+ th,
+ td {
+ border-bottom-width: 2px;
+ }
+ }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
++ tbody tr:nth-of-type(odd) {
+ background-color: $table-bg-accent;
+ }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+ tbody tr:hover {
+ background-color: $table-bg-hover;
+ }
+}
+
+
+// Table cell sizing
+//
+// Reset default table behavior
+
+table col[class*="col-"] {
+ position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+ display: table-column;
+ float: none;
+}
+
+table {
+ td,
+ th {
+ &[class*="col-"] {
+ position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+ display: table-cell;
+ float: none;
+ }
+ }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+// Generate the contextual variants
+@include table-row-variant(active, $table-bg-active);
+@include table-row-variant(success, $state-success-bg);
+@include table-row-variant(info, $state-info-bg);
+@include table-row-variant(warning, $state-warning-bg);
+@include table-row-variant(danger, $state-danger-bg);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+ display: block;
+ width: 100%;
+ overflow-x: auto;
+
+ // Todo: find out if we need this still.
+ //
+ // border: 1px solid $table-border-color;
+ // -ms-overflow-style: -ms-autohiding-scrollbar;
+ // min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+}
+
+
+.thead-inverse {
+ th {
+ color: #fff;
+ background-color: $gray-dark;
+ }
+}
+.thead-default {
+ th {
+ color: $gray;
+ background-color: $gray-lighter;
+ }
+}
+
+.table-inverse {
+ color: $gray-lighter;
+ background-color: $gray-dark;
+
+ &.table-bordered {
+ border: 0;
+ }
+
+ th,
+ td {
+ border-color: $gray;
+ }
+}
+
+
+.table-reflow {
+ thead {
+ float: left;
+ }
+
+ tbody {
+ display: block;
+ white-space: nowrap;
+ }
+
+ th,
+ td {
+ border-top: 1px solid $table-border-color;
+ border-left: 1px solid $table-border-color;
+
+ &:last-child {
+ border-right: 1px solid $table-border-color;
+ }
+ }
+
+ thead,
+ tbody,
+ tfoot {
+ &:last-child {
+ tr:last-child {
+ th,
+ td {
+ border-bottom: 1px solid $table-border-color;
+ }
+ }
+ }
+ }
+
+ tr {
+ float: left;
+
+ th,
+ td {
+ display: block !important;
+ border: 1px solid $table-border-color;
+ }
+ }
+}
--- /dev/null
- $line-height-lg: 1.33 !default;
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-dark: #373a3c !default;
+$gray-darker: $gray-dark !default; // TODO: remove
+$gray: #55595c !default;
+$gray-light: #818a91 !default;
+$gray-lighter: #eceeef !default;
+$gray-lightest: #f7f7f9 !default;
+
+$brand-primary: #0275d8 !default;
+$brand-success: #5cb85c !default;
+$brand-info: #5bc0de !default;
+$brand-warning: #f0ad4e !default;
+$brand-danger: #d9534f !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg: #fff !default;
+//** Global text color on `<body>`.
+$text-color: $gray-dark !default;
+
+//** Global textual link color.
+$link-color: $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color: darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Global settings
+//
+//## Quickly modify global styling by enabling or disabling features.
+
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-gradients: true !default;
+$enable-transitions: true !default;
+
+$spacer: 1rem !default;
+$border-width: .075rem !default;
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+//** Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+$font-size-root: 16px !default;
+//** Sets the `<body>` and more to the root pixel value.
+$font-size-base: 1rem !default;
+$font-size-lg: 1.25rem !default;
+$font-size-sm: .85rem !default;
+$font-size-xs: .75rem !default;
+
+$font-size-h1: 3rem !default;
+$font-size-h2: 2.5rem !default;
+$font-size-h3: 2rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h6: 1rem !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base: 1.5 !default;
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: 1 !default;
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+$headings-color: inherit !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical: .5rem !default;
+$padding-base-horizontal: .75rem !default;
+
+$padding-lg-vertical: .75rem !default;
+$padding-lg-horizontal: 1.5rem !default;
+
+$padding-sm-vertical: .3rem !default;
+$padding-sm-horizontal: .75rem !default;
+
+$padding-xs-vertical: .2rem !default;
+$padding-xs-horizontal: .5rem !default;
+
++$line-height-lg: 1.3333333 !default;
+$line-height-sm: 1.5 !default;
+
+$border-radius-base: .25rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-sm: .2rem !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg: $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base: .3em !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large: $caret-width-base !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding: .75rem !default;
+//** Padding for cells in `.table-sm`.
+$table-sm-cell-padding: .3rem !default;
+
+//** Default background color used for all tables.
+$table-bg: transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent: #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover: #f5f5f5 !default;
+$table-bg-active: $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color: $gray-lighter !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight: normal !default;
+
+$btn-primary-color: #fff !default;
+$btn-primary-bg: $brand-primary !default;
+$btn-primary-border: darken($btn-primary-bg, 5%) !default;
+
+$btn-secondary-color: $gray-dark !default;
+$btn-secondary-bg: #fff !default;
+$btn-secondary-border: $gray-lighter !default;
+
+$btn-info-color: #fff !default;
+$btn-info-bg: $brand-info !default;
+$btn-info-border: darken($btn-info-bg, 5%) !default;
+
+$btn-success-color: #fff !default;
+$btn-success-bg: $brand-success !default;
+$btn-success-border: darken($btn-success-bg, 5%) !default;
+
+$btn-warning-color: #fff !default;
+$btn-warning-bg: $brand-warning !default;
+$btn-warning-border: darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color: #fff !default;
+$btn-danger-bg: $brand-danger !default;
+$btn-danger-border: darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color: $gray-light !default;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg: #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled: $gray-lighter !default;
+
+//** Text color for `<input>`s
+$input-color: $gray !default;
+//** `<input>` border color
+$input-border: #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+$input-border-radius: $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-lg: $border-radius-lg !default;
+//** Small `.form-control` border radius
+$input-border-radius-sm: $border-radius-sm !default;
+
+//** Border color for inputs on focus
+$input-border-focus: #66afe9 !default;
+$input-box-shadow-focus: rgba(102,175,233,.6) !default;
+
+//** Placeholder text color
+$input-color-placeholder: #999 !default;
+
+//** Default `.form-control` height
+$input-height-base: (($font-size-base * $line-height-base) + ($padding-base-vertical * 2) + ($border-width * 2)) !default;
+//** Large `.form-control` height
+$input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-vertical * 2) + ($border-width * 2)) !default;
+//** Small `.form-control` height
+$input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-vertical * 2) + ($border-width * 2)) !default;
+
+$legend-color: $gray-dark !default;
+$legend-border-color: #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg: $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled: not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg: #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border: rgba(0,0,0,.15) !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg: #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color: $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg: #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg: $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color: $gray-light !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar: 1000 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-navbar-fixed: 1030 !default;
+$zindex-modal: 1040 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+$grid-breakpoints: (
+ // Extra small screen / phone
+ xs: 0,
+ // Small screen / phone
+ sm: 34em,
+ // Medium screen / tablet
+ md: 48em,
+ // Large screen / desktop
+ lg: 62em,
+ // Extra large screen / wide desktop
+ xl: 75em
+) !default;
+
+//** Number of columns in the grid.
+$grid-columns: 12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: 1.5rem !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 34rem, // 480
+ md: 45rem, // 720
+ lg: 60rem, // 960
+ xl: 72.25rem // 1140
+) !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+// $navbar-height: 50px !default;
+$navbar-margin-bottom: $line-height-computed !default;
+$navbar-border-radius: $border-radius-base !default;
+$navbar-padding-horizontal: $spacer !default;
+$navbar-padding-vertical: ($spacer / 2) !default;
+$navbar-collapse-max-height: 340px !default;
+
+$navbar-default-color: #777 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-hover-bg: transparent !default;
+$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-bg: transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color: $navbar-default-link-color !default;
+$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg: transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color: lighten($gray-light, 12%) !default;
+$navbar-inverse-bg: #373a3c !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color: #fff !default;
+$navbar-inverse-link-hover-bg: transparent !default;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-bg: transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg: transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg: #333 !default;
+$navbar-inverse-toggle-icon-bar-bg: #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding: .6em 1em !default;
+$nav-link-hover-bg: $gray-lighter !default;
+
+$nav-disabled-link-color: $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color: #ddd !default;
+
+$nav-tabs-link-hover-border-color: $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg: $body-bg !default;
+$nav-tabs-active-link-hover-color: $gray !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
+
+$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-active-link-hover-bg: $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color: $link-color !default;
+$pagination-bg: #fff !default;
+$pagination-border: #ddd !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-lighter !default;
+$pagination-hover-border: #ddd !default;
+
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $brand-primary !default;
+$pagination-active-border: $brand-primary !default;
+
+$pagination-disabled-color: $gray-light !default;
+$pagination-disabled-bg: #fff !default;
+$pagination-disabled-border: #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg: $pagination-bg !default;
+$pager-border: $pagination-border !default;
+$pager-border-radius: 15px !default;
+
+$pager-hover-bg: $pagination-hover-bg !default;
+
+$pager-active-bg: $pagination-active-bg !default;
+$pager-active-color: $pagination-active-color !default;
+
+$pager-disabled-color: $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding: 2rem !default;
+$jumbotron-color: inherit !default;
+$jumbotron-bg: $gray-lighter !default;
+$jumbotron-heading-color: inherit !default;
+// $jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text: #3c763d !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken($state-success-bg, 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken($state-info-bg, 7%) !default;
+
+$state-warning-text: #8a6d3b !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken($state-warning-bg, 5%) !default;
+
+$state-danger-text: #a94442 !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken($state-danger-bg, 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width: 200px !default;
+//** Tooltip text color
+$tooltip-color: #fff !default;
+//** Tooltip background color
+$tooltip-bg: #000 !default;
+$tooltip-opacity: .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width: 5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg: #fff !default;
+//** Popover maximum width
+$popover-max-width: 276px !default;
+//** Popover border color
+$popover-border-color: rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color: #ccc !default;
+
+//** Popover title background color
+$popover-title-bg: darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width: 10px !default;
+//** Popover arrow color
+$popover-arrow-color: $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg: $gray-light !default;
+//** Primary label background color
+$label-primary-bg: $brand-primary !default;
+//** Success label background color
+$label-success-bg: $brand-success !default;
+//** Info label background color
+$label-info-bg: $brand-info !default;
+//** Warning label background color
+$label-warning-bg: $brand-warning !default;
+//** Danger label background color
+$label-danger-bg: $brand-danger !default;
+
+//** Default label text color
+$label-color: #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color: #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding: 15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding: 15px !default;
+//** Modal title line-height
+$modal-title-line-height: $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg: #fff !default;
+//** Modal content border color
+$modal-content-border-color: rgba(0,0,0,.2) !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg: #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity: .5 !default;
+//** Modal header border color
+$modal-header-border-color: #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color: $modal-header-border-color !default;
+
+$modal-lg: 900px !default;
+$modal-md: 600px !default;
+$modal-sm: 300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding: 15px !default;
+$alert-border-radius: $border-radius-base !default;
+$alert-link-font-weight: bold !default;
+
+$alert-success-bg: $state-success-bg !default;
+$alert-success-text: $state-success-text !default;
+$alert-success-border: $state-success-border !default;
+
+$alert-info-bg: $state-info-bg !default;
+$alert-info-text: $state-info-text !default;
+$alert-info-border: $state-info-border !default;
+
+$alert-warning-bg: $state-warning-bg !default;
+$alert-warning-text: $state-warning-text !default;
+$alert-warning-border: $state-warning-border !default;
+
+$alert-danger-bg: $state-danger-bg !default;
+$alert-danger-text: $state-danger-text !default;
+$alert-danger-border: $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg: #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color: #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius: $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg: $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg: $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg: $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg: $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg: $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg: #fff !default;
+//** `.list-group-item` border color
+$list-group-border: #ddd !default;
+//** List group border radius
+$list-group-border-radius: $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg: #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color: $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg: $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border: $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color: $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg: $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color: #555 !default;
+$list-group-link-hover-color: $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding: .25rem !default;
+//** Thumbnail background color
+$thumbnail-bg: $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border: #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius: $border-radius-base !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color: #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color: #fff !default;
+$badge-bg: $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color: $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg: #fff !default;
+
+$badge-font-weight: bold !default;
+$badge-line-height: 1 !default;
+$badge-border-radius: 2em !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical: .75rem !default;
+$breadcrumb-padding-horizontal: 1rem !default;
+
+//** Breadcrumb background color
+$breadcrumb-bg: $gray-lighter !default;
+//** Text color for the generated divider between breadcrumb items
+$breadcrumb-divider-color: $gray-light !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color: $gray-light !default;
+//** Textual divider for between breadcrumb elements
+$breadcrumb-divider: "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color: #fff !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-font-size: 20px !default;
+
+$carousel-indicator-active-bg: #fff !default;
+$carousel-indicator-border-color: #fff !default;
+
+$carousel-caption-color: #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight: bold !default;
+$close-color: #000 !default;
+$close-text-shadow: 0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color: #d44950 !default;
+$code-bg: #f7f7f9 !default;
+
+$kbd-color: #fff !default;
+$kbd-bg: #333 !default;
+
+$pre-bg: #f7f7f9 !default;
+$pre-color: $gray-dark !default;
+$pre-border-color: #ccc !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted: $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color: $gray-light !default;
+//** Headings small color
+$headings-small-color: $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color: $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color: $gray-lighter !default;
+//** Page header border color
+$page-header-border-color: $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset: $component-offset-horizontal !default;
+//** Horizontal line color.
+$hr-border: $gray-lighter !default;
projects / thirdparty / bootstrap.git / commitdiff
