Merge branch 'v4-dev' into btn_input_split_variables

62 files changed, 155 insertions, 79 deletions

diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md
index ac6299f6f..af2648267 100644
--- a/docs/4.0/components/carousel.md
+++ b/docs/4.0/components/carousel.md
@@ -14,7 +14,7 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit
 
 Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
 
-Lastly, if you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+Lastly, if you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 
 ## Example
 
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index 2c467166e..f91ff5312 100644
--- a/docs/4.0/components/dropdowns.md
+++ b/docs/4.0/components/dropdowns.md
@@ -12,7 +12,7 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and
 
 Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
 
-If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 
 ## Accessibility
 
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 84891d841..abf6c1e67 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -264,11 +264,11 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
 {% example html %}
 <form>
   <div class="form-group">
-    <label class="form-control-label" for="formGroupExampleInput">Example label</label>
+    <label class="col-form-label" for="formGroupExampleInput">Example label</label>
     <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
   </div>
   <div class="form-group">
-    <label class="form-control-label" for="formGroupExampleInput2">Another label</label>
+    <label class="col-form-label" for="formGroupExampleInput2">Another label</label>
     <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
   </div>
 </form>
diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index 3586f461c..c4191b83d 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -359,11 +359,11 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
       <div class="modal-body">
         <form>
           <div class="form-group">
-            <label for="recipient-name" class="form-control-label">Recipient:</label>
+            <label for="recipient-name" class="col-form-label">Recipient:</label>
             <input type="text" class="form-control" id="recipient-name">
           </div>
           <div class="form-group">
-            <label for="message-text" class="form-control-label">Message:</label>
+            <label for="message-text" class="col-form-label">Message:</label>
             <textarea class="form-control" id="message-text"></textarea>
           </div>
         </form>
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md
index 5856ea54c..a40b68897 100644
--- a/docs/4.0/components/navbar.md
+++ b/docs/4.0/components/navbar.md
@@ -52,10 +52,10 @@ Here's an example of all the sub-components included in a responsive light-theme
           Dropdown
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-          <a class="dropdown-item" href="/action">Action</a>
-          <a class="dropdown-item" href="/another_action">Another action</a>
+          <a class="dropdown-item" href="#">Action</a>
+          <a class="dropdown-item" href="#">Another action</a>
           <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="http://www.example.com/something_else_here">Something else here</a>
+          <a class="dropdown-item" href="#">Something else here</a>
         </div>
       </li>
       <li class="nav-item">
@@ -70,7 +70,7 @@ Here's an example of all the sub-components included in a responsive light-theme
 </nav>
 {% endexample %}
 
-This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/color/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
+This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
 
 ### Brand
 
diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md
index 27230e039..36e87b279 100644
--- a/docs/4.0/components/navs.md
+++ b/docs/4.0/components/navs.md
@@ -235,7 +235,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
 
 If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
 
-Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior for dynamic tabbed interfaces](#javascript-behavior-for-dynamic-tabbed-interfaces) in this section for an example.
+Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example.
 
 ## Using dropdowns
 
@@ -297,7 +297,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
 
-If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 
 Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
 
diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md
index 6c752518d..31ff5c61f 100644
--- a/docs/4.0/components/popovers.md
+++ b/docs/4.0/components/popovers.md
@@ -13,7 +13,7 @@ Things to know when using the popover plugin:
 
 - Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
 - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
-- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
 - Zero-length `title` and `content` values will never show a popover.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md
index 75a7a92cc..ef528b0f0 100644
--- a/docs/4.0/components/scrollspy.md
+++ b/docs/4.0/components/scrollspy.md
@@ -10,7 +10,7 @@ toc: true
 
 Scrollspy has a few requirements to function properly:
 
-- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 - It must be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/).
 - Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
 - When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md
index d3598048d..766b726ed 100644
--- a/docs/4.0/components/tooltips.md
+++ b/docs/4.0/components/tooltips.md
@@ -11,7 +11,7 @@ toc: true
 Things to know when using the tooltip plugin:
 
 - Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
-- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
 - Tooltips with zero-length titles are never displayed.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 59bdb6373..d4506c2c9 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -579,11 +579,48 @@ Regular table background variants are not available with the dark table, however
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
 {{ callout-include | markdownify }}
 
-## Responsive tables
 
-Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively.
+## Captions
 
-For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`.
+A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
+
+{% example html %}
+<table class="table">
+  <caption>List of users</caption>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Responsive tables
+
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding `.table-responsive` class on `.table`. Or, pick a maximum breakpoint with which to have a responsive table up to by adding `.table-responsive{-sm|-md|-lg|-xl}`.
 
 {% callout warning %}
 #### Vertical clipping/truncation
@@ -591,6 +628,8 @@ For responsive tables that always scroll horizontally when the table is wider th
 Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
 {% endcallout %}
 
+### Always responsive
+
 <div class="bd-example">
   <table class="table table-responsive">
     <thead>
@@ -697,41 +736,57 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 </table>
 {% endhighlight %}
 
+### Breakpoint specific
 
-## Captions
+Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
-A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
-
-{% example html %}
-<table class="table">
-  <caption>List of users</caption>
+<div class="bd-example">
+{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<table class="table table-responsive{{ bp.abbr }}">
   <thead>
     <tr>
       <th scope="col">#</th>
-      <th scope="col">First Name</th>
-      <th scope="col">Last Name</th>
-      <th scope="col">Username</th>
+      <th scope="col">Table heading</th>
+      <th scope="col">Table heading</th>
+      <th scope="col">Table heading</th>
+      <th scope="col">Table heading</th>
+      <th scope="col">Table heading</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
     </tr>
     <tr>
       <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
     </tr>
     <tr>
       <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endunless %}{% endfor %}
+</div>
+
+{% highlight html %}
+{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<table class="table table-responsive{{ bp.abbr }}">
+  ...
+</table>
+{% endunless %}{% endfor %}
+{% endhighlight %}
diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css
index 0f319ec92..e4381fec6 100644
--- a/docs/4.0/examples/blog/blog.css
+++ b/docs/4.0/examples/blog/blog.css
@@ -47,7 +47,7 @@ h6,
 .blog-masthead {
   margin-bottom: 3rem;
   background-color: #428bca;
-  box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
+  box-shadow: inset 0 -.1rem .25rem rgba(0, 0, 0, .1);
 }
 
 /* Nav links */
diff --git a/docs/4.0/examples/cover/cover.css b/docs/4.0/examples/cover/cover.css
index 2b208671b..96a89740b 100644
--- a/docs/4.0/examples/cover/cover.css
+++ b/docs/4.0/examples/cover/cover.css
@@ -32,7 +32,7 @@ body {
 body {
   color: #fff;
   text-align: center;
-  text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
 }
 
 /* Extra markup and styles for table-esque vertical and horizontal centering */
@@ -41,7 +41,7 @@ body {
   width: 100%;
   height: 100%; /* For at least Firefox */
   min-height: 100%;
-  box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
 }
 .site-wrapper-inner {
   display: table-cell;
@@ -73,14 +73,14 @@ body {
 .nav-masthead .nav-link {
   padding: .25rem 0;
   font-weight: 700;
-  color: rgba(255,255,255,.5);
+  color: rgba(255, 255, 255, .5);
   background-color: transparent;
   border-bottom: .25rem solid transparent;
 }
 
 .nav-masthead .nav-link:hover,
 .nav-masthead .nav-link:focus {
-  border-bottom-color: rgba(255,255,255,.25);
+  border-bottom-color: rgba(255, 255, 255, .25);
 }
 
 .nav-masthead .nav-link + .nav-link {
@@ -120,7 +120,7 @@ body {
  */
 
 .mastfoot {
-  color: rgba(255,255,255,.5);
+  color: rgba(255, 255, 255, .5);
 }
 
 
diff --git a/docs/4.0/examples/grid/grid.css b/docs/4.0/examples/grid/grid.css
index 5f7e1af66..78f5dfda6 100644
--- a/docs/4.0/examples/grid/grid.css
+++ b/docs/4.0/examples/grid/grid.css
@@ -17,8 +17,8 @@ h3 {
 [class*="col-"] {
   padding-top: 1rem;
   padding-bottom: 1rem;
-  background-color: rgba(86,61,124,.15);
-  border: 1px solid rgba(86,61,124,.2);
+  background-color: rgba(86, 61, 124, .15);
+  border: 1px solid rgba(86, 61, 124, .2);
 }
 
 hr {
diff --git a/docs/4.0/examples/index.md b/docs/4.0/examples/index.md
index 8546a8698..1f0ab5339 100644
--- a/docs/4.0/examples/index.md
+++ b/docs/4.0/examples/index.md
@@ -14,14 +14,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
 <div class="row bd-examples">
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/starter-template/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.png" alt="" width="800" height="600">
       <h4>Starter template</h4>
     </a>
     <p>Nothing but the basics: compiled CSS and JavaScript.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.png" alt="" width="800" height="600">
       <h4>Grids</h4>
     </a>
     <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
@@ -30,14 +30,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/jumbotron/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.png" alt="" width="800" height="600">
       <h4>Jumbotron</h4>
     </a>
     <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/narrow-jumbotron/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron-narrow.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron-narrow.png" alt="" width="800" height="600">
       <h4>Narrow jumbotron</h4>
     </a>
     <p>Build a more custom page by narrowing the default container and jumbotron.</p>
@@ -51,14 +51,14 @@ Taking the default navbar component and showing how it can be moved, placed, and
 <div class="row bd-examples">
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbars/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.png" alt="" width="800" height="600">
       <h4>Navbar</h4>
     </a>
     <p>Super basic template that includes the navbar along with some additional content.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.png" alt="" width="800" height="600">
       <h4>Static top navbar</h4>
     </a>
     <p>Super basic template with a static top navbar along with some additional content.</p>
@@ -67,14 +67,14 @@ Taking the default navbar component and showing how it can be moved, placed, and
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top-fixed/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.png" alt="" width="800" height="600">
       <h4>Fixed navbar</h4>
     </a>
     <p>Super basic template with a fixed top navbar along with some additional content.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-bottom/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-bottom.jpg" alt="">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-bottom.png" alt="">
       <h4>Bottom navbar</h4>
     </a>
     <p>Super basic template with a bottom navbar along with some additional content.</p>
@@ -88,14 +88,14 @@ Brand new components and templates to help folks quickly get started with Bootst
 <div class="row bd-examples">
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/album/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.png" alt="" width="800" height="600">
       <h4>Album</h4>
     </a>
     <p>Simple one-page template for photo galleries, portfolios, and more.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/cover/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.png" alt="" width="800" height="600">
       <h4>Cover</h4>
     </a>
     <p>A one-page template for building simple and beautiful home pages.</p>
@@ -104,14 +104,14 @@ Brand new components and templates to help folks quickly get started with Bootst
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/carousel/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.png" alt="" width="800" height="600">
       <h4>Carousel</h4>
     </a>
     <p>Customize the navbar and carousel, then add some new components.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/blog/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.png" alt="" width="800" height="600">
       <h4>Blog</h4>
     </a>
     <p>Simple two-column blog layout with custom navigation, header, and type.</p>
@@ -120,14 +120,14 @@ Brand new components and templates to help folks quickly get started with Bootst
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/dashboard/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.png" alt="" width="800" height="600">
       <h4>Dashboard</h4>
     </a>
     <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/signin/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.png" alt="" width="800" height="600">
       <h4>Sign-in page</h4>
     </a>
     <p>Custom form layout and design for a simple sign in form.</p>
@@ -136,14 +136,14 @@ Brand new components and templates to help folks quickly get started with Bootst
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/justified-nav/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.png" alt="" width="800" height="600">
       <h4>Justified nav</h4>
     </a>
     <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.png" alt="" width="800" height="600">
       <h4>Sticky footer</h4>
     </a>
     <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
@@ -152,7 +152,7 @@ Brand new components and templates to help folks quickly get started with Bootst
 
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.png" alt="" width="800" height="600">
       <h4>Sticky footer w/ navbar</h4>
     </a>
     <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
@@ -166,7 +166,7 @@ Examples that focus on future-friendly features or techniques.
 <div class="row bd-examples">
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/offcanvas/">
-      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.jpg" alt="" width="800" height="600">
+      <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.png" alt="" width="800" height="600">
       <h4>Offcanvas</h4>
     </a>
     <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
diff --git a/docs/4.0/examples/justified-nav/justified-nav.css b/docs/4.0/examples/justified-nav/justified-nav.css
index 0ca9aabb5..86c828190 100644
--- a/docs/4.0/examples/justified-nav/justified-nav.css
+++ b/docs/4.0/examples/justified-nav/justified-nav.css
@@ -20,7 +20,7 @@ body {
 }
 
 .navbar {
-  background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
+  background-image: linear-gradient(to bottom, #f7f7f7 0%, #eee 100%);
   border: 1px solid #e5e5e5;
 }
 
diff --git a/docs/4.0/examples/navbar-bottom/index.html b/docs/4.0/examples/navbar-bottom/index.html
index 3046f9b9b..675428c54 100644
--- a/docs/4.0/examples/navbar-bottom/index.html
+++ b/docs/4.0/examples/navbar-bottom/index.html
@@ -21,7 +21,7 @@
         <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
       </div>
     </div>
-    <nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
+    <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Bottom navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/screenshots/album.jpg b/docs/4.0/examples/screenshots/album.jpg
deleted file mode 100644
index 127d9a97e..000000000
--- a/docs/4.0/examples/screenshots/album.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/album.png b/docs/4.0/examples/screenshots/album.png
new file mode 100644
index 000000000..bd876afb3
--- /dev/null
+++ b/docs/4.0/examples/screenshots/album.png
diff --git a/docs/4.0/examples/screenshots/blog.jpg b/docs/4.0/examples/screenshots/blog.jpg
deleted file mode 100644
index 54dd4eeed..000000000
--- a/docs/4.0/examples/screenshots/blog.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/blog.png b/docs/4.0/examples/screenshots/blog.png
new file mode 100644
index 000000000..84262009b
--- /dev/null
+++ b/docs/4.0/examples/screenshots/blog.png
diff --git a/docs/4.0/examples/screenshots/carousel.jpg b/docs/4.0/examples/screenshots/carousel.jpg
deleted file mode 100644
index 500863682..000000000
--- a/docs/4.0/examples/screenshots/carousel.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/carousel.png b/docs/4.0/examples/screenshots/carousel.png
new file mode 100644
index 000000000..2cb74fdbd
--- /dev/null
+++ b/docs/4.0/examples/screenshots/carousel.png
diff --git a/docs/4.0/examples/screenshots/cover.jpg b/docs/4.0/examples/screenshots/cover.jpg
deleted file mode 100644
index 0b22c0001..000000000
--- a/docs/4.0/examples/screenshots/cover.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/cover.png b/docs/4.0/examples/screenshots/cover.png
new file mode 100644
index 000000000..9b4b782ae
--- /dev/null
+++ b/docs/4.0/examples/screenshots/cover.png
diff --git a/docs/4.0/examples/screenshots/dashboard.jpg b/docs/4.0/examples/screenshots/dashboard.jpg
deleted file mode 100644
index 6595c049a..000000000
--- a/docs/4.0/examples/screenshots/dashboard.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/dashboard.png b/docs/4.0/examples/screenshots/dashboard.png
new file mode 100644
index 000000000..e573cae47
--- /dev/null
+++ b/docs/4.0/examples/screenshots/dashboard.png
diff --git a/docs/4.0/examples/screenshots/grid.jpg b/docs/4.0/examples/screenshots/grid.jpg
deleted file mode 100644
index ef624e866..000000000
--- a/docs/4.0/examples/screenshots/grid.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/grid.png b/docs/4.0/examples/screenshots/grid.png
new file mode 100644
index 000000000..47be687fe
--- /dev/null
+++ b/docs/4.0/examples/screenshots/grid.png
diff --git a/docs/4.0/examples/screenshots/jumbotron-narrow.jpg b/docs/4.0/examples/screenshots/jumbotron-narrow.jpg
deleted file mode 100644
index 3af127c0f..000000000
--- a/docs/4.0/examples/screenshots/jumbotron-narrow.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/jumbotron-narrow.png b/docs/4.0/examples/screenshots/jumbotron-narrow.png
new file mode 100644
index 000000000..474138834
--- /dev/null
+++ b/docs/4.0/examples/screenshots/jumbotron-narrow.png
diff --git a/docs/4.0/examples/screenshots/jumbotron.jpg b/docs/4.0/examples/screenshots/jumbotron.jpg
deleted file mode 100644
index aaf7f30e4..000000000
--- a/docs/4.0/examples/screenshots/jumbotron.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/jumbotron.png b/docs/4.0/examples/screenshots/jumbotron.png
new file mode 100644
index 000000000..80b71ba4b
--- /dev/null
+++ b/docs/4.0/examples/screenshots/jumbotron.png
diff --git a/docs/4.0/examples/screenshots/justified-nav.jpg b/docs/4.0/examples/screenshots/justified-nav.jpg
deleted file mode 100644
index 098bf6fb6..000000000
--- a/docs/4.0/examples/screenshots/justified-nav.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/justified-nav.png b/docs/4.0/examples/screenshots/justified-nav.png
new file mode 100644
index 000000000..86f215009
--- /dev/null
+++ b/docs/4.0/examples/screenshots/justified-nav.png
diff --git a/docs/4.0/examples/screenshots/navbar-bottom.jpg b/docs/4.0/examples/screenshots/navbar-bottom.jpg
deleted file mode 100644
index c25c2f89c..000000000
--- a/docs/4.0/examples/screenshots/navbar-bottom.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/navbar-bottom.png b/docs/4.0/examples/screenshots/navbar-bottom.png
new file mode 100644
index 000000000..7f4058033
--- /dev/null
+++ b/docs/4.0/examples/screenshots/navbar-bottom.png
diff --git a/docs/4.0/examples/screenshots/navbar-fixed.jpg b/docs/4.0/examples/screenshots/navbar-fixed.jpg
deleted file mode 100644
index 419bb7e50..000000000
--- a/docs/4.0/examples/screenshots/navbar-fixed.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/navbar-fixed.png b/docs/4.0/examples/screenshots/navbar-fixed.png
new file mode 100644
index 000000000..2b94339c6
--- /dev/null
+++ b/docs/4.0/examples/screenshots/navbar-fixed.png
diff --git a/docs/4.0/examples/screenshots/navbar-static.jpg b/docs/4.0/examples/screenshots/navbar-static.jpg
deleted file mode 100644
index 29f1643cc..000000000
--- a/docs/4.0/examples/screenshots/navbar-static.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/navbar-static.png b/docs/4.0/examples/screenshots/navbar-static.png
new file mode 100644
index 000000000..bdbb08573
--- /dev/null
+++ b/docs/4.0/examples/screenshots/navbar-static.png
diff --git a/docs/4.0/examples/screenshots/navbar.jpg b/docs/4.0/examples/screenshots/navbar.jpg
deleted file mode 100644
index b58877c08..000000000
--- a/docs/4.0/examples/screenshots/navbar.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/navbar.png b/docs/4.0/examples/screenshots/navbar.png
new file mode 100644
index 000000000..a9c4b67a5
--- /dev/null
+++ b/docs/4.0/examples/screenshots/navbar.png
diff --git a/docs/4.0/examples/screenshots/offcanvas.jpg b/docs/4.0/examples/screenshots/offcanvas.jpg
deleted file mode 100644
index 5bb3ca1f4..000000000
--- a/docs/4.0/examples/screenshots/offcanvas.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/offcanvas.png b/docs/4.0/examples/screenshots/offcanvas.png
new file mode 100644
index 000000000..c448d042a
--- /dev/null
+++ b/docs/4.0/examples/screenshots/offcanvas.png
diff --git a/docs/4.0/examples/screenshots/sign-in.jpg b/docs/4.0/examples/screenshots/sign-in.jpg
deleted file mode 100644
index e3309bdf6..000000000
--- a/docs/4.0/examples/screenshots/sign-in.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/sign-in.png b/docs/4.0/examples/screenshots/sign-in.png
new file mode 100644
index 000000000..23095f827
--- /dev/null
+++ b/docs/4.0/examples/screenshots/sign-in.png
diff --git a/docs/4.0/examples/screenshots/starter-template.jpg b/docs/4.0/examples/screenshots/starter-template.jpg
deleted file mode 100644
index ba99c7e4d..000000000
--- a/docs/4.0/examples/screenshots/starter-template.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/starter-template.png b/docs/4.0/examples/screenshots/starter-template.png
new file mode 100644
index 000000000..be6ea293d
--- /dev/null
+++ b/docs/4.0/examples/screenshots/starter-template.png
diff --git a/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg b/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg
deleted file mode 100644
index 05b7d8d21..000000000
--- a/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/sticky-footer-navbar.png b/docs/4.0/examples/screenshots/sticky-footer-navbar.png
new file mode 100644
index 000000000..fed9a2a8c
--- /dev/null
+++ b/docs/4.0/examples/screenshots/sticky-footer-navbar.png
diff --git a/docs/4.0/examples/screenshots/sticky-footer.jpg b/docs/4.0/examples/screenshots/sticky-footer.jpg
deleted file mode 100644
index b0914f532..000000000
--- a/docs/4.0/examples/screenshots/sticky-footer.jpg
+++ /dev/null
diff --git a/docs/4.0/examples/screenshots/sticky-footer.png b/docs/4.0/examples/screenshots/sticky-footer.png
new file mode 100644
index 000000000..98a6f3839
--- /dev/null
+++ b/docs/4.0/examples/screenshots/sticky-footer.png
diff --git a/docs/4.0/getting-started/accessibility.md b/docs/4.0/getting-started/accessibility.md
index 09d51064e..0f9e87ae1 100644
--- a/docs/4.0/getting-started/accessibility.md
+++ b/docs/4.0/getting-started/accessibility.md
@@ -49,5 +49,5 @@ For visually hidden interactive controls, such as traditional "skip" links, `.sr
 - [The A11Y Project](http://a11yproject.com/)
 - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
 - [Tenon.io Accessibility Checker](https://tenon.io/)
-- [Colour Contrast Analyser (CCA)](https://www.paciellogroup.com/resources/contrastanalyser/)
+- [Colour Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/)
 - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md
index 4eb37e312..3a569af24 100644
--- a/docs/4.0/getting-started/build-tools.md
+++ b/docs/4.0/getting-started/build-tools.md
@@ -46,7 +46,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
 
 1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
 2. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
-3. Open <http://localhost:9001> in your browser, and voilà.
+3. Open `http://localhost:9001` in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
 
diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md
index 9f1199317..c93d6dc34 100644
--- a/docs/4.0/getting-started/download.md
+++ b/docs/4.0/getting-started/download.md
@@ -68,13 +68,13 @@ Bootstrap's `package.json` contains some additional metadata under the following
 Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
 
 {% highlight ruby %}
-gem 'bootstrap', '~> 4.0.0.beta'
+gem 'bootstrap', '~> {{ site.current_ruby_version }}'
 {% endhighlight %}
 
 Alternatively, if you're not using Bundler, you can install the gem by running this command:
 
 {% highlight sh %}
-gem install bootstrap -v 4.0.0.beta
+gem install bootstrap -v {{ site.current_ruby_version }}
 {% endhighlight %}
 
 [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md
index 648132255..a0094d154 100644
--- a/docs/4.0/getting-started/javascript.md
+++ b/docs/4.0/getting-started/javascript.md
@@ -120,6 +120,6 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d
 
 ## Util
 
-All Bootstrap's JavaScript files depend on `util.js` and it has to be included alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there.
+All Bootstrap's JavaScript files depend on `util.js` and it has to be included alongside the other JavaScript files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there.
 
 `util.js` includes utility functions and a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index 990b1bbe1..12f309aaf 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -11,7 +11,7 @@ redirect_from: "/docs/4.0/getting-started/options/"
 
 In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our `dist` files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.
 
-Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet anymore; instead, you can enable the built-in theme to add gradients, shadows, and more.
+Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.
 
 ## Sass
 
@@ -19,7 +19,7 @@ Utilize our source Sass files to take advantage of variables, maps, mixins, and
 
 ### File structure
 
-Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you've downloaded our source files or are using package manager, you'll have a file structure that looks like this:
+Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you've downloaded our source files or are using a package manager, you'll have a file structure that looks like this:
 
 {% highlight plaintext %}
 your-project/
@@ -150,7 +150,7 @@ Additional functions could be added in the future or your own custom Sass to cre
 
 ### Color contrast
 
-One additional function we include in Bootstrap is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
+One additional function we include in Bootstrap is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
 
 For example, to generate color swatches from our `$theme-colors` map:
 
@@ -202,7 +202,7 @@ Many of Bootstrap's various components and utilities are built through a series
 
 ### All colors
 
-All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
+All colors available in Bootstrap 4, are available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
 
 <div class="row">
   {% for color in site.data.colors %}
diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md
index a357e58ad..4952da5b7 100644
--- a/docs/4.0/layout/overview.md
+++ b/docs/4.0/layout/overview.md
@@ -172,3 +172,5 @@ $zindex-tooltip:           1070 !default;
 ```
 
 Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content.
+
+Additionally, the `button-group`, `input-group`, `list-group`, and `pagination` components make use of setting `z-index` to `1` or `2` in order to ensure that the borders of the _active_ element correctly appear "above" their sibling elements.
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index bad3738a2..1d18fb1b8 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -6,6 +6,12 @@ group: migration
 toc: true
 ---
 
+## Beta 3 changes
+
+While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
+
+- Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
+
 ## Beta 2 changes
 
 While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
@@ -17,7 +23,7 @@ While in beta, we aim to have no breaking changes. However, things don't always
 - Renamed `.table-inverse`, `.thead-inverse`, and `.thead-default` to `.*-dark` and `.*-light`, matching our color schemes used elsewhere.
 - Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed.
 - Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details.
-- Bootstrap now requires jQuery 3.0.0 or higher.
+- Bootstrap still requires jQuery 1.9.1 or higher, but you're advised to use version 3.x since v3.x's supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.
 - Removed the unused `.form-control-label` class. If you did make use of this class, it was duplicate of the `.col-form-label` class that vertically centered a `<label>` with it's associated input in horizontal form layouts.
 - Changed the `color-yiq` from a mixin that included the `color` property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of `color-yiq(#000)`, you'd write `color: color-yiq(#000);`.
 
@@ -130,7 +136,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
 
 - Renamed `.btn-default` to `.btn-secondary`.
 - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
-- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
+- The [stateful button]({{ site.url }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
   - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
 - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
 
diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 13c0adc8a..10d6e5ae3 100644
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -6,6 +6,8 @@ group: utilities
 toc: true
 ---
 
+## Color
+
 {% example html %}
 {% for color in site.data.theme-colors %}
 <p class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">.text-{{ color.name }}</p>{% endfor %}
@@ -22,6 +24,8 @@ Contextual text classes also work well on anchors with the provided hover and fo
 <p><a href="#" class="text-white bg-dark">White link</a></p>
 {% endexample %}
 
+## Background color
+
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
 
 {% example html %}
@@ -30,6 +34,15 @@ Similar to the contextual text color classes, easily set the background of an el
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
 {% endexample %}
 
+## Background gradient
+
+When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-gradients` is disabled and the example below is intentionally broken.** This is done for easier customization from the moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
+{% endexample %}
+
 {% callout info %}
 #### Dealing with specificity
 
diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index c9aa5d299..470a7db72 100644
--- a/docs/4.0/utilities/flex.md
+++ b/docs/4.0/utilities/flex.md
@@ -215,7 +215,7 @@ Responsive variations also exist for `align-self`.
 
 ## Auto margins
 
-Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below is are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
+Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
 
 **Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
 
diff --git a/docs/4.0/utilities/screenreaders.md b/docs/4.0/utilities/screenreaders.md
index 358466f0c..7888143e4 100644
--- a/docs/4.0/utilities/screenreaders.md
+++ b/docs/4.0/utilities/screenreaders.md
@@ -8,9 +8,9 @@ toc: true
 
 Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
 
-{% comment %}
+{%- comment -%}
 Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
-{% endcomment %}
+{%- endcomment -%}
 
 {% highlight html %}
 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>