diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 6dd3723f65..8ba41c7b42 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,7 +1,7 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar">
   <div class="container">
     {% comment %}
-    <nav class="nav navbar-nav float-xs-right">
+    <nav class="nav navbar-nav float-right">
       <div class="nav-item dropdown">
         <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           v{{ site.current_version }}
@@ -27,12 +27,12 @@
 
     <nav>
       <div class="clearfix">
-        <button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
           Bootstrap
         </a>
       </div>
-      <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+      <div class="collapse navbar-toggleable" id="bd-main-nav">
         <ul class="nav navbar-nav">
           <li class="nav-item active">
             <a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
diff --git a/docs/_layouts/simple.html b/docs/_layouts/simple.html
index df9bb6048b..bb35ec7920 100644
--- a/docs/_layouts/simple.html
+++ b/docs/_layouts/simple.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-xs-center text-sm-left">
+<div class="bd-pageheader text-center text-sm-left">
   <div class="container">
     <h1>{{ page.title }}</h1>
     <p class="lead">
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index dea8eb5f34..01cd018710 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -19,9 +19,9 @@
     }
   }
 
-  .flex-items-xs-top,
-  .flex-items-xs-middle,
-  .flex-items-xs-bottom {
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
     min-height: 6rem;
     background-color: rgba(255,0,0,.1);
   }
diff --git a/docs/components/card.md b/docs/components/card.md
index f876ccad2d..8fd2276cb7 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -151,13 +151,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card card-block text-xs-center">
+<div class="card card-block text-center">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card card-block text-xs-right">
+<div class="card card-block text-right">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 {% endexample %}
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     Featured
   </div>
@@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment.
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs float-left">
       <li class="nav-item">
@@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% endexample %}
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     <ul class="nav nav-pills card-header-pills float-left">
       <li class="nav-item">
@@ -333,7 +333,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
 Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
 
 {% example html %}
-<div class="card card-inverse card-primary text-xs-center">
+<div class="card card-inverse card-primary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-success text-xs-center">
+<div class="card card-inverse card-success text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-info text-xs-center">
+<div class="card card-inverse card-info text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-warning text-xs-center">
+<div class="card card-inverse card-warning text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-danger text-xs-center">
+<div class="card card-inverse card-danger text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col
 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
 
 {% example html %}
-<div class="card card-outline-primary text-xs-center">
+<div class="card card-outline-primary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-secondary text-xs-center">
+<div class="card card-outline-secondary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-success text-xs-center">
+<div class="card card-outline-success text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-info text-xs-center">
+<div class="card card-outline-info text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-warning text-xs-center">
+<div class="card card-outline-warning text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-danger text-xs-center">
+<div class="card card-outline-danger text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -542,7 +542,7 @@ Only applies to small devices and above.
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
-  <div class="card card-block card-inverse card-primary text-xs-center">
+  <div class="card card-block card-inverse card-primary text-center">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
       <footer>
@@ -552,7 +552,7 @@ Only applies to small devices and above.
       </footer>
     </blockquote>
   </div>
-  <div class="card card-block text-xs-center">
+  <div class="card card-block text-center">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -560,7 +560,7 @@ Only applies to small devices and above.
   <div class="card">
     <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
   </div>
-  <div class="card card-block text-xs-right">
+  <div class="card card-block text-right">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 49a6ced631..820470bbba 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc.
 </ul>
 {% endexample %}
 
-When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
+When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
 
 {% highlight html %}
 <ul class="list-group">
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Cras justo odio
     <span class="badge badge-default badge-pill">14</span>
   </li>
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Dapibus ac facilisis in
     <span class="badge badge-default badge-pill">2</span>
   </li>
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Morbi leo risus
     <span class="badge badge-default badge-pill">1</span>
   </li>
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 86fd0463fc..7ac1b52324 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -282,7 +282,7 @@ And pills, too:
 Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
 
 {% example html %}
-<ul class="nav nav-inline d-flex flex-items-xs-center">
+<ul class="nav nav-inline d-flex flex-items-center">
   <li class="nav-item">
     <a class="nav-link active" href="#">Active</a>
   </li>
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 2d8db33cbc..50d1f1b55a 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
 
 {% example html %}
 
-<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
+<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
 <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
 
-<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
+<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
 <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
 
-<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
+<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
 <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
 
-<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
+<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
 <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
 
-<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
+<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
 <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
 {% endexample %}
 
@@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
 Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
 
 {% example html %}
-<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
+<div class="text-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
 <progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
   <div class="progress">
     <span class="progress-bar" style="width: 25%;"></span>
diff --git a/docs/content/figures.md b/docs/content/figures.md
index b85ca8a4ac..4f90018c90 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 {% example html %}
 <figure class="figure">
   <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
-  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
+  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}
diff --git a/docs/content/images.md b/docs/content/images.md
index c9323bcf2f..fc8cda6b43 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <div class="text-xs-center">
+  <div class="text-center">
     <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
   </div>
 </div>
 
 {% highlight html %}
-<div class="text-xs-center">
+<div class="text-center">
   <img src="..." class="rounded" alt="...">
 </div>
 {% endhighlight %}
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 075d15345a..ecfa63befc 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <section class="jumbotron text-xs-center">
+    <section class="jumbotron text-center">
       <div class="container">
         <h1 class="jumbotron-heading">Album example</h1>
         <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
@@ -103,7 +103,7 @@
 
     <footer class="text-muted">
       <div class="container">
-        <p class="float-xs-right">
+        <p class="float-right">
           <a href="#">Back to top</a>
         </p>
         <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index e744c57e44..990553b97a 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -51,7 +51,7 @@
         <div class="carousel-item active">
           <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">
-            <div class="carousel-caption text-xs-left">
+            <div class="carousel-caption text-left">
               <h1>Example headline.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -71,7 +71,7 @@
         <div class="carousel-item">
           <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
           <div class="container">
-            <div class="carousel-caption text-xs-right">
+            <div class="carousel-caption text-right">
               <h1>One more for good measure.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@@ -164,7 +164,7 @@
 
       <!-- FOOTER -->
       <footer>
-        <p class="float-xs-right"><a href="#">Back to top</a></p>
+        <p class="float-right"><a href="#">Back to top</a></p>
         <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
       </footer>
 
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index cb9d880ecb..9abbcf19d5 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -92,7 +92,7 @@
         <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
           <h1>Dashboard</h1>
 
-          <section class="row text-xs-center placeholders">
+          <section class="row text-center placeholders">
             <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index 3d96259e0b..e27aca212d 100644
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@@ -23,7 +23,7 @@
     <div class="container">
       <div class="header clearfix">
         <nav>
-          <ul class="nav nav-pills float-xs-right">
+          <ul class="nav nav-pills float-right">
             <li class="nav-item">
               <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
             </li>
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index f04d187487..3d35b7904f 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -23,7 +23,7 @@
     <div class="container">
       <nav class="navbar navbar-light bg-faded">
         <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
-        <div class="collapse navbar-toggleable-xs" id="navbar-header">
+        <div class="collapse navbar-toggleable" id="navbar-header">
           <a class="navbar-brand" href="#">Navbar</a>
           <ul class="nav navbar-nav">
             <li class="nav-item active">
@@ -39,7 +39,7 @@
               <a class="nav-link" href="#">About</a>
             </li>
           </ul>
-          <form class="form-inline float-xs-right">
+          <form class="form-inline float-right">
             <input class="form-control" type="text" placeholder="Search">
             <button class="btn btn-outline-success" type="submit">Search</button>
           </form>
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index cf59f4722d..f43e0e5d5e 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -35,7 +35,7 @@
       <div class="row row-offcanvas row-offcanvas-right">
 
         <div class="col-12 col-sm-9">
-          <p class="float-xs-right hidden-sm-up">
+          <p class="float-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
           <div class="jumbotron">
diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html
index 855f0418d6..77242a6f64 100644
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@@ -31,7 +31,7 @@
       <nav class="navbar navbar-light navbar-static-top bg-faded">
         <div class="container">
           <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
-          <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+          <div class="collapse navbar-toggleable" id="exCollapsingNavbar2">
             <a class="navbar-brand" href="#">Sticky footer</a>
             <ul class="nav navbar-nav">
               <li class="nav-item active">
diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html
index ee990b9756..2ca1ed2b08 100644
--- a/docs/examples/tooltip-viewport/index.html
+++ b/docs/examples/tooltip-viewport/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
     <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
     <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
 
@@ -30,7 +30,7 @@
       <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
       <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
 
-      <button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+      <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
 
       <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
     </div>
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index eafe7b59c5..4823925041 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-xs-top">
+  <div class="row flex-items-top">
     <div class="col-xs">
       One of three columns
     </div>
@@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-xs-middle">
+  <div class="row flex-items-middle">
     <div class="col-xs">
       One of three columns
     </div>
@@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-xs-bottom">
+  <div class="row flex-items-bottom">
     <div class="col-xs">
       One of three columns
     </div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-xs-top">
+    <div class="col-xs flex-top">
       One of three columns
     </div>
-    <div class="col-xs flex-xs-middle">
+    <div class="col-xs flex-middle">
       One of three columns
     </div>
-    <div class="col-xs flex-xs-bottom">
+    <div class="col-xs flex-bottom">
       One of three columns
     </div>
   </div>
@@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-xs-left">
+  <div class="row flex-items-left">
     <div class="col-4">
       One of two columns
     </div>
@@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-center">
+  <div class="row flex-items-center">
     <div class="col-4">
       One of two columns
     </div>
@@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-right">
+  <div class="row flex-items-right">
     <div class="col-4">
       One of two columns
     </div>
@@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-around">
+  <div class="row flex-items-around">
     <div class="col-4">
       One of two columns
     </div>
@@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-between">
+  <div class="row flex-items-between">
     <div class="col-4">
       One of two columns
     </div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-xs-unordered">
+    <div class="col-xs flex-unordered">
       First, but unordered
     </div>
-    <div class="col-xs flex-xs-last">
+    <div class="col-xs flex-last">
       Second, but last
     </div>
-    <div class="col-xs flex-xs-first">
+    <div class="col-xs flex-first">
       Third, but first
     </div>
   </div>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 8c0d329173..8de8ccf469 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
     <thead>
       <tr>
         <th></th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Extra small<br>
           <small>&lt;576px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Small<br>
           <small>&ge;576px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Medium<br>
           <small>&ge;768px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Large<br>
           <small>&ge;992px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Extra large<br>
           <small>&ge;1200px</small>
         </th>
diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index a023a79aaf..49410df098 100644
--- a/docs/utilities/clearfix.md
+++ b/docs/utilities/clearfix.md
@@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
 
 {% highlight scss %}
 // Mixin itself
-.clearfix() {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
+@mixin clearfix() {
+  &::after {
+    display: block;
+    content: "";
     clear: both;
   }
 }
diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md
index 8881b177bc..670b6f188b 100644
--- a/docs/utilities/sizing-and-positioning.md
+++ b/docs/utilities/sizing-and-positioning.md
@@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v
 Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes.
 
 {% example html %}
-<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
+<img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%">
 {% endexample %}
 
 {% example html %}
@@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
   <div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div>
 </div>
 {% endexample %}
+
+You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
+
+{% example html %}
+<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
+{% endexample %}
+
+{% example html %}
+<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
+  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
+</div>
+{% endexample %}
diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md
index 7db133d054..42b61131e2 100644
--- a/docs/utilities/typography.md
+++ b/docs/utilities/typography.md
@@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes.
 For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
 
 {% example html %}
-<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
-<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
-<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
+<p class="text-left">Left aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-right">Right aligned text on all viewport sizes.</p>
 
 <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
 <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 9b39acd362..9cb1438ca7 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -221,7 +221,7 @@ const ScrollSpy = (($) => {
         return
       }
 
-      if (this._activeTarget && scrollTop < this._offsets[0]) {
+      if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
         this._activeTarget = null
         this._clear()
         return
diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index a349b5337e..877ec67a2a 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -287,6 +287,50 @@ $(function () {
       .scrollTop(201)
   })
 
+  QUnit.test('should NOT clear selection if above the first section and first section is at the top', function (assert) {
+    assert.expect(4)
+    var done = assert.async()
+
+    var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+        + '<nav id="navigation" class="navbar">'
+        + '<ul class="nav navbar-nav">'
+        + '<li><a id="one-link"   class="nav-link active" href="#one">One</a></li>'
+        + '<li><a id="two-link"   class="nav-link" href="#two">Two</a></li>'
+        + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+        + '</ul>'
+        + '</nav>'
+    $(sectionHTML).appendTo('#qunit-fixture')
+
+    var negativeHeight = -10
+    var startOfSectionTwo = 101
+
+    var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
+        + '<div id="one" style="height: 100px;"/>'
+        + '<div id="two" style="height: 100px;"/>'
+        + '<div id="three" style="height: 100px;"/>'
+        + '<div id="spacer" style="height: 100px;"/>'
+        + '</div>'
+    var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
+
+    $scrollspy
+      .bootstrapScrollspy({
+        target: '#navigation',
+        offset: $scrollspy.position().top
+      })
+      .one('scroll', function () {
+        assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
+        assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section')
+        $scrollspy
+          .one('scroll', function () {
+            assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
+            assert.strictEqual($('.active').is('#one-link'), true, '"active" class on first section')
+            done()
+          })
+          .scrollTop(negativeHeight)
+      })
+      .scrollTop(startOfSectionTwo)
+  })
+
   QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) {
     assert.expect(5)
     var navbarHtml =
diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 6681def402..2f5dc20e12 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -492,7 +492,7 @@ linters:
   SpaceBeforeBrace:
     enabled: true
     style: space # or 'new_line'
-    allow_single_line_padding: false
+    allow_single_line_padding: true
 
   SpaceBetweenParens:
     enabled: true
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index ebf27af8b2..c6cc4e2fec 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -128,42 +128,6 @@
   }
 }
 
-// scss-lint:disable ImportantRule
-.navbar-toggleable {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-
-    &-#{$breakpoint} {
-      @include clearfix;
-
-      @include media-breakpoint-down($breakpoint) {
-        .navbar-brand {
-          display: block;
-          float: none;
-          margin-top: .5rem;
-          margin-right: 0;
-        }
-
-        .navbar-nav {
-          margin-top: .5rem;
-          margin-bottom: .5rem;
-
-          .dropdown-menu {
-            position: static;
-            float: none;
-          }
-        }
-      }
-
-      @include media-breakpoint-up($next) {
-        display: block;
-      }
-    }
-  }
-}
-// scss-lint:enable ImportantRule
-
-
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
@@ -284,48 +248,48 @@
   }
 }
 
-
 // Navbar toggleable
 //
 // Custom override for collapse plugin in navbar.
 
+// Placed at the end of the file so it can override some CSS properties
+// scss-lint:disable ImportantRule
 .navbar-toggleable {
-  &-xs {
-    @include clearfix;
-    @include media-breakpoint-down(xs) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
 
-  &-sm {
-    @include clearfix;
-    @include media-breakpoint-down(sm) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
+    // Get rid of the 'xs' prefix while reducing duplication
+    #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
+      @include clearfix;
 
-  &-md {
-    @include clearfix;
-    @include media-breakpoint-down(md) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
+      @include media-breakpoint-down($breakpoint) {
+        .navbar-brand {
+          display: block;
+          float: none;
+          margin-top: .5rem;
+          margin-right: 0;
+        }
+
+        .navbar-nav {
+          margin-top: .5rem;
+          margin-bottom: .5rem;
+
+          .dropdown-menu {
+            position: static;
+            float: none;
+          }
+
+          .nav-item {
+            float: none;
+            margin-left: 0;
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        display: block !important;
       }
-    }
-    @include media-breakpoint-up(lg) {
-      display: block !important;
     }
   }
 }
+// scss-lint:enable ImportantRule
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index d0ae125f3d..b72cf27128 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
+    display: block;
     content: "";
-    display: table;
     clear: both;
   }
 }
diff --git a/scss/utilities/_align.scss b/scss/utilities/_align.scss
index 4886e059fe..4dbbbc2dbc 100644
--- a/scss/utilities/_align.scss
+++ b/scss/utilities/_align.scss
@@ -1,6 +1,6 @@
-.align-baseline { vertical-align: baseline !important; } // Browser default
-.align-top { vertical-align: top !important; }
-.align-middle { vertical-align: middle !important; }
-.align-bottom { vertical-align: bottom !important; }
+.align-baseline    { vertical-align: baseline !important; } // Browser default
+.align-top         { vertical-align: top !important; }
+.align-middle      { vertical-align: middle !important; }
+.align-bottom      { vertical-align: bottom !important; }
 .align-text-bottom { vertical-align: text-bottom !important; }
-.align-text-top { vertical-align: text-top !important; }
+.align-text-top    { vertical-align: text-top !important; }
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index 015c9b943b..b256881e5e 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -2,11 +2,11 @@
 // Border
 //
 
-.border-0 { border: 0 !important; }
-.border-top-0 { border-top: 0 !important; }
-.border-right-0 { border-right: 0 !important; }
+.border-0        { border: 0 !important; }
+.border-top-0    { border-top: 0 !important; }
+.border-right-0  { border-right: 0 !important; }
 .border-bottom-0 { border-bottom: 0 !important; }
-.border-left-0 { border-left: 0 !important; }
+.border-left-0   { border-left: 0 !important; }
 
 //
 // Border-radius
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index a79dddbde1..6325f72227 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -8,23 +8,21 @@
     $min: breakpoint-min($breakpoint, $grid-breakpoints);
 
     @if $min {
-      @media (min-width: $min) {
-        .d-#{$breakpoint}-none { display: none !important; }
-        .d-#{$breakpoint}-inline { display: inline !important; }
-        .d-#{$breakpoint}-inline-block { display: inline-block !important; }
-        .d-#{$breakpoint}-block { display: block !important; }
-        .d-#{$breakpoint}-table { display: table !important; }
-        .d-#{$breakpoint}-table-cell { display: table-cell !important; }
-        .d-#{$breakpoint}-flex { display: flex !important; }
-      }
+      .d-#{$breakpoint}-none         { display: none !important; }
+      .d-#{$breakpoint}-inline       { display: inline !important; }
+      .d-#{$breakpoint}-inline-block { display: inline-block !important; }
+      .d-#{$breakpoint}-block        { display: block !important; }
+      .d-#{$breakpoint}-table        { display: table !important; }
+      .d-#{$breakpoint}-table-cell   { display: table-cell !important; }
+      .d-#{$breakpoint}-flex         { display: flex !important; }
     } @else {
-      .d-none { display: none !important; }
-      .d-inline { display: inline !important; }
+      .d-none         { display: none !important; }
+      .d-inline       { display: inline !important; }
       .d-inline-block { display: inline-block !important; }
-      .d-block { display: block !important; }
-      .d-table { display: table !important; }
-      .d-table-cell { display: table-cell !important; }
-      .d-flex { display: flex !important; }
+      .d-block        { display: block !important; }
+      .d-table        { display: table !important; }
+      .d-table-cell   { display: table-cell !important; }
+      .d-flex         { display: flex !important; }
     }
   }
 }
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 502885a81e..6e3c39b8f7 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -4,34 +4,54 @@
 
 @if $enable-flex {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    // Flex column reordering
     @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-first { order: -1; }
-      .flex-#{$breakpoint}-last { order: 1; }
-      .flex-#{$breakpoint}-unordered { order: 0; }
-    }
+      $min: breakpoint-min($breakpoint, $grid-breakpoints);
 
-    // Alignment for every item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
-      .flex-items-#{$breakpoint}-middle { align-items: center; }
-      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
-    }
+      @if $min {
+        // Flex column reordering
+        .flex-#{$breakpoint}-first     { order: -1; }
+        .flex-#{$breakpoint}-last      { order: 1; }
+        .flex-#{$breakpoint}-unordered { order: 0; }
 
-    // Alignment per item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-top   { align-self: flex-start; }
-      .flex-#{$breakpoint}-middle { align-self: center; }
-      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
-    }
+        // Alignment for every item
+        .flex-items-#{$breakpoint}-top    { align-items: flex-start; }
+        .flex-items-#{$breakpoint}-middle { align-items: center; }
+        .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
 
-    // Horizontal alignment of item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
-      .flex-items-#{$breakpoint}-center { justify-content: center; }
-      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
-      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
-      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+        // Alignment per item
+        .flex-#{$breakpoint}-top    { align-self: flex-start; }
+        .flex-#{$breakpoint}-middle { align-self: center; }
+        .flex-#{$breakpoint}-bottom { align-self: flex-end; }
+
+        // Horizontal alignment of item
+        .flex-items-#{$breakpoint}-left    { justify-content: flex-start; }
+        .flex-items-#{$breakpoint}-center  { justify-content: center; }
+        .flex-items-#{$breakpoint}-right   { justify-content: flex-end; }
+        .flex-items-#{$breakpoint}-around  { justify-content: space-around; }
+        .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+      } @else {
+        // Flex column reordering
+        .flex-first     { order: -1; }
+        .flex-last      { order: 1; }
+        .flex-unordered { order: 0; }
+
+        // Alignment for every item
+        .flex-items-top    { align-items: flex-start; }
+        .flex-items-middle { align-items: center; }
+        .flex-items-bottom { align-items: flex-end; }
+
+        // Alignment per item
+        .flex-top    { align-self: flex-start; }
+        .flex-middle { align-self: center; }
+        .flex-bottom { align-self: flex-end; }
+
+        // Horizontal alignment of item
+        .flex-items-left    { justify-content: flex-start; }
+        .flex-items-center  { justify-content: center; }
+        .flex-items-right   { justify-content: flex-end; }
+        .flex-items-around  { justify-content: space-around; }
+        .flex-items-between { justify-content: space-between; }
+      }
     }
   }
 }
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
index 99c2efdc03..5f8c2d5879 100644
--- a/scss/utilities/_float.scss
+++ b/scss/utilities/_float.scss
@@ -4,16 +4,14 @@
 
     @if $min {
       // everything else
-      @media (min-width: $min) {
-        .float-#{$breakpoint}-left { @include float-left; }
-        .float-#{$breakpoint}-right { @include float-right; }
-        .float-#{$breakpoint}-none { @include float-none; }
-      }
+      .float-#{$breakpoint}-left  { @include float-left; }
+      .float-#{$breakpoint}-right { @include float-right; }
+      .float-#{$breakpoint}-none  { @include float-none; }
     } @else {
       // xs
-      .float-left { @include float-left; }
+      .float-left  { @include float-left; }
       .float-right { @include float-right; }
-      .float-none { @include float-none; }
+      .float-none  { @include float-none; }
     }
   }
 }
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 9c13b6022f..a845cf9ad8 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -3,6 +3,9 @@
 .w-100 { width: 100% !important; }
 .h-100 { height: 100% !important; }
 
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
+
 // Margin and Padding
 
 .mx-auto {
@@ -21,24 +24,22 @@
 
         @if $min {
           // everything else
-          @media (min-width: $min) {
-            .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
-            .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top:    $length-y !important; }
-            .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right:  $length-x !important; }
-            .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
-            .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left:   $length-x !important; }
-            .#{$abbrev}x-#{$breakpoint}-#{$size} {
-              #{$prop}-right:  $length-x !important;
-              #{$prop}-left:   $length-x !important;
-            }
-            .#{$abbrev}y-#{$breakpoint}-#{$size} {
-              #{$prop}-top:    $length-y !important;
-              #{$prop}-bottom: $length-y !important;
-            }
+          .#{$abbrev}-#{$breakpoint}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
+          .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top:    $length-y !important; }
+          .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right:  $length-x !important; }
+          .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
+          .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left:   $length-x !important; }
+          .#{$abbrev}x-#{$breakpoint}-#{$size} {
+            #{$prop}-right:  $length-x !important;
+            #{$prop}-left:   $length-x !important;
+          }
+          .#{$abbrev}y-#{$breakpoint}-#{$size} {
+            #{$prop}-top:    $length-y !important;
+            #{$prop}-bottom: $length-y !important;
           }
         } @else {
           // xs
-          .#{$abbrev}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+          .#{$abbrev}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
           .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y !important; }
           .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x !important; }
           .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 5ad2ee9b3a..75f694a853 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -4,31 +4,39 @@
 
 // Alignment
 
-.text-justify        { text-align: justify !important; }
-.text-nowrap         { white-space: nowrap !important; }
-.text-truncate       { @include text-truncate; }
+.text-justify  { text-align: justify !important; }
+.text-nowrap   { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
 
 // Responsive alignment
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    .text-#{$breakpoint}-left   { text-align: left !important; }
-    .text-#{$breakpoint}-right  { text-align: right !important; }
-    .text-#{$breakpoint}-center { text-align: center !important; }
+    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+    @if $min {
+      .text-#{$breakpoint}-left   { text-align: left !important; }
+      .text-#{$breakpoint}-right  { text-align: right !important; }
+      .text-#{$breakpoint}-center { text-align: center !important; }
+    } @else {
+      .text-left   { text-align: left !important; }
+      .text-right  { text-align: right !important; }
+      .text-center { text-align: center !important; }
+    }
   }
 }
 
 // Transformation
 
-.text-lowercase      { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
+.text-lowercase  { text-transform: lowercase !important; }
+.text-uppercase  { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
 
 // Weight and italics
 
-.font-weight-normal  { font-weight: $font-weight-normal; }
-.font-weight-bold    { font-weight: $font-weight-bold; }
-.font-italic         { font-style: italic; }
+.font-weight-normal { font-weight: $font-weight-normal; }
+.font-weight-bold   { font-weight: $font-weight-bold; }
+.font-italic        { font-style: italic; }
 
 // Contextual colors