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

5 files changed, 172 insertions, 411 deletions

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 056561b27..97ffd3161 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -32,7 +32,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
 </div>
 </div>
 
-The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](#predefined-classes). Those columns are centered in the page with the parent `.container`.
+The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
 
 Breaking it down, here's how it works:
 
@@ -57,86 +57,84 @@ While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for
 
 See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th></th>
-        <th class="text-center">
-          Extra small<br>
-          <small>&lt;576px</small>
-        </th>
-        <th class="text-center">
-          Small<br>
-          <small>&ge;576px</small>
-        </th>
-        <th class="text-center">
-          Medium<br>
-          <small>&ge;768px</small>
-        </th>
-        <th class="text-center">
-          Large<br>
-          <small>&ge;992px</small>
-        </th>
-        <th class="text-center">
-          Extra large<br>
-          <small>&ge;1200px</small>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th class="text-nowrap" scope="row">Grid behavior</th>
-        <td>Horizontal at all times</td>
-        <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Max container width</th>
-        <td>None (auto)</td>
-        <td>540px</td>
-        <td>720px</td>
-        <td>960px</td>
-        <td>1140px</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Class prefix</th>
-        <td><code>.col-</code></td>
-        <td><code>.col-sm-</code></td>
-        <td><code>.col-md-</code></td>
-        <td><code>.col-lg-</code></td>
-        <td><code>.col-xl-</code></td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row"># of columns</th>
-        <td colspan="5">12</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Gutter width</th>
-        <td colspan="5">30px (15px on each side of a column)</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Nestable</th>
-        <td colspan="5">Yes</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Offsets</th>
-        <td colspan="5">Yes</td>
-      </tr>
-      <tr>
-        <th class="text-nowrap" scope="row">Column ordering</th>
-        <td colspan="5">Yes</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="text-center">
+        Extra small<br>
+        <small>&lt;576px</small>
+      </th>
+      <th class="text-center">
+        Small<br>
+        <small>&ge;576px</small>
+      </th>
+      <th class="text-center">
+        Medium<br>
+        <small>&ge;768px</small>
+      </th>
+      <th class="text-center">
+        Large<br>
+        <small>&ge;992px</small>
+      </th>
+      <th class="text-center">
+        Extra large<br>
+        <small>&ge;1200px</small>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th class="text-nowrap" scope="row">Grid behavior</th>
+      <td>Horizontal at all times</td>
+      <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Max container width</th>
+      <td>None (auto)</td>
+      <td>540px</td>
+      <td>720px</td>
+      <td>960px</td>
+      <td>1140px</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Class prefix</th>
+      <td><code>.col-</code></td>
+      <td><code>.col-sm-</code></td>
+      <td><code>.col-md-</code></td>
+      <td><code>.col-lg-</code></td>
+      <td><code>.col-xl-</code></td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row"># of columns</th>
+      <td colspan="5">12</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Gutter width</th>
+      <td colspan="5">30px (15px on each side of a column)</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Nestable</th>
+      <td colspan="5">Yes</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Offsets</th>
+      <td colspan="5">Yes</td>
+    </tr>
+    <tr>
+      <th class="text-nowrap" scope="row">Column ordering</th>
+      <td colspan="5">Yes</td>
+    </tr>
+  </tbody>
+</table>
 
 ## Auto-layout columns
 
-Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
 
 ### Equal-width
 
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 <div class="bd-example-row">
 {% example html %}
@@ -146,7 +144,7 @@ For example, here are two grid layouts that apply to every device and viewport,
       1 of 2
     </div>
     <div class="col">
-      1 of 2
+      2 of 2
     </div>
   </div>
   <div class="row">
@@ -154,19 +152,37 @@ For example, here are two grid layouts that apply to every device and viewport,
       1 of 3
     </div>
     <div class="col">
-      1 of 3
+      2 of 3
     </div>
     <div class="col">
-      1 of 3
+      3 of 3
     </div>
   </div>
 </div>
 {% endexample %}
 </div>
 
+Equal-width columns can be broken into multiple lines, but there is a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevents this from working without an explicit `flex-basis` or `border`. Our example works thanks to the `border` being set; you can do the same with `.col { border: 1px solid transparent; }`. Alternatively, you can set the flex-basis to the width of the column (e.g., `.col { flex: 1 0 50%; }`).
+
+Both these fixes have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor).
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="w-100"></div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
 ### Setting one column width
 
-Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
+Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
 
 <div class="bd-example-row">
 {% example html %}
@@ -199,7 +215,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 
 ### Variable width content
 
-Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
+Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
 
 <div class="bd-example-row">
 {% example html %}
@@ -208,7 +224,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
     <div class="col col-lg-2">
       1 of 3
     </div>
-    <div class="col-12 col-md-auto">
+    <div class="col-md-auto">
       Variable width content
     </div>
     <div class="col col-lg-2">
@@ -219,7 +235,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
     <div class="col">
       1 of 3
     </div>
-    <div class="col-12 col-md-auto">
+    <div class="col-md-auto">
       Variable width content
     </div>
     <div class="col col-lg-2">
@@ -295,7 +311,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 {% example html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col col-md-8">.col .col-md-8</div>
+  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 
@@ -473,7 +489,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
 
 ### Column resets
 
-With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
+With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive display utilities]({{ site.baseurl }}/utilities/display/).
 
 <div class="bd-example-row">
 {% example html %}
@@ -482,7 +498,7 @@ With the handful of grid tiers available, you're bound to run into issues where,
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 
   <!-- Add the extra clearfix for only the required viewport -->
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix d-none d-sm-block"></div>
 
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -516,13 +532,13 @@ Use flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col flex-unordered">
+    <div class="col order-0">
       First, but unordered
     </div>
-    <div class="col flex-last">
+    <div class="col order-last">
       Second, but last
     </div>
-    <div class="col flex-first">
+    <div class="col order-first">
       Third, but first
     </div>
   </div>
@@ -587,7 +603,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 
 ## Sass mixins
 
-When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
+When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 
 ### Variables
 
@@ -632,104 +648,63 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 {% highlight scss %}
 // Creates a wrapper for a series of columns
-@mixin make-row($gutters: $grid-gutter-widths) {
-  display: flex;
-  flex-wrap: wrap;
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      margin-right: ($gutter / -2);
-      margin-left:  ($gutter / -2);
-    }
-  }
-}
+@include make-row($gutters: $grid-gutter-widths);
 
 // Make the element grid-ready (applying everything but the width)
-@mixin make-col-ready($gutters: $grid-gutter-widths) {
-  position: relative;
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
-  // later on to override this initial width.
-  width: 100%;
-  min-height: 1px; // Prevent collapsing
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
-}
-
-@mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
-  width: percentage($size / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($size / $columns);
-}
+@include make-col-ready($gutters: $grid-gutter-widths);
+@include make-col($size, $columns: $grid-columns);
 
 // Get fancy by offsetting, or changing the sort order
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: percentage($size / $columns);
-}
-
-@mixin make-col-push($size, $columns: $grid-columns) {
-  left: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-pull($size, $columns: $grid-columns) {
-  right: if($size > 0, percentage($size / $columns), auto);
-}
+@include make-col-offset($size, $columns: $grid-columns);
+@include make-col-push($size, $columns: $grid-columns);
+@include make-col-pull($size, $columns: $grid-columns);
 {% endhighlight %}
 
 ### Example usage
 
 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
 
-See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.
-
 {% highlight scss %}
-.container {
-  max-width: 60em;
+.example-container {
+  width: 800px;
   @include make-container();
 }
-.row {
+
+.example-row {
   @include make-row();
 }
-.content-main {
+
+.example-content-main {
   @include make-col-ready();
 
-  @media (max-width: 32em) {
+  @include media-breakpoint-up(sm) {
     @include make-col(6);
   }
-  @media (min-width: 32.1em) {
+  @include media-breakpoint-up(lg) {
     @include make-col(8);
   }
 }
-.content-secondary {
+
+.example-content-secondary {
   @include make-col-ready();
 
-  @media (max-width: 32em) {
+  @include media-breakpoint-up(sm) {
     @include make-col(6);
   }
-  @media (min-width: 32.1em) {
+  @include media-breakpoint-up(lg) {
     @include make-col(4);
   }
 }
 {% endhighlight %}
 
-{% highlight html %}
-<div class="container">
-  <div class="row">
-    <div class="content-main">...</div>
-    <div class="content-secondary">...</div>
+{% example html %}
+<div class="example-container">
+  <div class="example-row">
+    <div class="example-content-main">Main content</div>
+    <div class="example-content-secondary">Secondary content</div>
   </div>
 </div>
-{% endhighlight %}
+{% endexample %}
 
 ## Customizing the grid
 
@@ -753,10 +728,11 @@ $grid-gutter-widths: (
 
 ### Grid tiers
 
-Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
+Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
 
 {% highlight scss %}
 $grid-breakpoints: (
+  xs: 0,
   sm: 480px,
   md: 768px,
   lg: 1024px
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
index 662f72c25..74229dc3c 100644
--- a/docs/layout/media-object.md
+++ b/docs/layout/media-object.md
@@ -64,7 +64,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% example html %}
 <div class="media">
-  <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  <img class="d-flex align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
     <h5 class="mt-0">Top-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -75,7 +75,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% example html %}
 <div class="media">
-  <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  <img class="d-flex align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
     <h5 class="mt-0">Center-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -86,7 +86,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% example html %}
 <div class="media">
-  <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  <img class="d-flex align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
     <h5 class="mt-0">Bottom-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index ee21b70f2..04aa2c9ad 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -118,7 +118,7 @@ Once again, these media queries are also available via Sass mixins:
 @include media-breakpoint-down(lg) { ... }
 {% endhighlight %}
 
-We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
+There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
 {% highlight scss %}
 // Extra small devices (portrait phones, less than 576px)
@@ -147,18 +147,18 @@ These media queries are also available via Sass mixins:
 @include media-breakpoint-only(xl) { ... }
 {% endhighlight %}
 
-And finally media that spans multiple breakpoint widths:
+Similarly, media queries may span multiple breakpoint widths:
 
 {% highlight scss %}
 // Example
-// Medium devices (tablets, 768px and up) and  Large devices (desktops, 992px and up)
+// Apply styles starting from medium devices and up to extra large devices
 @media (min-width: 768px) and (max-width: 1199px) { ... }
 {% endhighlight %}
 
-The Sass mixin for the above example look like that shown beneath:
+The Sass mixin for targeting the same screen size range would be:
 
 {% highlight scss %}
-@include media-breakpoint-between(md, lg) { ... }
+@include media-breakpoint-between(md, xl) { ... }
 {% endhighlight %}
 
 ## Z-index
@@ -169,10 +169,9 @@ We don't encourage customization of these values; should you change one, you lik
 
 ```scss
 $zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
-$zindex-navbar-fixed:      1030 !default;
-$zindex-navbar-sticky:     1030 !default;
+$zindex-fixed:             1030 !default;
+$zindex-sticky:            1030 !default;
 $zindex-modal-backdrop:    1040 !default;
 $zindex-modal:             1050 !default;
 $zindex-popover:           1060 !default;
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
deleted file mode 100644
index 69f6ae1be..000000000
--- a/docs/layout/responsive-utilities.md
+++ /dev/null
@@ -1,245 +0,0 @@
----
-layout: docs
-title: Responsive utilities
-description: Use responsive display utility classes for showing and hiding content by device, via media query.
-group: layout
----
-
-For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
-
-Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-##  Available classes
-
-* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
-* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports.
-* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
-* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
-* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped responsive-utilities">
-    <thead>
-      <tr>
-        <th></th>
-        <th>
-          Extra small devices
-          <small>Portrait phones (&lt;544px)</small>
-        </th>
-        <th>
-          Small devices
-          <small>Landscape phones (&ge;544px - &lt;768px)</small>
-        </th>
-        <th>
-          Medium devices
-          <small>Tablets (&ge;768px - &lt;992px)</small>
-        </th>
-        <th>
-          Large devices
-          <small>Desktops (&ge;992px - &lt;1200px)</small>
-        </th>
-        <th>
-          Extra large devices
-          <small>Desktops (&ge;1200px)</small>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row"><code>.hidden-xs-down</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-sm-down</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-md-down</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-lg-down</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-xl-down</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-xs-up</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-sm-up</code></th>
-        <td class="is-visible">Visible</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-md-up</code></th>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-lg-up</code></th>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-      <tr>
-        <th scope="row"><code>.hidden-xl-up</code></th>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-visible">Visible</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<h2 id="responsive-utilities-print">Print classes</h2>
-<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
-<div class="table-responsive">
-  <table class="table table-bordered table-striped responsive-utilities">
-    <thead>
-      <tr>
-        <th>Class</th>
-        <th>Browser</th>
-        <th>Print</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th><code>.visible-print-block</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
-      </tr>
-      <tr>
-        <th><code>.visible-print-inline</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
-      </tr>
-      <tr>
-        <th><code>.visible-print-inline-block</code></th>
-        <td class="is-hidden">Hidden</td>
-        <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
-      </tr>
-      <tr>
-        <th><code>.hidden-print</code></th>
-        <td class="is-visible">Visible</td>
-        <td class="is-hidden">Hidden</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-## Test cases
-
-Resize your browser or load on different devices to test the responsive utility classes.
-
-Green checkmarks indicate the element **is visible** in your current viewport.
-
-<div class="row responsive-utilities-test visible-on">
-  <div class="col-6 col-sm-3">
-    <span class="hidden-sm-up visible">&#10004; Visible on extra small</span>
-    <span class="hidden-xs-down not-visible">Extra small</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-md-up visible">&#10004; Visible on small or narrower</span>
-    <span class="hidden-sm-down not-visible">Small or narrower</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-lg-up visible">&#10004; Visible on medium or narrower</span>
-    <span class="hidden-md-down not-visible">Medium or narrower</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-xl-up visible">&#10004; Visible on large or narrower</span>
-    <span class="hidden-lg-down not-visible">Large or narrower</span>
-  </div>
-</div>
-
-<hr>
-
-<div class="row responsive-utilities-test visible-on">
-  <div class="col-6 col-sm-3">
-    <span class="hidden-xs-down visible">&#10004; Visible on small or wider</span>
-    <span class="hidden-sm-up not-visible">Small or wider</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-sm-down visible">&#10004; Visible on medium or wider</span>
-    <span class="hidden-md-up not-visible">Medium or wider</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-md-down visible">&#10004; Visible on large or wider</span>
-    <span class="hidden-lg-up not-visible">Large or wider</span>
-  </div>
-  <div class="col-6 col-sm-3">
-    <span class="hidden-lg-down visible">&#10004; Visible on extra large</span>
-    <span class="hidden-xl-up not-visible">Extra large</span>
-  </div>
-</div>
-
-<hr>
-
-<div class="row responsive-utilities-test visible-on">
-  <div class="col-6 col-sm-4">
-    <span class="hidden-sm-up visible">&#10004; Your viewport is exactly extra small</span>
-    <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
-  </div>
-  <div class="col-6 col-sm-4">
-    <span class="hidden-xs-down hidden-md-up visible">&#10004; Your viewport is exactly small</span>
-    <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
-  </div>
-  <div class="col-6 col-sm-4">
-    <span class="hidden-sm-down hidden-lg-up visible">&#10004; Your viewport is exactly medium</span>
-    <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
-  </div>
-  </div>
-
-<div class="row responsive-utilities-test visible-on">
-  <div class="col-6 col-sm-4">
-    <span class="hidden-md-down hidden-xl-up visible">&#10004; Your viewport is exactly large</span>
-    <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
-  </div>
-  <div class="col-6 col-sm-4">
-    <span class="hidden-lg-down visible">&#10004; Your viewport is exactly extra large</span>
-    <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
-  </div>
-</div>
diff --git a/docs/layout/utilities-for-layout.md b/docs/layout/utilities-for-layout.md
new file mode 100644
index 000000000..12ba7006c
--- /dev/null
+++ b/docs/layout/utilities-for-layout.md
@@ -0,0 +1,31 @@
+---
+layout: docs
+title: Utilities for layout
+description: Use any of our dozens of responsive utility classes for showing, hiding, aligning, and spacing content.
+group: layout
+---
+
+For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included in Bootstrap and how these utilities can help you with layout.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Changing `display`
+
+Use our `display` utilities for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
+
+## Flexbox options
+
+Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components](/components/) are built with flexbox enabled.
+
+Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities](/utilities/flexbox/) for sizing, alignment, spacing, and more.
+
+## Margin and padding
+
+Use the `margin` and `padding` [spacing utilities](/utilities/spacing/) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
+
+## Toggle `visibility`
+
+When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities](/utilities/visibility/). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.