mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-04 17:21:38 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' into v4-navbars

Browse Source
This commit is contained in:
Mark Otto
2016-10-16 19:46:47 -07:00
parent 05bdecd0b0 6d6538fc81
commit b4cdccba84
310 changed files with 33865 additions and 20207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/components/alerts.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Alerts
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
group: components
---
@@ -60,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}

1
docs/components/breadcrumb.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Breadcrumb
description: Indicate the current page's location within a navigational hierarchy.
group: components
---

1
docs/components/button-group.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Button group
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
group: components
---

1
docs/components/buttons.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Buttons
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
group: components
redirect_from: "/components/"
---

15
docs/components/card.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Cards
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
group: components
---
@@ -141,7 +142,7 @@ Using custom widths:
## Text alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
{% example html %}
<div class="card card-block">
@@ -230,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<ul class="nav nav-tabs card-header-tabs float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
@@ -253,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<ul class="nav nav-pills card-header-pills float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
@@ -434,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
## Groups
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect.
Only applies to small devices and above.
@@ -517,7 +518,7 @@ Only applies to small devices and above.
{% example html %}
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -534,7 +535,7 @@ Only applies to small devices and above.
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -557,7 +558,7 @@ Only applies to small devices and above.
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">

7
docs/components/carousel.md
View File

@@ -1,10 +1,11 @@
---
layout: docs
title: Carousel
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
group: components
---
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
## Contents
@@ -158,9 +159,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
<tr>
<td>pause</td>
<td>string</td>
<td>string | null</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
<td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td>
</tr>
<tr>
<td>wrap</td>

46
docs/components/collapse.md
View File

@@ -1,10 +1,11 @@
---
layout: docs
title: Collapse
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
group: components
---
The Bootstrap collapse plugin allows you to toggle content on your pages with a bit of JavaScript and some classes. Flexible plugin that utilizes a handful of classes (from the **required [transitions plugin]({{ site.baseurl }}/components/transitions/)**) for easy toggle behavior.
The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.
## Contents
@@ -43,40 +44,47 @@ Extend the default collapse behavior to create an accordion.
{% example html %}
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>

19
docs/components/dropdowns.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Dropdowns
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
group: components
---
@@ -36,7 +37,7 @@ And with `<a>` elements:
{% example html %}
<div class="dropdown open">
<a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
@@ -361,7 +362,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@@ -500,20 +501,6 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
</div>
{% endhighlight %}
To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
{% highlight html %}
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</a>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>
{% endhighlight %}
### Via JavaScript
Call the dropdowns via JavaScript:

72
docs/components/forms.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Forms
description: Examples and usage guidelines for from controls, form layouts, and custom forms.
group: components
---
@@ -59,28 +60,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" 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>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
@@ -150,10 +152,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an
<tr>
<td class="text-nowrap">
{% markdown %}
`.radio`<br>
`.radio-inline`<br>
`.checkbox`<br>
`.checkbox-inline`
`.form-check`<br>
`.form-check-inline`
{% endmarkdown %}
</td>
<td class="text-nowrap">
@@ -192,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
<div class="form-group row">
<label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
<div class="col-xs-10">
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
</div>
</div>
<div class="form-group row">
@@ -340,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms
### Using the Grid
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
@@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
## 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>`.
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
{% example html %}
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
<p class="form-control-static mb-0">email@example.com</p>
</div>
</div>
<div class="form-group row">
@@ -585,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
{% callout warning %}
#### Caveat about link functionality of `<a>`
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](../buttons/#disabled-state) (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.
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
{% endcallout %}
{% callout danger %}
@@ -704,47 +704,47 @@ Here are some examples of the aforementioned classes in action.
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
{% endcallout %}
{% endcomment %}
{% example html %}
<div class="form-group has-success">
<label class="col-form-label" for="inputSuccess1">Input with success</label>
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
<label class="col-form-label" for="inputWarning1">Input with warning</label>
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
<label class="col-form-label" for="inputDanger1">Input with danger</label>
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Shit, that username's taken. Try another?</div>
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
{% endexample %}
{% example html %}
<div class="checkbox has-success">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
<div class="form-check has-success">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
<div class="checkbox has-warning">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
<div class="form-check has-warning">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
<div class="checkbox has-danger">
<label>
<input type="checkbox" id="checkboxDanger" value="option1">
<div class="form-check has-danger">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
Checkbox with danger
</label>
</div>
@@ -846,7 +846,7 @@ Add other states to your custom forms with our validation classes.
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-danger m-b-0">
<div class="form-group has-danger mb-0">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>

5
docs/components/input-group.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Input group
description: Extend form controls with the input group.
group: components
---
@@ -200,7 +201,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@@ -219,7 +220,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">

3
docs/components/jumbotron.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Jumbotron
description: Lightweight, flexible component for showcasing hero unit style content.
group: components
---
@@ -12,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

7
docs/components/list-group.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: List group
description: Learn about Bootstrap's list group component for rendering series of related content.
group: components
---
@@ -31,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">14</span>
<span class="tag tag-default tag-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">2</span>
<span class="tag tag-default tag-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">1</span>
<span class="tag tag-default tag-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>

13
docs/components/modal.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Modal
description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
group: components
---
@@ -297,7 +298,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
@@ -411,6 +412,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>true</td>
<td>Puts the focus on the modal when initialized.</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
@@ -480,10 +487,6 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
<td>hidden.bs.modal</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>loaded.bs.modal</td>
<td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
</tr>
</tbody>
</table>
</div>

37
docs/components/navbar.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Navbar
description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
group: components
---
@@ -26,7 +27,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
Here's an example of all the sub-components included in a default, light navbar:
@@ -47,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@@ -66,7 +67,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
<!-- As a heading -->
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
@@ -159,7 +160,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
@@ -180,7 +181,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
@@ -201,7 +202,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
@@ -271,25 +272,9 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar navbar-dark bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbarDark" aria-controls="exCollapsingNavbarDark" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<div class="collapse" id="exCollapsingNavbarDark">
<div class="bg-inverse text-muted p-a-1">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
@@ -301,9 +286,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">

1
docs/components/navs.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Navs
description: Documentation and examples for how to use Bootstrap's included navigation components.
group: components
---

1
docs/components/pagination.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Pagination
description: Documentation and examples for showing pagination links.
group: components
---

17
docs/components/popovers.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Popovers
description: Documentation and examples for adding Bootstrap popovers to your site.
group: components
---
@@ -16,8 +17,8 @@ Add small overlay content, like those found in iOS, to any element for housing s
Things to know when using the popover plugin:
- Popovers rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency.
- Popovers rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips/) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -55,7 +56,6 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover-static">
<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>
@@ -63,7 +63,6 @@ Four options are available: top, right, bottom, and left aligned.
</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>
@@ -71,7 +70,6 @@ Four options are available: top, right, bottom, and left aligned.
</div>
<div class="popover popover-bottom">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
@@ -80,7 +78,6 @@ Four options are available: top, right, bottom, and left aligned.
</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>
@@ -141,7 +138,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
{% callout danger %}
#### Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
{% endcallout %}
{% example html %}
@@ -229,7 +226,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<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>
<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="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
<tr>
<td>template</td>
@@ -262,13 +259,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>constraints</td>
<td>Array</td>
<td>'hover focus'</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
</tr>
<tr>
<td>offset</td>
<td>string</td>
<td>'0 0'</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
</tr>
</tbody>
</table>

9
docs/components/progress.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Progress
description: Documentation and examples for using Bootstrap progress bars.
group: components
---
@@ -11,9 +12,9 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
### Example
## Example
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
{% example html %}
@@ -33,7 +34,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
{% endexample %}
### IE9 support
## IE9 support
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
@@ -46,7 +47,7 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
</progress>
{% endexample %}
### Contextual alternatives
## Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.

5
docs/components/scrollspy.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Scrollspy
description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
group: components
---
@@ -14,8 +15,8 @@ group: components
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
<div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-default">
<h3 class="navbar-brand">Project Name</h3>
<nav id="navbar-example2" class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
<li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>

1
docs/components/tag.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Tags
description: Documentation and examples for tags, our small label-badge component.
group: components
---

40
docs/components/tooltips.md
View File

@@ -1,6 +1,7 @@
---
layout: docs
title: Tooltips
description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
group: components
---
@@ -15,7 +16,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a
Things to know when using the tooltip plugin:
- Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -49,26 +50,22 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
<div class="tooltip right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip tooltip-right" role="tooltip">
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
<div class="tooltip bottom" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip tooltip-bottom" role="tooltip">
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
<div class="tooltip left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip tooltip-left" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
@@ -85,6 +82,7 @@ Hover over the buttons below to see their tooltips.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</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="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
</div>
</div>
@@ -103,6 +101,14 @@ Hover over the buttons below to see their tooltips.
</button>
{% endhighlight %}
And with custom HTML added:
{% highlight html %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
{% endhighlight %}
## Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
@@ -128,7 +134,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
<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 tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
@@ -179,14 +185,18 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<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>
<td>
<p>Allow HTML in the tooltip.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</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>How to position the tooltip - top | bottom | left | 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>
@@ -194,7 +204,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<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>
<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="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
<tr>
<td>template</td>
@@ -226,13 +236,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>constraints</td>
<td>Array</td>
<td>[]</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
</tr>
<tr>
<td>offset</td>
<td>string</td>
<td>'0 0'</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
</tr>
</tbody>
</table>

367
docs/components/utilities.md
View File

@@ -1,367 +0,0 @@
---
layout: docs
title: Utility classes
group: components
---
Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Spacing
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
The classes are named using the format: `{property}-{sides}-{size}`
Where *property* is one of:
* `m` - for classes that set `margin`
* `p` - for classes that set `padding`
Where *sides* is one of:
* `t` - for classes that set `margin-top` or `padding-top`
* `b` - for classes that set `margin-bottom` or `padding-bottom`
* `l` - for classes that set `margin-left` or `padding-left`
* `r` - for classes that set `margin-right` or `padding-right`
* `x` - for classes that set both `*-left` and `*-right`
* `y` - for classes that set both `*-top` and `*-bottom`
* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of:
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
Here are some representative examples of these classes:
{% highlight scss %}
.m-t-0 {
margin-top: 0 !important;
}
.m-l-1 {
margin-left: $spacer-x !important;
}
.p-x-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}
{% endhighlight %}
### Horizontal centering
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
<div class="bd-example">
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
</div>
{% highlight html %}
<div class="m-x-auto" style="width: 200px;">
Centered element
</div>
{% endhighlight %}
## Text alignment
Easily realign text to components with text alignment classes.
{% example html %}
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform
Transform text in components with text capitalization classes.
{% example html %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
{% endexample %}
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
## Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
{% example html %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
{% endexample %}
## Contextual colors and backgrounds
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
{% example html %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
{% endexample %}
Contextual text classes also work well on anchors with the provided hover and focus states.
{% example html %}
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
{% example html %}
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
{% endexample %}
{% callout info %}
#### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
{% endcallout %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Widths
Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`.
{% example html %}
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
{% endexample %}
## CSS `display` (`block`, `inline`, `inline-block`)
Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead.
{% example html %}
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
<span class="d-block bg-primary">Block</span>
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Boot that strap!
</div>
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Strap that boot!
</div>
{% endexample %}
## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{% endexample %}
## Responsive floats
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
{% example html %}
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}
{% highlight scss %}
// Related simple non-responsive mixins
.element {
@include pull-left;
}
.another-element {
@include pull-right;
}
{% endhighlight %}
## Clearfix
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
{% highlight html %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
{% endhighlight %}
## Fixed positioning
The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined:
{% highlight scss %}
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
{% endhighlight %}
## Invisible content
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
<div class="invisible">...</div>
{% endhighlight %}
{% highlight scss %}
// Class
.invisible {
visibility: hidden;
}
// Usage as a mixin
.element {
@include invisible;
}
{% endhighlight %}
## Screen readers and keyboard users
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
{% comment %}
Necessary for following [accessibility best practices](../getting-started/#accessibility).
{% endcomment %}
{% highlight html %}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
{% endhighlight %}
## Image replacement
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
{% highlight html %}
<h1 class="text-hide">Custom heading</h1>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.heading {
@include text-hide;
}
{% endhighlight %}
## Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized with modifier classes.
{% highlight html %}
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}