Merge branch 'v4-dev' into v4-docs-streamlined

14 files changed, 645 insertions, 582 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index 4e8c11026..b45d13463 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Cards
-description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
+description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
 group: components
 ---
 
@@ -18,7 +18,7 @@ If you're familiar with Bootstrap 3, cards replace our old panels, wells, and th
 
 Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
 
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of it's parent element. This is easily customized with our various [sizing options](#sizing).
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
 
 {% example html %}
 <div class="card" style="width: 20rem;">
@@ -51,7 +51,7 @@ The building block of a card is the `.card-block`. Use it whenever you need a pa
 
 Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
 
-Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
+Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
 
 {% example html %}
 <div class="card">
@@ -208,7 +208,7 @@ Using the grid, wrap cards in columns and rows as needed.
 
 ### Using utilities
 
-Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height) to quickly set a card's width.
+Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing/) to quickly set a card's width.
 
 {% example html %}
 <div class="card w-75">
@@ -565,7 +565,7 @@ When using card groups with footers, their content will automatically line up.
 
 ### Card decks
 
-Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
+Need a set of equal width and height cards that aren't attached to one another? Use card decks.
 
 {% example html %}
 <div class="card-deck">
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 8dd819fba..ea22f3ef9 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -104,12 +104,6 @@ You can also add the indicators to the carousel, alongside the controls, too.
 {% endexample %}
 
 {% callout warning %}
-#### Transition animations not supported in Internet Explorer 9
-
-Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
-{% endcallout %}
-
-{% callout warning %}
 #### Initial active element required
 
 The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
@@ -149,12 +143,12 @@ Add captions to your slides easily with the `.carousel-caption` element within a
         </div>
       </div>
     </div>
-    <a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev">
-      <span class="icon-prev" aria-hidden="true"></span>
+    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
-    <a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next">
-      <span class="icon-next" aria-hidden="true"></span>
+    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>
@@ -190,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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>interval</td>
-       <td>number</td>
-       <td>5000</td>
-       <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
-     </tr>
-     <tr>
-       <td>keyboard</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Whether the carousel should react to keyboard events.</td>
-     </tr>
-     <tr>
-       <td>pause</td>
-       <td>string | null</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>
-     </tr>
-     <tr>
-       <td>ride</td>
-       <td>string</td>
-       <td>false</td>
-       <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
-     </tr>
-     <tr>
-       <td>wrap</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Whether the carousel should cycle continuously or have hard stops.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>interval</td>
+     <td>number</td>
+     <td>5000</td>
+     <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+   </tr>
+   <tr>
+     <td>keyboard</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Whether the carousel should react to keyboard events.</td>
+   </tr>
+   <tr>
+     <td>pause</td>
+     <td>string | null</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>
+   </tr>
+   <tr>
+     <td>ride</td>
+     <td>string</td>
+     <td>false</td>
+     <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
+   </tr>
+   <tr>
+     <td>wrap</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Whether the carousel should cycle continuously or have hard stops.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Methods
 
@@ -276,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">`).
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>slide.bs.carousel</td>
-       <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
-     </tr>
-     <tr>
-       <td>slid.bs.carousel</td>
-       <td>This event is fired when the carousel has completed its slide transition.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>slide.bs.carousel</td>
+     <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+   </tr>
+   <tr>
+     <td>slid.bs.carousel</td>
+     <td>This event is fired when the carousel has completed its slide transition.</td>
+   </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myCarousel').on('slide.bs.carousel', function () {
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index e3172fa75..f48efd9cc 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -92,7 +92,7 @@ Extend the default collapse behavior to create an accordion.
 
 ## Accessibility
 
-Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
+Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
 
 Additionally, if your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
 
@@ -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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>parent</td>
-       <td>selector</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>
-     </tr>
-     <tr>
-       <td>toggle</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Toggles the collapsible element on invocation</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>parent</td>
+     <td>selector</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>
+   </tr>
+   <tr>
+     <td>toggle</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Toggles the collapsible element on invocation</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Methods
 
@@ -179,36 +177,34 @@ Hides a collapsible element.
 
 Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>show.bs.collapse</td>
-       <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-     </tr>
-     <tr>
-       <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>
-     </tr>
-     <tr>
-       <td>hide.bs.collapse</td>
-       <td>
-        This event is fired immediately when the <code>hide</code> method has been called.
-       </td>
-     </tr>
-     <tr>
-       <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>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>show.bs.collapse</td>
+     <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+   </tr>
+   <tr>
+     <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>
+   </tr>
+   <tr>
+     <td>hide.bs.collapse</td>
+     <td>
+      This event is fired immediately when the <code>hide</code> method has been called.
+     </td>
+   </tr>
+   <tr>
+     <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>
+   </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myCollapsible').on('hidden.bs.collapse', function () {
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index d26de6eef..3c68f9453 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
 Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
 
 {% example html %}
-<div class="dropdown show">
+<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown button
   </button>
@@ -252,7 +252,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div><!-- /btn-group -->
-    <div class="btn-group">
+    <div class="btn-group ml-2">
       <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
       <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
@@ -279,7 +279,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div><!-- /btn-group -->
-    <div class="btn-group">
+    <div class="btn-group ml-2">
       <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
       <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
@@ -344,34 +344,32 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 
 <div class="bd-example">
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group dropup">
-      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        Dropup
-      </button>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
-      </div>
+  <div class="btn-group dropup">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Dropup
+    </button>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
     </div>
+  </div>
 
-    <div class="btn-group dropup">
-      <button type="button" class="btn btn-secondary">
-        Split dropup
-      </button>
-      <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">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
-      </div>
+  <div class="btn-group dropup">
+    <button type="button" class="btn btn-secondary">
+      Split dropup
+    </button>
+    <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">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
     </div>
   </div>
 </div>
@@ -407,7 +405,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
 
 {% example html %}
-<div class="dropdown show">
+<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
   </button>
@@ -510,7 +508,7 @@ $('.dropdown-toggle').dropdown()
 {% endhighlight %}
 
 {% callout info %}
-#### `data-toggle="dropdown"` still required
+##### `data-toggle="dropdown"` still required
 
 Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
 {% endcallout %}
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 88bd37dc2..17a96a113 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Forms
-description: Examples and usage guidelines for from controls, form layouts, and custom forms.
+description: Examples and usage guidelines for form controls, form layouts, and custom forms.
 group: components
 ---
 
@@ -331,7 +331,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]({{ 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.
+For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/) 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.
 
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 3b30f7d8d..4316516ae 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -137,21 +137,33 @@ Add badges to any list group item to show unread counts, activity, and more with
 
 ## Custom content
 
-Add nearly any HTML within, even for linked list groups like the one below.
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
 
 {% example html %}
 <div class="list-group">
-  <a href="#" class="list-group-item list-group-item-action active">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small>3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small>Donec id elit non mi porta.</small>
   </a>
-  <a href="#" class="list-group-item list-group-item-action">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
   </a>
-  <a href="#" class="list-group-item list-group-item-action">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
   </a>
 </div>
 {% endexample %}
diff --git a/docs/components/modal.md b/docs/components/modal.md
index b311ebf35..d61151f8f 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -19,7 +19,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
 - Clicking on the modal "backdrop" will automatically close the modal.
 - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
-- Modal's use `position: fixed`, which can sometimes be a bit particular about it's rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
+- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
 - One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
 - Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript.
 
@@ -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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>backdrop</td>
-       <td>boolean or the string <code>'static'</code></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>
-     </tr>
-     <tr>
-       <td>keyboard</td>
-       <td>boolean</td>
-       <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>
-       <td>true</td>
-       <td>Shows the modal when initialized.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>backdrop</td>
+     <td>boolean or the string <code>'static'</code></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>
+   </tr>
+   <tr>
+     <td>keyboard</td>
+     <td>boolean</td>
+     <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>
+     <td>true</td>
+     <td>Shows the modal when initialized.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### 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">`).
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <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>
-     </tr>
-     <tr>
-       <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>
-     </tr>
-     <tr>
-       <td>hide.bs.modal</td>
-       <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-     </tr>
-     <tr>
-       <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>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <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>
+   </tr>
+   <tr>
+     <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>
+   </tr>
+   <tr>
+     <td>hide.bs.modal</td>
+     <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+   </tr>
+   <tr>
+     <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>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myModal').on('hidden.bs.modal', function (e) {
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index ea4245b46..993661558 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -30,7 +30,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 
 - `.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](#collapsible-content) behaviors.
+- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
 - `.form-inline` for any form controls and actions.
 - `.navbar-text` for adding vertically centered strings of text.
 - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
@@ -401,7 +401,7 @@ When the container is within your navbar, its horizontal padding is removed at b
 
 ## Placement
 
-Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.
+Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, isn't fully supported in every browser.**
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
@@ -410,17 +410,23 @@ Navbars can be statically placed (their default behavior), static without rounde
 {% endexample %}
 
 {% example html %}
-<nav class="navbar navbar-fixed-top navbar-light bg-faded">
+<nav class="navbar fixed-top navbar-light bg-faded">
   <a class="navbar-brand" href="#">Fixed top</a>
 </nav>
 {% endexample %}
 
 {% example html %}
-<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
+<nav class="navbar fixed-bottom navbar-light bg-faded">
   <a class="navbar-brand" href="#">Fixed bottom</a>
 </nav>
 {% endexample %}
 
+{% example html %}
+<nav class="navbar sticky-top navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Sticky top</a>
+</nav>
+{% endexample %}
+
 ## Responsive behaviors
 
 Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
diff --git a/docs/components/navs.md b/docs/components/navs.md
index fed519e8e..5b9397fc1 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -206,7 +206,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
 
 ## Working with flex utilities
 
-If you need responsive nav variations, consider using a series of [flex utilities](). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 {% example html %}
 <nav class="nav nav-pills flex-column flex-sm-row">
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 0273e8efe..03c3a56ec 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -141,7 +141,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 
 ## Alignment
 
-Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox).
+Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
 
 {% example html %}
 <nav aria-label="Page navigation example">
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 1cd96da49..e4ace2ed9 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">Name</th>
-        <th style="width: 100px;">Type</th>
-        <th style="width: 50px;">Default</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>Apply a CSS fade transition to the popover</td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | false</td>
-        <td>false</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>
-        </td>
-      </tr>
-      <tr>
-        <td>content</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <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>
-        </td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-         <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>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
-        </td>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</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>
-      </tr>
-      <tr>
-        <td>placement</td>
-        <td>string | function</td>
-        <td>'right'</td>
-        <td>
-          <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>
-        </td>
-      </tr>
-      <tr>
-        <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="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
-      </tr>
-      <tr>
-        <td>template</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>
-          <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>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>The outermost wrapper element should have the <code>.popover</code> class.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <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>
-        </td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</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>
-      </tr>
-      <tr>
-        <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://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://tether.io/#offset">offset docs</a>.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 100px;">Name</th>
+      <th style="width: 100px;">Type</th>
+      <th style="width: 50px;">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>animation</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Apply a CSS fade transition to the popover</td>
+    </tr>
+    <tr>
+      <td>container</td>
+      <td>string | false</td>
+      <td>false</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>
+      </td>
+    </tr>
+    <tr>
+      <td>content</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <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>
+      </td>
+    </tr>
+    <tr>
+      <td>delay</td>
+      <td>number | object</td>
+      <td>0</td>
+      <td>
+       <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>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+      </td>
+    </tr>
+    <tr>
+      <td>html</td>
+      <td>boolean</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>
+    </tr>
+    <tr>
+      <td>placement</td>
+      <td>string | function</td>
+      <td>'right'</td>
+      <td>
+        <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>
+      </td>
+    </tr>
+    <tr>
+      <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="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+    </tr>
+    <tr>
+      <td>template</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>
+        <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>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>The outermost wrapper element should have the <code>.popover</code> class.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <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>
+      </td>
+    </tr>
+    <tr>
+      <td>trigger</td>
+      <td>string</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>
+    </tr>
+    <tr>
+      <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://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://tether.io/#offset">offset docs</a>.</td>
+    </tr>
+  </tbody>
+</table>
 
 {% callout info %}
 #### Data attributes for individual popovers
@@ -310,34 +308,32 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.popover</td>
-        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-      </tr>
-      <tr>
-        <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>
-      </tr>
-      <tr>
-        <td>hide.bs.popover</td>
-        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-      </tr>
-      <tr>
-        <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>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.bs.popover</td>
+      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+    </tr>
+    <tr>
+      <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>
+    </tr>
+    <tr>
+      <td>hide.bs.popover</td>
+      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+    </tr>
+    <tr>
+      <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>
+    </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myPopover').on('hidden.bs.popover', function () {
diff --git a/docs/components/progress.md b/docs/components/progress.md
index d137fad14..802a42a29 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -5,71 +5,147 @@ description: Documentation and examples for using Bootstrap progress bars.
 group: components
 ---
 
-Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.
+Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-## Example
+## How it works
 
-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.
+Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
+
+- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
+- We use the inner `.progress-bar` to indicate the progress so far.
+- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
+- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
+
+Put that all together, and you have the following examples.
+
+{% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
+
+Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
+
+{% example html %}
+<div class="progress">
+  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
+
+## Customizing
+
+Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more.
+
+### Labels
+
+Add labels to your progress bars by placing text within the `.progress-bar`.
 
 {% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+</div>
+{% endexample %}
+
+### Height
 
-<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
-<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
+We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly.
 
-<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
-<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
+{% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
 
-<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
-<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
+### Backgrounds
 
-<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
-<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
+Use background utility classes to change the appearance of individual progress bars.
 
-<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
-<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
+{% example html %}
+<div class="progress">
+  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 {% endexample %}
 
-## Contextual alternatives
+### Multiple bars
 
-Progress bars use some of the same button and alert classes for consistent styles.
+Include multiple progress bars in a progress component if you need.
 
 {% example html %}
-<progress class="progress progress-success" value="25" max="100"></progress>
-<progress class="progress progress-info" value="50" max="100"></progress>
-<progress class="progress progress-warning" value="75" max="100"></progress>
-<progress class="progress progress-danger" value="100" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 {% endexample %}
 
 ### Striped
 
-Uses a gradient to create a striped effect.
+Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
 
 {% example html %}
-<progress class="progress progress-striped" value="10" max="100"></progress>
-<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
-<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
-<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
-<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 {% endexample %}
 
 ### Animated stripes
 
-The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
+The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
 
-**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
+**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations.
 
 <div class="bd-example">
-  <progress class="progress progress-striped" value="25" max="100"></progress>
-  <button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
+  <div class="progress">
+    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+  </div>
+  <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>
 
 {% highlight html %}
-<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+</div>
 {% endhighlight %}
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 74829267e..a1f04ad9c 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 100px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>offset</td>
-       <td>number</td>
-       <td>10</td>
-       <td>Pixels to offset from top when calculating position of scroll.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 100px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>offset</td>
+     <td>number</td>
+     <td>10</td>
+     <td>Pixels to offset from top when calculating position of scroll.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>activate.bs.scrollspy</td>
-       <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
-    </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>activate.bs.scrollspy</td>
+     <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+  </tr>
+  </tbody>
+</table>
+
 {% highlight js %}
 $('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 31fb2c1c7..825782ac2 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -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=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">Name</th>
-        <th style="width: 100px;">Type</th>
-        <th style="width: 50px;">Default</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>Apply a CSS fade transition to the tooltip</td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | element | false</td>
-        <td>false</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>
-       </td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-         <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>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
-        </td>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</td>
-        <td>false</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.</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>
-      <tr>
-        <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="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
-      </tr>
-      <tr>
-        <td>template</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>
-          <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><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
-          <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <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>
-        </td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</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>
-      </tr>
-      <tr>
-        <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://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://tether.io/#constraints">offset docs</a>.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 100px;">Name</th>
+      <th style="width: 100px;">Type</th>
+      <th style="width: 50px;">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>animation</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Apply a CSS fade transition to the tooltip</td>
+    </tr>
+    <tr>
+      <td>container</td>
+      <td>string | element | false</td>
+      <td>false</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>
+     </td>
+    </tr>
+    <tr>
+      <td>delay</td>
+      <td>number | object</td>
+      <td>0</td>
+      <td>
+       <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>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+      </td>
+    </tr>
+    <tr>
+      <td>html</td>
+      <td>boolean</td>
+      <td>false</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.</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>
+    <tr>
+      <td>selector</td>
+      <td>string</td>
+      <td>false</td>
+      <td>If a selector is provided, tooltip 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>
+      <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>
+        <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><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+        <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <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>
+      </td>
+    </tr>
+    <tr>
+      <td>trigger</td>
+      <td>string</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>
+    </tr>
+    <tr>
+      <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://tether.io/#constraints">constraint docs</a>.</td>
+    </tr>
+    <tr>
+      <td>offset</td>
+      <td>string</td>
+      <td>'0 0'</td>
+      <td>Offset of the tooltip relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
+    </tr>
+  </tbody>
+</table>
 
 {% callout info %}
 #### Data attributes for individual tooltips
@@ -286,34 +284,32 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.tooltip</td>
-        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-      </tr>
-      <tr>
-        <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>
-      </tr>
-      <tr>
-        <td>hide.bs.tooltip</td>
-        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-      </tr>
-      <tr>
-        <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>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.bs.tooltip</td>
+      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+    </tr>
+    <tr>
+      <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>
+    </tr>
+    <tr>
+      <td>hide.bs.tooltip</td>
+      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+    </tr>
+    <tr>
+      <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>
+    </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myTooltip').on('hidden.bs.tooltip', function () {