5 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!17021v4
All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/#content)
[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/)
@@ -109,7 +109,7 @@ The `.active` class needs to be added to one of the slides. Otherwise, the carou
### With captions
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
@@ -342,7 +342,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{% endcallout %}
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/invisible-content/) instead.
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
<p><ahref="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<divclass="row">
<divclass="col-6 col-sm-3">
.col-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
<divclass="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<divclass="clearfix d-sm-none"></div>
<divclass="col-6 col-sm-3">.col-6 .col-sm-3</div>
<divclass="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
<hr>
<h3>Offset, push, and pull resets</h3>
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
@@ -238,7 +238,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
### Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/).
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
@@ -25,7 +25,7 @@ Below is an example of a single media object. Only two classes are required—th
{% callout warning %}
##### Flexbug #12: Inline elements aren't treated as flex items
Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/), as an easy fix.
Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/), as an easy fix.
**Source:**[Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items)
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
