diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index ff46ae70d3..0bb714b0fa 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -15,7 +15,7 @@
- title: Overview
- title: Grid
- title: Media object
- - title: Responsive utilities
+ - title: Utilities for layout
- title: Content
pages:
@@ -56,8 +56,8 @@
- title: Clearfix
- title: Close icon
- title: Colors
+ - title: Display
- title: Flexbox
- - title: Display property
- title: Image replacement
- title: Invisible content
- title: Position
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
deleted file mode 100644
index d1522e5586..0000000000
--- a/docs/layout/responsive-utilities.md
+++ /dev/null
@@ -1,243 +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.
-
-
-
-
- |
-
- Extra small devices
- Portrait phones (<576px)
- |
-
- Small devices
- Landscape phones (≥576px - <768px)
- |
-
- Medium devices
- Tablets (≥768px - <992px)
- |
-
- Large devices
- Desktops (≥992px - <1200px)
- |
-
- Extra large devices
- Desktops (≥1200px)
- |
-
-
-
-
- .hidden-xs-down |
- Hidden |
- Visible |
- Visible |
- Visible |
- Visible |
-
-
- .hidden-sm-down |
- Hidden |
- Hidden |
- Visible |
- Visible |
- Visible |
-
-
- .hidden-md-down |
- Hidden |
- Hidden |
- Hidden |
- Visible |
- Visible |
-
-
- .hidden-lg-down |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
- Visible |
-
-
- .hidden-xl-down |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
-
-
- .hidden-xs-up |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
-
-
- .hidden-sm-up |
- Visible |
- Hidden |
- Hidden |
- Hidden |
- Hidden |
-
-
- .hidden-md-up |
- Visible |
- Visible |
- Hidden |
- Hidden |
- Hidden |
-
-
- .hidden-lg-up |
- Visible |
- Visible |
- Visible |
- Hidden |
- Hidden |
-
-
- .hidden-xl-up |
- Visible |
- Visible |
- Visible |
- Visible |
- Hidden |
-
-
-
-
-## Print classes
-
-Similar to the regular responsive classes, use these for toggling content for print.
-
-
-
-
- Class |
- Browser |
- Print |
-
-
-
-
- .visible-print-block |
- Hidden |
- Visible (as display: block ) |
-
-
- .visible-print-inline |
- Hidden |
- Visible (as display: inline ) |
-
-
- .visible-print-inline-block |
- Hidden |
- Visible (as display: inline-block ) |
-
-
- .hidden-print |
- Visible |
- Hidden |
-
-
-
-
-## 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.
-
-
-
- ✔ Visible on extra small
- Extra small
-
-
- ✔ Visible on small or narrower
- Small or narrower
-
-
- ✔ Visible on medium or narrower
- Medium or narrower
-
-
- ✔ Visible on large or narrower
- Large or narrower
-
-
-
-
-
-
-
- ✔ Visible on small or wider
- Small or wider
-
-
- ✔ Visible on medium or wider
- Medium or wider
-
-
- ✔ Visible on large or wider
- Large or wider
-
-
- ✔ Visible on extra large
- Extra large
-
-
-
-
-
-
-
- ✔ Your viewport is exactly extra small
- Your viewport is NOT exactly extra small
-
-
- ✔ Your viewport is exactly small
- Your viewport is NOT exactly small
-
-
- ✔ Your viewport is exactly medium
- Your viewport is NOT exactly medium
-
-
-
-
-
- ✔ Your viewport is exactly large
- Your viewport is NOT exactly large
-
-
- ✔ Your viewport is exactly extra large
- Your viewport is NOT exactly extra large
-
-
diff --git a/docs/layout/utilities-for-layout.md b/docs/layout/utilities-for-layout.md
new file mode 100644
index 0000000000..50f4ce3956
--- /dev/null
+++ b/docs/layout/utilities-for-layout.md
@@ -0,0 +1,21 @@
+---
+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`
+
+## Flexbox options
+
+## Margin and padding
+
+## Toggle `visibility`
diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md
deleted file mode 100644
index 50ea293673..0000000000
--- a/docs/utilities/display-property.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: docs
-title: Display property
-group: utilities
----
-
-Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
-
-To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead.
-
-{% example html %}
-Inline
-Inline
-{% endexample %}
-
-{% example html %}
-Block
-{% endexample %}
-
-{% example html %}
-
-
inline-block
- Boot that strap!
-
-
-
inline-block
- Strap that boot!
-
-{% endexample %}
diff --git a/docs/utilities/display.md b/docs/utilities/display.md
new file mode 100644
index 0000000000..27f70e0b2a
--- /dev/null
+++ b/docs/utilities/display.md
@@ -0,0 +1,64 @@
+---
+layout: docs
+title: Display property
+group: utilities
+---
+
+Quickly and responsively toggle the `display` value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling `display` when printing.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Common `display` values
+
+The [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support:
+
+- `.d-none`
+- `.d-inline`
+- `.d-inline-block`
+- `.d-block`
+- `.d-table`
+- `.d-table-cell`
+- `.d-flex`
+- `.d-inline-flex`
+
+Put them to use by applying any of the classes to an element of your choice. For example, here's how you could use the inline, block, or inline-block utilities (the same applies to the other classes).
+
+{% example html %}
+d-inline
+d-inline
+{% endexample %}
+
+{% example html %}
+d-block
+{% endexample %}
+
+{% example html %}
+d-inline-block
+d-inline-block
+{% endexample %}
+
+Responsive variations also exist for every single utility mentioned above.
+
+{% for bp in site.data.breakpoints %}
+- `.d{{ bp.abbr }}-none`
+- `.d{{ bp.abbr }}-inline`
+- `.d{{ bp.abbr }}-inline-block`
+- `.d{{ bp.abbr }}-block`
+- `.d{{ bp.abbr }}-table`
+- `.d{{ bp.abbr }}-table-cell`
+- `.d{{ bp.abbr }}-flex`
+- `.d{{ bp.abbr }}-inline-flex`{% endfor %}
+
+## Display in print
+
+Change the `display` value of elements when printing with our print display utilities.
+
+| Class | Print style |
+| --- | --- |
+| `.d-print-block` | Applies `display: block` to the element when printing |
+| `.d-print-inline` | Applies `display: inline` to the element when printing |
+| `.d-print-inline-block` | Applies `display: inline-block` to the element when printing |
+| `.d-print-none` | Applies `display: none` to the element when printing |