Responsive display utilities (#20934)

* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name
* make floats use the same format, add float-none mixin

3 files changed, 14 insertions, 14 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index 1bb0866fe..3c2770535 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-tabs card-header-tabs float-xs-left">
+    <ul class="nav nav-tabs card-header-tabs float-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
@@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-pills card-header-pills float-xs-left">
+    <ul class="nav nav-pills card-header-pills float-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index f241d0431..2997c9ab6 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -32,15 +32,15 @@ Add badges to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">14</span>
+    <span class="badge badge-default badge-pill float-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">2</span>
+    <span class="badge badge-default badge-pill float-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">1</span>
+    <span class="badge badge-default badge-pill float-right">1</span>
     Morbi leo risus
   </li>
 </ul>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index bb819ff9e..34fb6f28b 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -55,7 +55,7 @@ Here's an example of all the sub-components included in a default, non-responsiv
       </div>
     </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>
@@ -171,7 +171,7 @@ Place various form controls and components within a navbar with `.form-inline`.
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-outline-success" type="submit">Search</button>
   </form>
@@ -182,7 +182,7 @@ Input groups work, too:
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
@@ -195,7 +195,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <button class="btn btn-outline-success" type="button">Main button</button>
     <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
   </form>
@@ -218,7 +218,7 @@ Using our utility classes, you can change the alignment and appearance of your n
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <span class="navbar-text float-xs-right text-muted">
+  <span class="navbar-text float-right text-muted">
     Muted navbar text that's floated right
   </span>
 </nav>
@@ -229,7 +229,7 @@ Similarly, you can use utility classes to align navbar text to other navbar elem
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
   <a class="navbar-brand" href="#">Navbar</a>
-  <span class="navbar-text float-xs-left">
+  <span class="navbar-text float-left">
     Navbar text that's floated left
   </span>
 </nav>
@@ -258,7 +258,7 @@ Here are some examples to show what we mean.
         <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-info" type="submit">Search</button>
     </form>
@@ -279,7 +279,7 @@ Here are some examples to show what we mean.
         <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-secondary" type="submit">Search</button>
     </form>
@@ -300,7 +300,7 @@ Here are some examples to show what we mean.
         <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-primary" type="submit">Search</button>
     </form>