From 11a534525a63275725badf8924496eaa688615a1 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 19:33:27 -0700
Subject: [PATCH 1/7] Move /utilities/flexbox to /utilities/flex to match name
 of SCSS file

---
 _data/nav.yml                              | 2 +-
 docs/4.0/components/forms.md               | 2 +-
 docs/4.0/components/list-group.md          | 4 ++--
 docs/4.0/components/navs.md                | 2 +-
 docs/4.0/components/pagination.md          | 2 +-
 docs/4.0/layout/utilities-for-layout.md    | 2 +-
 docs/4.0/migration.md                      | 2 +-
 docs/4.0/utilities/{flexbox.md => flex.md} | 0
 8 files changed, 8 insertions(+), 8 deletions(-)
 rename docs/4.0/utilities/{flexbox.md => flex.md} (100%)

diff --git a/_data/nav.yml b/_data/nav.yml
index 83ca134f7f77..79f532a8b158 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -58,7 +58,7 @@
     - title: Close icon
     - title: Colors
     - title: Display
-    - title: Flexbox
+    - title: Flex
     - title: Image replacement
     - title: Position
     - title: Responsive helpers
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 347de49f644b..16187d933628 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -534,7 +534,7 @@ And of course [custom form controls](#custom-forms) are supported.
 
 Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
 
-- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/) utilities.
+- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utilities.
 - Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
 - Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
 
diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md
index 66d76a77dd6f..da23ceba6fc6 100644
--- a/docs/4.0/components/list-group.md
+++ b/docs/4.0/components/list-group.md
@@ -109,7 +109,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 
 ## With badges
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
+Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
 
 {% example html %}
 <ul class="list-group">
@@ -130,7 +130,7 @@ Add badges to any list group item to show unread counts, activity, and more with
 
 ## Custom content
 
-Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
 
 {% example html %}
 <div class="list-group">
diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md
index 50526e883c06..845024c3d09f 100644
--- a/docs/4.0/components/navs.md
+++ b/docs/4.0/components/navs.md
@@ -220,7 +220,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
 {% endexample %}
 ## Working with flex utilities
 
-If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 {% example html %}
 <nav class="nav nav-pills flex-column flex-sm-row">
diff --git a/docs/4.0/components/pagination.md b/docs/4.0/components/pagination.md
index 0235f7da4593..97bc84d931fd 100644
--- a/docs/4.0/components/pagination.md
+++ b/docs/4.0/components/pagination.md
@@ -135,7 +135,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 
 ## Alignment
 
-Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
+Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
 
 {% example html %}
 <nav aria-label="Page navigation example">
diff --git a/docs/4.0/layout/utilities-for-layout.md b/docs/4.0/layout/utilities-for-layout.md
index d910214fae40..f5e115b20db5 100644
--- a/docs/4.0/layout/utilities-for-layout.md
+++ b/docs/4.0/layout/utilities-for-layout.md
@@ -14,7 +14,7 @@ Use our `display` utilities for responsively toggling common values of the `disp
 
 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/alerts/) 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/) for sizing, alignment, spacing, and more.
+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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) for sizing, alignment, spacing, and more.
 
 ## Margin and padding
 
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index b95c4d35ee03..1748fd924869 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -229,7 +229,7 @@ Dropped entirely for the new card component.
   - Added responsive variations to our text alignment classes `.text-{sm,md,lg,xl}-{left,center,right}`.
 - **Alignment and spacing:**
   - Added new [responsive margin and padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) for all sides, plus vertical and horizontal shorthands.
-  - Added boatload of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
+  - Added boatload of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
   - Dropped `.center-block` for the new `.mx-auto` class.
 
 ### Vendor prefix mixins
diff --git a/docs/4.0/utilities/flexbox.md b/docs/4.0/utilities/flex.md
similarity index 100%
rename from docs/4.0/utilities/flexbox.md
rename to docs/4.0/utilities/flex.md

From fccec790570626482403f6d916b4995216a427de Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 19:34:24 -0700
Subject: [PATCH 2/7] Move /utilities/typography to /utilities/text to match
 SCSS file name

---
 _data/nav.yml                                 | 2 +-
 docs/4.0/components/card.md                   | 2 +-
 docs/4.0/content/figures.md                   | 2 +-
 docs/4.0/content/images.md                    | 2 +-
 docs/4.0/content/typography.md                | 4 ++--
 docs/4.0/migration.md                         | 2 +-
 docs/4.0/utilities/{typography.md => text.md} | 0
 7 files changed, 7 insertions(+), 7 deletions(-)
 rename docs/4.0/utilities/{typography.md => text.md} (100%)

diff --git a/_data/nav.yml b/_data/nav.yml
index 79f532a8b158..a6d4a6bdce27 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -65,7 +65,7 @@
     - title: Screenreaders
     - title: Sizing
     - title: Spacing
-    - title: Typography
+    - title: Text
     - title: Vertical align
     - title: Visibility
 
diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index 28483fc1371c..d0d633d05217 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -242,7 +242,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 
 ## Text alignment
 
-You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment).
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
 
 {% example html %}
 <div class="card" style="width: 20rem;">
diff --git a/docs/4.0/content/figures.md b/docs/4.0/content/figures.md
index e7c181cabdd8..31e89edfe8cd 100644
--- a/docs/4.0/content/figures.md
+++ b/docs/4.0/content/figures.md
@@ -16,7 +16,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov
 </figure>
 {% endexample %}
 
-Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
 
 {% example html %}
 <figure class="figure">
diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 2198889c77b4..7906dab36224 100644
--- a/docs/4.0/content/images.md
+++ b/docs/4.0/content/images.md
@@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc
 
 ## Aligning images
 
-Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
+Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
   <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md
index 9ae27f0c47ca..65a6af99e281 100644
--- a/docs/4.0/content/typography.md
+++ b/docs/4.0/content/typography.md
@@ -8,7 +8,7 @@ toc: true
 
 ## Global settings
 
-Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/).
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/).
 
 - Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
 - For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
@@ -168,7 +168,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant
 
 ## Text utilities
 
-Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment).
+Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
 
 ## Abbreviations
 
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 1748fd924869..0f2819eddd0a 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -198,7 +198,7 @@ Dropped entirely for the new card component.
 - `.panel-default` removed and no replacement.
 - `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
 - `.panel-heading` to `.card-header`
-- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
+- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
 - `.panel-body` to `.card-body`
 - `.panel-footer` to `.card-footer`
 - `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
diff --git a/docs/4.0/utilities/typography.md b/docs/4.0/utilities/text.md
similarity index 100%
rename from docs/4.0/utilities/typography.md
rename to docs/4.0/utilities/text.md

From c2ce6d440975a53093c9776770e93b2cafda6d34 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 19:48:06 -0700
Subject: [PATCH 3/7] Redo the "responsive helpers" files

- Moves the embed SCSS to the utilities subfolder
- Separate the floats from the embed docs
- Rename embed docs from responsive helpers to embeds
---
 _data/nav.yml                                 |  3 +-
 .../{responsive-helpers.md => embed.md}       | 37 +++----------
 docs/4.0/utilities/float.md                   | 55 +++++++++++++++++++
 scss/_utilities.scss                          |  1 +
 scss/bootstrap.scss                           |  1 -
 .../_embed.scss}                              |  0
 6 files changed, 66 insertions(+), 31 deletions(-)
 rename docs/4.0/utilities/{responsive-helpers.md => embed.md} (53%)
 create mode 100644 docs/4.0/utilities/float.md
 rename scss/{_responsive-embed.scss => utilities/_embed.scss} (100%)

diff --git a/_data/nav.yml b/_data/nav.yml
index a6d4a6bdce27..1ce74e7823cb 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -58,10 +58,11 @@
     - title: Close icon
     - title: Colors
     - title: Display
+    - title: Embed
     - title: Flex
+    - title: Float
     - title: Image replacement
     - title: Position
-    - title: Responsive helpers
     - title: Screenreaders
     - title: Sizing
     - title: Spacing
diff --git a/docs/4.0/utilities/responsive-helpers.md b/docs/4.0/utilities/embed.md
similarity index 53%
rename from docs/4.0/utilities/responsive-helpers.md
rename to docs/4.0/utilities/embed.md
index ae65eff6b410..4f19874ffac5 100644
--- a/docs/4.0/utilities/responsive-helpers.md
+++ b/docs/4.0/utilities/embed.md
@@ -1,23 +1,29 @@
 ---
 layout: docs
-title: Responsive helpers
+title: Embeds
 description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
 group: utilities
 toc: true
 ---
 
-## Responsive embeds
+## About
 
 Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
 
 **Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
 
+## Example
+
+Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` and an aspect ratio. The `.embed-responsive-item` isn't strictly required, but we encourage it.
+
 {% example html %}
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
 </div>
 {% endexample %}
 
+## Aspect ratios
+
 Aspect ratios can be customized with modifier classes.
 
 {% highlight html %}
@@ -41,30 +47,3 @@ Aspect ratios can be customized with modifier classes.
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
 {% endhighlight %}
-
-## Responsive floats
-
-These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
-
-Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
-
-{% example html %}
-<div class="float-left">Float left on all viewport sizes</div><br>
-<div class="float-right">Float right on all viewport sizes</div><br>
-<div class="float-none">Don't float on all viewport sizes</div><br>
-
-<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
-<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
-<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
-<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
-{% endexample %}
-
-{% highlight scss %}
-// Related simple non-responsive mixins
-.element {
-  @include float-left;
-}
-.another-element {
-  @include float-right;
-}
-{% endhighlight %}
diff --git a/docs/4.0/utilities/float.md b/docs/4.0/utilities/float.md
new file mode 100644
index 000000000000..18c6b3951110
--- /dev/null
+++ b/docs/4.0/utilities/float.md
@@ -0,0 +1,55 @@
+---
+layout: docs
+title: Float
+description: Toggle floats on any element, across any breakpoint, using our responsive float utilities.
+group: utilities
+toc: true
+---
+
+## Overview
+
+These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system.
+
+## Classes
+
+Toggle a float with a class:
+
+{% example html %}
+<div class="float-left">Float left on all viewport sizes</div><br>
+<div class="float-right">Float right on all viewport sizes</div><br>
+<div class="float-none">Don't float on all viewport sizes</div>
+{% endexample %}
+
+## Mixins
+
+Or by Sass mixin:
+
+{% highlight scss %}
+.element {
+  @include float-left;
+}
+.another-element {
+  @include float-right;
+}
+.one-more {
+  @include float-none;
+}
+{% endhighlight %}
+
+## Responsive
+
+Responsive variations also exist for each `float` value.
+
+{% example html %}
+<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
+<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
+{% endexample %}
+
+Here are all the support classes;
+
+{% for bp in site.data.breakpoints %}
+- `.float{{ bp.abbr }}-left`
+- `.float{{ bp.abbr }}-right`
+- `.float{{ bp.abbr }}-none`{% endfor %}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 7d08ff2f8ca0..7b2a1ebe9d02 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -3,6 +3,7 @@
 @import "utilities/borders";
 @import "utilities/clearfix";
 @import "utilities/display";
+@import "utilities/embed";
 @import "utilities/flex";
 @import "utilities/float";
 @import "utilities/position";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 131d9b63df65..3bc8001fa412 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -33,7 +33,6 @@
 @import "progress";
 @import "media";
 @import "list-group";
-@import "responsive-embed";
 @import "close";
 @import "modal";
 @import "tooltip";
diff --git a/scss/_responsive-embed.scss b/scss/utilities/_embed.scss
similarity index 100%
rename from scss/_responsive-embed.scss
rename to scss/utilities/_embed.scss

From 5d85df47f54e288c0d59c709b544f53b66821181 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 19:48:24 -0700
Subject: [PATCH 4/7] update name

---
 docs/4.0/utilities/flex.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index bf2a6f37c0dd..4afd7907e6c7 100644
--- a/docs/4.0/utilities/flex.md
+++ b/docs/4.0/utilities/flex.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Flexbox
+title: Flex
 description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
 group: utilities
 toc: true

From 0c7cc42a3f61d4bbc8ee2dd7f8d94e7cbb0ef1c3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 19:53:24 -0700
Subject: [PATCH 5/7] update link

---
 docs/4.0/content/images.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 7906dab36224..7ef59b19d069 100644
--- a/docs/4.0/content/images.md
+++ b/docs/4.0/content/images.md
@@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc
 
 ## Aligning images
 
-Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
+Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/embed/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
   <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">

From f236ae35cc645d8337270d7f8632a20297f6830c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 1 Jul 2017 20:27:15 -0700
Subject: [PATCH 6/7] Add .text-truncate class. We already had a mixin and
 documented the class, so this fixes that.

---
 docs/4.0/utilities/text.md | 8 +++++++-
 scss/utilities/_text.scss  | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md
index 32e11335dd08..8dcbba078cb3 100644
--- a/docs/4.0/utilities/text.md
+++ b/docs/4.0/utilities/text.md
@@ -42,14 +42,20 @@ Prevent text from wrapping with a `.text-nowrap` class.
 </div>
 {% endexample %}
 
-For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis.
+For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
 
 {% example html %}
+<!-- Block level -->
 <div class="row">
   <div class="col-2 text-truncate">
     Praeterea iter est quasdam res quas ex communi.
   </div>
 </div>
+
+<!-- Inline level -->
+<span class="d-inline-block text-truncate" style="max-width: 150px;">
+  Praeterea iter est quasdam res quas ex communi.
+</span>
 {% endexample %}
 
 ## Text transform
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 90e06f5c43f0..7560b0117148 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -47,3 +47,7 @@
 .text-hide {
   @include text-hide();
 }
+
+.text-truncate {
+  @include text-truncate();
+}

From f399dfec6e30ce479b95036ff2b1b8d86ed7f9ae Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sat, 1 Jul 2017 20:56:40 -0700
Subject: [PATCH 7/7] doh, we already have that above

---
 scss/utilities/_text.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 7560b0117148..90e06f5c43f0 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -47,7 +47,3 @@
 .text-hide {
   @include text-hide();
 }
-
-.text-truncate {
-  @include text-truncate();
-}