diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 829ee4907..350345cff 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -173,6 +173,28 @@ Easily make an element as wide as its parent using the `.w-100` utility class, w
{% endexample %}
+## CSS `display` (`block`, `inline`, `inline-block`)
+
+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](../layout/responsive-utilities/) instead.
+
+{% example html %}
+
Inline
+Inline
+
+Block
+
+
+
inline-block
+ Boot that strap!
+
+
+
inline-block
+ Strap that boot!
+
+{% endexample %}
+
## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3f9e81f12..87b8ba6da 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,8 +1,9 @@
@import "utilities/background";
@import "utilities/clearfix";
+@import "utilities/display";
+@import "utilities/flex";
@import "utilities/pulls";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
-@import "utilities/flex";
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
new file mode 100644
index 000000000..d74049be8
--- /dev/null
+++ b/scss/utilities/_display.scss
@@ -0,0 +1,13 @@
+//
+// Display utilities
+//
+
+.d-block {
+ display: block !important;
+}
+.d-inline-block {
+ display: inline-block !important;
+}
+.d-inline {
+ display: inline !important;
+}