Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

22 files changed, 92 insertions, 83 deletions

diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 6dd3723f6..8ba41c7b4 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 df9bb6048..bb35ec792 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 dea8eb5f3..01cd01871 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 f876ccad2..8fd2276cb 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 49a6ced63..820470bbb 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 86fd0463f..7ac1b5232 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 2d8db33cb..50d1f1b55 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 b85ca8a4a..4f90018c9 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 c9323bcf2..fc8cda6b4 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 075d15345..ecfa63bef 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 e744c57e4..990553b97 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 cb9d880ec..9abbcf19d 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 3d96259e0..e27aca212 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 f04d18748..3d35b7904 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 cf59f4722..f43e0e5d5 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 855f0418d..77242a6f6 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 ee990b975..2ca1ed2b0 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 eafe7b59c..482392504 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 8c0d32917..8de8ccf46 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 a023a79aa..49410df09 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 8881b177b..670b6f188 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 7db133d05..42b61131e 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>