Add callout about prefers-reduced-motion to all components currently …

…using animation which are affected

site/docs/4.1/components/carousel.md

@@ -12,6 +12,8 @@ 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.).
 
+{% include callout-info-prefersreducedmotion.md %}
+
 Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
 
 Lastly, if you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).

site/docs/4.1/components/collapse.md

@@ -10,6 +10,8 @@ toc: true
 
 The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
 
+{% include callout-info-prefersreducedmotion.md %}
+
 ## Example
 
 Click the buttons below to show and hide another element via class changes:

site/docs/4.1/components/modal.md

@@ -23,6 +23,8 @@ $('#myModal').on('shown.bs.modal', function () {
 })
 {% endhighlight %}
 
+{% include callout-info-prefersreducedmotion.md %}
+
 Keep reading for demos and usage guidelines.
 
 ## Examples

site/docs/4.1/components/navbar.md

@@ -17,6 +17,8 @@ Here's what you need to know before getting started with the navbar:
 - Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
+{% include callout-info-prefersreducedmotion.md %}
+
 Read on for an example and list of supported sub-components.
 
 ## Supported content

site/docs/4.1/components/popovers.md

@@ -21,6 +21,8 @@ Things to know when using the popover plugin:
 - When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your `<a>`s to avoid this behavior.
 - Popovers must be hidden before their corresponding elements have been removed from the DOM.
 
+{% include callout-info-prefersreducedmotion.md %}
+
 Keep reading to see how popovers work with some examples.
 
 ## Example: Enable popovers everywhere

site/docs/4.1/components/tooltips.md

@@ -20,6 +20,8 @@ Things to know when using the tooltip plugin:
 - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
 - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
 
+{% include callout-info-prefersreducedmotion.md %}
+
 Got all that? Great, let's see how they work with some examples.
 
 ## Example: Enable tooltips everywhere