diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 12c638be8185a45937fc2987b7eaa07dd5c391b5..9b16a3729e1dcfa31259e8104c552cf6d3862034 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -9,7 +9,7 @@ The carousel is a slideshow for cycling through a series of content, built with
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.**
+Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
## Contents
@@ -18,9 +18,9 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit
## Example
-While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
+Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
-Please be aware the carousel doesn't automatically normalize carousel slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content.
+Be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page.
### Slides only
@@ -103,7 +103,6 @@ You can also add the indicators to the carousel, alongside the controls, too.
</div>
{% endexample %}
-
{% callout warning %}
#### Transition animations not supported in Internet Explorer 9
@@ -116,45 +115,45 @@ Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 does
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
{% endcallout %}
-### Optional captions
+### With captions
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
+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 }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
<div class="bd-example">
- <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
+ <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
- <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
- <li data-target="#carousel-example-captions" data-slide-to="1"></li>
- <li data-target="#carousel-example-captions" data-slide-to="2"></li>
+ <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
+ <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
- <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
- <div class="carousel-caption">
+ <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+ <div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
- <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
- <div class="carousel-caption">
+ <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+ <div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
- <img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
- <div class="carousel-caption">
+ <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+ <div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
- <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
+ <a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
- <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
+ <a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
@@ -164,25 +163,15 @@ Add captions to your slides easily with the `.carousel-caption` element within a
{% highlight html %}
<div class="carousel-item">
<img src="..." alt="...">
- <div class="carousel-caption">
+ <div class="carousel-caption d-none d-md-block">
<h3>...</h3>
<p>...</p>
</div>
</div>
{% endhighlight %}
-{% callout danger %}
-#### Accessibility issue
-
-The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
-{% endcallout %}
-
## Usage
-### Multiple carousels
-
-Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
-
### Via data attributes
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.