Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-05-16 08:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move .table-responsive from wrapper to .table

Browse source
This commit is contained in:
Quy 2016-12-31 16:12:28 -08:00 committed by Mark Otto
parent bccb8ce213
commit ff8d28cf25
11 changed files with 785 additions and 822 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
docs/browser-bugs.md
View file

@ -15,28 +15,26 @@ See also:
* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753) * [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o) * [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
<div class="table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover"> <thead>
<thead> <tr>
<tr> <th>Browser(s)</th>
<th>Browser(s)</th> <th>Summary of bug</th>
<th>Summary of bug</th> <th>Upstream bug(s)</th>
<th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th>
<th>Bootstrap issue(s)</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {% for bug in site.data.browser-bugs %}
{% for bug in site.data.browser-bugs %} <tr>
<tr> <td>{{ bug.browser }}</td>
<td>{{ bug.browser }}</td> <td>{{ bug.summary | markdownify | bugify }}</td>
<td>{{ bug.summary | markdownify | bugify }}</td> <td>{{ bug.upstream_bug | bugify }}</td>
<td>{{ bug.upstream_bug | bugify }}</td> <td>{{ bug.origin | bugify }}</td>
<td>{{ bug.origin | bugify }}</td> </tr>
</tr> {% endfor %}
{% endfor %} </tbody>
</tbody> </table>
</table>
</div>
# Most wanted features # Most wanted features
@ -44,25 +42,23 @@ There are several features specified in Web standards which would allow us to ma
We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented. We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.
<div class="table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover"> <thead>
<thead> <tr>
<tr> <th>Browser(s)</th>
<th>Browser(s)</th> <th>Summary of feature</th>
<th>Summary of feature</th> <th>Upstream issue(s)</th>
<th>Upstream issue(s)</th> <th>Bootstrap issue(s)</th>
<th>Bootstrap issue(s)</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {% for feat in site.data.browser-features %}
{% for feat in site.data.browser-features %} <tr>
<tr> <td>{{ feat.browser }}</td>
<td>{{ feat.browser }}</td> <td>{{ feat.summary | markdownify | bugify }}</td>
<td>{{ feat.summary | markdownify | bugify }}</td> <td>{{ feat.upstream_bug | bugify }}</td>
<td>{{ feat.upstream_bug | bugify }}</td> <td>{{ feat.origin | bugify }}</td>
<td>{{ feat.origin | bugify }}</td> </tr>
</tr> {% endfor %}
{% endfor %} </tbody>
</tbody> </table>
</table>
</div>

124
docs/components/carousel.md
View file

@ -184,50 +184,48 @@ $('.carousel').carousel()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>interval</td>
<td>interval</td> <td>number</td>
<td>number</td> <td>5000</td>
<td>5000</td> <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> </tr>
</tr> <tr>
<tr> <td>keyboard</td>
<td>keyboard</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Whether the carousel should react to keyboard events.</td>
<td>Whether the carousel should react to keyboard events.</td> </tr>
</tr> <tr>
<tr> <td>pause</td>
<td>pause</td> <td>string | null</td>
<td>string | null</td> <td>"hover"</td>
<td>"hover"</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>
<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> <tr>
<tr> <td>ride</td>
<td>ride</td> <td>string</td>
<td>string</td> <td>false</td>
<td>false</td> <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> </tr>
</tr> <tr>
<tr> <td>wrap</td>
<td>wrap</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Whether the carousel should cycle continuously or have hard stops.</td>
<td>Whether the carousel should cycle continuously or have hard stops.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
### Methods ### Methods
@ -270,26 +268,24 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>slide.bs.carousel</td>
<td>slide.bs.carousel</td> <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> </tr>
</tr> <tr>
<tr> <td>slid.bs.carousel</td>
<td>slid.bs.carousel</td> <td>This event is fired when the carousel has completed its slide transition.</td>
<td>This event is fired when the carousel has completed its slide transition.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () { $('#myCarousel').on('slide.bs.carousel', function () {

108
docs/components/collapse.md
View file

@ -124,32 +124,30 @@ $('.collapse').collapse()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>parent</td>
<td>parent</td> <td>selector</td>
<td>selector</td> <td>false</td>
<td>false</td> <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td>
<td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td> </tr>
</tr> <tr>
<tr> <td>toggle</td>
<td>toggle</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Toggles the collapsible element on invocation</td>
<td>Toggles the collapsible element on invocation</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
### Methods ### Methods
@ -179,36 +177,34 @@ Hides a collapsible element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>show.bs.collapse</td>
<td>show.bs.collapse</td> <td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td> </tr>
</tr> <tr>
<tr> <td>shown.bs.collapse</td>
<td>shown.bs.collapse</td> <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> </tr>
</tr> <tr>
<tr> <td>hide.bs.collapse</td>
<td>hide.bs.collapse</td> <td>
<td> This event is fired immediately when the <code>hide</code> method has been called.
This event is fired immediately when the <code>hide</code> method has been called. </td>
</td> </tr>
</tr> <tr>
<tr> <td>hidden.bs.collapse</td>
<td>hidden.bs.collapse</td> <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () { $('#myCollapsible').on('hidden.bs.collapse', function () {

128
docs/components/modal.md
View file

@ -508,44 +508,42 @@ Call a modal with id `myModal` with a single line of JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>backdrop</td>
<td>backdrop</td> <td>boolean or the string <code>'static'</code></td>
<td>boolean or the string <code>'static'</code></td> <td>true</td>
<td>true</td> <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> </tr>
</tr> <tr>
<tr> <td>keyboard</td>
<td>keyboard</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Closes the modal when escape key is pressed</td>
<td>Closes the modal when escape key is pressed</td> </tr>
</tr> <tr>
<tr> <td>focus</td>
<td>focus</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Puts the focus on the modal when initialized.</td>
<td>Puts the focus on the modal when initialized.</td> </tr>
</tr> <tr>
<tr> <td>show</td>
<td>show</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Shows the modal when initialized.</td>
<td>Shows the modal when initialized.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
### Methods ### Methods
@ -581,34 +579,32 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>show.bs.modal</td>
<td>show.bs.modal</td> <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
<td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr>
</tr> <tr>
<tr> <td>shown.bs.modal</td>
<td>shown.bs.modal</td> <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr>
</tr> <tr>
<tr> <td>hide.bs.modal</td>
<td>hide.bs.modal</td> <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> </tr>
</tr> <tr>
<tr> <td>hidden.bs.modal</td>
<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>
<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> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) { $('#myModal').on('hidden.bs.modal', function (e) {

266
docs/components/popovers.md
View file

@ -163,113 +163,111 @@ Enable popovers via JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. 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 table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Type</th>
<th style="width: 100px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>animation</td>
<td>animation</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Apply a CSS fade transition to the popover</td>
<td>Apply a CSS fade transition to the popover</td> </tr>
</tr> <tr>
<tr> <td>container</td>
<td>container</td> <td>string | false</td>
<td>string | false</td> <td>false</td>
<td>false</td> <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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>content</td>
<td>content</td> <td>string | element | function</td>
<td>string | element | function</td> <td>''</td>
<td>''</td> <td>
<td> <p>Default content value if <code>data-content</code> attribute isn't present.</p>
<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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>delay</td>
<td>delay</td> <td>number | object</td>
<td>number | object</td> <td>0</td>
<td>0</td> <td>
<td> <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<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>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>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> </td>
</td> </tr>
</tr> <tr>
<tr> <td>html</td>
<td>html</td> <td>boolean</td>
<td>boolean</td> <td>false</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>
<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> <tr>
<tr> <td>placement</td>
<td>placement</td> <td>string | function</td>
<td>string | function</td> <td>'right'</td>
<td>'right'</td> <td>
<td> <p>How to position the popover - top | bottom | left | right.</p>
<p>How to position the popover - top | bottom | left | 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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>selector</td>
<td>selector</td> <td>string</td>
<td>string</td> <td>false</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="https://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> <tr>
<tr> <td>template</td>
<td>template</td> <td>string</td>
<td>string</td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td>
<td> <p>Base HTML to use when creating the popover.</p>
<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>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>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><code>.popover-arrow</code> will become the popover's arrow.</p> <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p> </td>
</td> </tr>
</tr> <tr>
<tr> <td>title</td>
<td>title</td> <td>string | element | function</td>
<td>string | element | function</td> <td>''</td>
<td>''</td> <td>
<td> <p>Default title value if <code>title</code> attribute isn't present.</p>
<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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>trigger</td>
<td>trigger</td> <td>string</td>
<td>string</td> <td>'click'</td>
<td>'click'</td> <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> </tr>
</tr> <tr>
<tr> <td>constraints</td>
<td>constraints</td> <td>Array</td>
<td>Array</td> <td>'hover focus'</td>
<td>'hover focus'</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>
<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> <tr>
<tr> <td>offset</td>
<td>offset</td> <td>string</td>
<td>string</td> <td>'0 0'</td>
<td>'0 0'</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>
<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>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% callout info %} {% callout info %}
#### Data attributes for individual popovers #### Data attributes for individual popovers
@ -310,34 +308,32 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>show.bs.popover</td>
<td>show.bs.popover</td> <td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td> </tr>
</tr> <tr>
<tr> <td>shown.bs.popover</td>
<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>
<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> <tr>
<tr> <td>hide.bs.popover</td>
<td>hide.bs.popover</td> <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> </tr>
</tr> <tr>
<tr> <td>hidden.bs.popover</td>
<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>
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () { $('#myPopover').on('hidden.bs.popover', function () {

69
docs/components/scrollspy.md
View file

@ -117,45 +117,42 @@ $('[data-spy="scroll"]').each(function () {
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Type</th>
<th style="width: 100px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>offset</td>
<td>offset</td> <td>number</td>
<td>number</td> <td>10</td>
<td>10</td> <td>Pixels to offset from top when calculating position of scroll.</td>
<td>Pixels to offset from top when calculating position of scroll.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>activate.bs.scrollspy</td>
<td>activate.bs.scrollspy</td> <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () { $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something… // do something…

254
docs/components/tooltips.md
View file

@ -146,107 +146,105 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. 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 table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 100px;">Name</th>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Type</th>
<th style="width: 100px;">Type</th> <th style="width: 50px;">Default</th>
<th style="width: 50px;">Default</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>animation</td>
<td>animation</td> <td>boolean</td>
<td>boolean</td> <td>true</td>
<td>true</td> <td>Apply a CSS fade transition to the tooltip</td>
<td>Apply a CSS fade transition to the tooltip</td> </tr>
</tr> <tr>
<tr> <td>container</td>
<td>container</td> <td>string | element | false</td>
<td>string | element | false</td> <td>false</td>
<td>false</td> <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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>delay</td>
<td>delay</td> <td>number | object</td>
<td>number | object</td> <td>0</td>
<td>0</td> <td>
<td> <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<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>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>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> </td>
</td> </tr>
</tr> <tr>
<tr> <td>html</td>
<td>html</td> <td>boolean</td>
<td>boolean</td> <td>false</td>
<td>false</td> <td>
<td> <p>Allow HTML in the tooltip.</p>
<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>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>
<p>Use text if you're worried about XSS attacks.</p> </td>
</td> </tr>
</tr> <tr>
<tr> <td>placement</td>
<td>placement</td> <td>string | function</td>
<td>string | function</td> <td>'top'</td>
<td>'top'</td> <td>
<td> <p>How to position the tooltip - top | bottom | left | 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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>selector</td>
<td>selector</td> <td>string</td>
<td>string</td> <td>false</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="https://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> <tr>
<tr> <td>template</td>
<td>template</td> <td>string</td>
<td>string</td> <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td>
<td> <p>Base HTML to use when creating the tooltip.</p>
<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>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><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> </td>
</td> </tr>
</tr> <tr>
<tr> <td>title</td>
<td>title</td> <td>string | element | function</td>
<td>string | element | function</td> <td>''</td>
<td>''</td> <td>
<td> <p>Default title value if <code>title</code> attribute isn't present.</p>
<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>
<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>
</td> </tr>
</tr> <tr>
<tr> <td>trigger</td>
<td>trigger</td> <td>string</td>
<td>string</td> <td>'hover focus'</td>
<td>'hover focus'</td> <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> </tr>
</tr> <tr>
<tr> <td>constraints</td>
<td>constraints</td> <td>Array</td>
<td>Array</td> <td>[]</td>
<td>[]</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>
<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> <tr>
<tr> <td>offset</td>
<td>offset</td> <td>string</td>
<td>string</td> <td>'0 0'</td>
<td>'0 0'</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>
<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>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% callout info %} {% callout info %}
#### Data attributes for individual tooltips #### Data attributes for individual tooltips
@ -286,34 +284,32 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th style="width: 150px;">Event Type</th>
<th style="width: 150px;">Event Type</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>show.bs.tooltip</td>
<td>show.bs.tooltip</td> <td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td> </tr>
</tr> <tr>
<tr> <td>shown.bs.tooltip</td>
<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>
<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> <tr>
<tr> <td>hide.bs.tooltip</td>
<td>hide.bs.tooltip</td> <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> </tr>
</tr> <tr>
<tr> <td>hidden.bs.tooltip</td>
<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>
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
{% highlight js %} {% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () { $('#myTooltip').on('hidden.bs.tooltip', function () {

2
docs/content/tables.md
View file

@ -765,7 +765,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
</div> </div>
{% highlight html %} {% highlight html %}
<table class="table table-responsive""> <table class="table table-responsive">
... ...
</table> </table>
{% endhighlight %} {% endhighlight %}

146
docs/getting-started/browsers-devices.md
View file

@ -22,86 +22,82 @@ Alternative browsers which use the latest version of WebKit, Blink, or Gecko, wh
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <td></td>
<td></td> <th>Chrome</th>
<th>Chrome</th> <th>Firefox</th>
<th>Firefox</th> <th>Safari</th>
<th>Safari</th> <th>Android Browser &amp; WebView</th>
<th>Android Browser &amp; WebView</th> <th>Microsoft Edge</th>
<th>Microsoft Edge</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row">Android</th>
<th scope="row">Android</th> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-success">Android v5.0+ supported</td>
<td class="text-success">Android v5.0+ supported</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> </tr>
</tr> <tr>
<tr> <th scope="row">iOS</th>
<th scope="row">iOS</th> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> </tr>
</tr> <tr>
<tr> <th scope="row">Windows 10 Mobile</th>
<th scope="row">Windows 10 Mobile</th> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
### Desktop browsers ### Desktop browsers
Similarly, the latest versions of most desktop browsers are supported. Similarly, the latest versions of most desktop browsers are supported.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <td></td>
<td></td> <th>Chrome</th>
<th>Chrome</th> <th>Firefox</th>
<th>Firefox</th> <th>Internet Explorer</th>
<th>Internet Explorer</th> <th>Microsoft Edge</th>
<th>Microsoft Edge</th> <th>Opera</th>
<th>Opera</th> <th>Safari</th>
<th>Safari</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row">Mac</th>
<th scope="row">Mac</th> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-muted">N/A</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> </tr>
</tr> <tr>
<tr> <th scope="row">Windows</th>
<th scope="row">Windows</th> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported, IE10+</td>
<td class="text-success">Supported, IE10+</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
<td class="text-success">Supported</td> <td class="text-danger">Not supported</td>
<td class="text-danger">Not supported</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox. For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox.

142
docs/layout/grid.md
View file

@ -57,78 +57,76 @@ While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for
See how aspects of the Bootstrap grid system work across multiple devices with a handy table. 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 table-responsive">
<table class="table table-bordered table-striped"> <thead>
<thead> <tr>
<tr> <th></th>
<th></th> <th class="text-center">
<th class="text-center"> Extra small<br>
Extra small<br> <small>&lt;576px</small>
<small>&lt;576px</small> </th>
</th> <th class="text-center">
<th class="text-center"> Small<br>
Small<br> <small>&ge;576px</small>
<small>&ge;576px</small> </th>
</th> <th class="text-center">
<th class="text-center"> Medium<br>
Medium<br> <small>&ge;768px</small>
<small>&ge;768px</small> </th>
</th> <th class="text-center">
<th class="text-center"> Large<br>
Large<br> <small>&ge;992px</small>
<small>&ge;992px</small> </th>
</th> <th class="text-center">
<th class="text-center"> Extra large<br>
Extra large<br> <small>&ge;1200px</small>
<small>&ge;1200px</small> </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th class="text-nowrap" scope="row">Grid behavior</th>
<th class="text-nowrap" scope="row">Grid behavior</th> <td>Horizontal at all times</td>
<td>Horizontal at all times</td> <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
<td colspan="4">Collapsed to start, horizontal above breakpoints</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Max container width</th>
<th class="text-nowrap" scope="row">Max container width</th> <td>None (auto)</td>
<td>None (auto)</td> <td>540px</td>
<td>540px</td> <td>720px</td>
<td>720px</td> <td>960px</td>
<td>960px</td> <td>1140px</td>
<td>1140px</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Class prefix</th>
<th class="text-nowrap" scope="row">Class prefix</th> <td><code>.col-</code></td>
<td><code>.col-</code></td> <td><code>.col-sm-</code></td>
<td><code>.col-sm-</code></td> <td><code>.col-md-</code></td>
<td><code>.col-md-</code></td> <td><code>.col-lg-</code></td>
<td><code>.col-lg-</code></td> <td><code>.col-xl-</code></td>
<td><code>.col-xl-</code></td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row"># of columns</th>
<th class="text-nowrap" scope="row"># of columns</th> <td colspan="5">12</td>
<td colspan="5">12</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Gutter width</th>
<th class="text-nowrap" scope="row">Gutter width</th> <td colspan="5">30px (15px on each side of a column)</td>
<td colspan="5">30px (15px on each side of a column)</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Nestable</th>
<th class="text-nowrap" scope="row">Nestable</th> <td colspan="5">Yes</td>
<td colspan="5">Yes</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Offsets</th>
<th class="text-nowrap" scope="row">Offsets</th> <td colspan="5">Yes</td>
<td colspan="5">Yes</td> </tr>
</tr> <tr>
<tr> <th class="text-nowrap" scope="row">Column ordering</th>
<th class="text-nowrap" scope="row">Column ordering</th> <td colspan="5">Yes</td>
<td colspan="5">Yes</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
## Auto-layout columns ## Auto-layout columns

284
docs/layout/responsive-utilities.md
View file

@ -22,153 +22,149 @@ Try to use these on a limited basis and avoid creating entirely different versio
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. * You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. * These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
<div class="table-responsive"> <table class="table table-bordered table-striped responsive-utilities table-responsive">
<table class="table table-bordered table-striped responsive-utilities"> <thead>
<thead> <tr>
<tr> <th></th>
<th></th> <th>
<th> Extra small devices
Extra small devices <small>Portrait phones (&lt;544px)</small>
<small>Portrait phones (&lt;544px)</small> </th>
</th> <th>
<th> Small devices
Small devices <small>Landscape phones (&ge;544px - &lt;768px)</small>
<small>Landscape phones (&ge;544px - &lt;768px)</small> </th>
</th> <th>
<th> Medium devices
Medium devices <small>Tablets (&ge;768px - &lt;992px)</small>
<small>Tablets (&ge;768px - &lt;992px)</small> </th>
</th> <th>
<th> Large devices
Large devices <small>Desktops (&ge;992px - &lt;1200px)</small>
<small>Desktops (&ge;992px - &lt;1200px)</small> </th>
</th> <th>
<th> Extra large devices
Extra large devices <small>Desktops (&ge;1200px)</small>
<small>Desktops (&ge;1200px)</small> </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row"><code>.hidden-xs-down</code></th>
<th scope="row"><code>.hidden-xs-down</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-sm-down</code></th>
<th scope="row"><code>.hidden-sm-down</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-md-down</code></th>
<th scope="row"><code>.hidden-md-down</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-lg-down</code></th>
<th scope="row"><code>.hidden-lg-down</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-xl-down</code></th>
<th scope="row"><code>.hidden-xl-down</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-xs-up</code></th>
<th scope="row"><code>.hidden-xs-up</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-sm-up</code></th>
<th scope="row"><code>.hidden-sm-up</code></th> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-md-up</code></th>
<th scope="row"><code>.hidden-md-up</code></th> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-lg-up</code></th>
<th scope="row"><code>.hidden-lg-up</code></th> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> <tr>
<tr> <th scope="row"><code>.hidden-xl-up</code></th>
<th scope="row"><code>.hidden-xl-up</code></th> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<h2 id="responsive-utilities-print">Print classes</h2> <h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p> <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
<div class="table-responsive"> <table class="table table-bordered table-striped responsive-utilities table-responsive">
<table class="table table-bordered table-striped responsive-utilities"> <thead>
<thead> <tr>
<tr> <th>Class</th>
<th>Class</th> <th>Browser</th>
<th>Browser</th> <th>Print</th>
<th>Print</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th><code>.visible-print-block</code></th>
<th><code>.visible-print-block</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
<td class="is-visible">Visible<br>(as <code>display: block</code>)</td> </tr>
</tr> <tr>
<tr> <th><code>.visible-print-inline</code></th>
<th><code>.visible-print-inline</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
<td class="is-visible">Visible<br>(as <code>display: inline</code>)</td> </tr>
</tr> <tr>
<tr> <th><code>.visible-print-inline-block</code></th>
<th><code>.visible-print-inline-block</code></th> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
<td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td> </tr>
</tr> <tr>
<tr> <th><code>.hidden-print</code></th>
<th><code>.hidden-print</code></th> <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
## Test cases ## Test cases