Add responsive float classes; fixes #13690

diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index e4bae8be78b2ee0792c21649349eee18bf163236..69609286e9007096b235d4e2043c55d7bbc8ea3b 100644 (file)
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,6 +1,6 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
   {% comment %}
-  <nav class="nav navbar-nav pull-right">
+  <nav class="nav navbar-nav pull-xs-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 }}
@@ -25,7 +25,7 @@
   {% endcomment %}
 
   <div class="clearfix">
-    <button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
+    <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
       &#9776;
     </button>
     <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 7a8f1d06f657e462984566b5e15cffccc064afea..5dbcca2d50f6d774c06cd68e55c21df62cc66e67 100644 (file)
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -31,15 +31,15 @@ Add labels to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-right">14</span>
+    <span class="label label-default label-pill pull-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-right">2</span>
+    <span class="label label-default label-pill pull-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-right">1</span>
+    <span class="label label-default label-pill pull-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 4db9f788a4e1d14c6631ee9c025b5b25b1b420c8..7cc75a952c098029c7f999bfa7ff1982239fdab4 100644 (file)
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -17,7 +17,7 @@ Here's what you need to know before getting started with the navbar:
 
 - Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
-- Use `.pull-left` and `.pull-right` to quickly align sub-components.
+- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
 ## Supported content
@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-  <form class="form-inline navbar-form pull-right">
+  <form class="form-inline navbar-form pull-xs-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
@@ -78,7 +78,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-right">
+    <form class="form-inline navbar-form pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-info-outline" type="submit">Search</button>
     </form>
@@ -99,7 +99,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-right">
+    <form class="form-inline navbar-form pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-secondary-outline" type="submit">Search</button>
     </form>
@@ -120,7 +120,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-right">
+    <form class="form-inline navbar-form pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-primary-outline" type="submit">Search</button>
     </form>

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index c2ac73bbc1355b4c448045d8a50783d561181822..728cd078dce3e41fac3f33d23eb6600e405fdd0c 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -168,25 +168,25 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur
 </button>
 {% endexample %}
 
-## Floats
+## Responsive floats
 
-Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
+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 mixins (`pull-left` and `pull-right`) are also available.
 
 {% example html %}
-<div class="pull-left">Float left</div>
-<div class="pull-right">Float right</div>
+<div class="pull-xs-left">Float left on all viewport sizes</div>
+<div class="pull-xs-right">Float right on all viewport sizes</div>
+<div class="pull-xs-none">Don't float on all viewport sizes</div>
+
+<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
+<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
+<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
+<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
 {% endexample %}
 
 {% highlight scss %}
-// Classes
-.pull-left {
-  float: left !important;
-}
-.pull-right {
-  float: right !important;
-}
-
-// Usage as mixins
+// Related simple non-responsive mixins
 .element {
   @include pull-left;
 }

diff --git a/docs/content/images.md b/docs/content/images.md
index 1f9abc982c945f3d72c5b26fd21b9439eeb08f9b..2ed58e2a03f12228f6f7a6b5377d41540e1ad8b3 100644 (file)
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -50,13 +50,13 @@ Add classes to an `<img>` element to easily style images in any project.
 Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded pull-left" alt="...">
-<img src="..." class="img-rounded pull-right" alt="...">
+<img src="..." class="img-rounded pull-xs-left" alt="...">
+<img src="..." class="img-rounded pull-xs-right" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">

diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index ccab2760cb706c1c94383e2fa4bb97640c95ccbb..2028ba12016b8395dc9368a3c063cc27751c577f 100644 (file)
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -104,7 +104,7 @@
 
     <footer class="text-muted">
       <div class="container">
-        <p class="pull-right">
+        <p class="pull-xs-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 540e609be3b90ac7b5105a9e9b51cef742a4e715..24ae22006be6bee622f7233ab31fa6911d704368 100644 (file)
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -164,7 +164,7 @@
 
       <!-- FOOTER -->
       <footer>
-        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p class="pull-xs-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 08a91898e72f30c714fd4750c113e60bee3a9238..87c507c3d35a129af306275a93242a72c65dc9fc 100644 (file)
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -29,13 +29,13 @@
       </button>
       <a class="navbar-brand" href="#">Project name</a>
       <div id="navbar">
-        <nav class="nav navbar-nav pull-left">
+        <nav class="nav navbar-nav pull-xs-left">
           <a class="nav-item nav-link" href="#">Dashboard</a>
           <a class="nav-item nav-link" href="#">Settings</a>
           <a class="nav-item nav-link" href="#">Profile</a>
           <a class="nav-item nav-link" href="#">Help</a>
         </nav>
-        <form class="navbar-form pull-right">
+        <form class="navbar-form pull-xs-right">
           <input type="text" class="form-control" placeholder="Search...">
         </form>
       </div>

diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index f0d4e0ac0089f806c04aed17f50b9e9f2059b9ae..210daf5f77b5d87dd82261fd5d6f0033245c94df 100644 (file)
--- 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 pull-right">
+          <ul class="nav nav-pills pull-xs-right">
             <li class="nav-item active">
               <a class="nav-link" 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 67447ad70e5d3f9fe5e338a92aeb0de350f603be..029ce8ed2fcec0764e3b2eead9ed12e4c518bc15 100644 (file)
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -41,7 +41,7 @@
               <a class="nav-link" href="#">About</a>
             </li>
           </ul>
-          <form class="form-inline navbar-form pull-right">
+          <form class="form-inline navbar-form pull-xs-right">
             <input class="form-control" type="text" placeholder="Search">
             <button class="btn btn-success-outline" type="submit">Search</button>
           </form>

diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index b1e133e2155947b2e5ff0e25e85ca7414c799838..cf12623b34a7769f6ce7b727fb1b3d93ab8b3be3 100644 (file)
--- 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-xs-12 col-sm-9">
-          <p class="pull-right hidden-sm-up">
+          <p class="pull-xs-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/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html
index 50fa795cf40c3f2e12389a6b21e08b8245464a6c..1edd38d67ddafd423d7e8854b774f1706bf7782d 100644 (file)
--- a/docs/examples/tooltip-viewport/index.html
+++ b/docs/examples/tooltip-viewport/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <button class="btn btn-secondary pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <button class="btn btn-secondary pull-xs-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 pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+      <button class="btn btn-secondary pull-xs-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/migration.md b/docs/migration.md
index 9ee4449fdedbfa233232c658527966b934227a59..1e6b55a9c248c91725024bfc534b453eaab690a1 100644 (file)
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -128,6 +128,11 @@ Dropped entirely for the new card component.
 
 - Renamed `.item` to `.carousel-item`.
 
+### Utilities
+
+- Added `.pull-{left,right,none}-{xs,sm,md,lg,xl}` classes for responsive floats
+- Removed `.pull-left` and `.pull-right` since they're redundant to `.pull-left-xs` and `.pull-right-xs`
+
 ## Documentation
 
 Our documentation received an upgrade across the board as well. Here's the low down:

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3a042bf39a89dbe07f1136b321f62e2542887a7c..94be621328887c994af57c96998efbeee634d597 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -10,12 +10,18 @@
   @include center-block();
 }
 
-.pull-right {
-  @include pull-right();
-}
-
-.pull-left {
-  @include pull-left();
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .pull-#{$breakpoint}-left {
+      @include pull-left();
+    }
+    .pull-#{$breakpoint}-right {
+      @include pull-right();
+    }
+    .pull-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
 }