Rename pull-*-{left|right} classes to .float-*-left and .float-*-right

diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 0436e2dbe79f8d7e12f0fc207e3151de482e9596..a0f16e9b58d53e64c11823ece1c16e9d0634a6e2 100644 (file)
--- 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 pull-xs-right">
+    <nav class="nav navbar-nav float-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 }}
@@ -27,7 +27,7 @@
 
     <nav>
       <div class="clearfix">
-        <button class="navbar-toggler pull-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 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">
           &#9776;
         </button>
         <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">

diff --git a/docs/components/card.md b/docs/components/card.md
index 1cf116d86917d437f5a4a374af99cc5314b5ca98..ded52118d7e25c64da38959385198a8d3a3e7f91 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -230,7 +230,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 pull-xs-left">
+    <ul class="nav nav-tabs card-header-tabs float-xs-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
@@ -253,7 +253,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 pull-xs-left">
+    <ul class="nav nav-pills card-header-pills float-xs-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 8b3b9cd885611211da2bd37664ac18e72fb2306d..47667104c9bbf1da433b331c5e5c793064b12e5d 100644 (file)
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -31,15 +31,15 @@ Add tags to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">14</span>
+    <span class="tag tag-default tag-pill float-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">2</span>
+    <span class="tag tag-default tag-pill float-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">1</span>
+    <span class="tag tag-default tag-pill float-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 5c12153f37c78ea445ec41e9278549a335cc4012..db389ce04ad2ff3b8688ea39d72206eb4f1eb365 100644 (file)
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -47,7 +47,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 pull-xs-right">
+  <form class="form-inline float-xs-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-outline-success" type="submit">Search</button>
   </form>
@@ -129,7 +129,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-info" type="submit">Search</button>
     </form>
@@ -150,7 +150,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-secondary" type="submit">Search</button>
     </form>
@@ -171,7 +171,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-primary" type="submit">Search</button>
     </form>

diff --git a/docs/content/images.md b/docs/content/images.md
index 706badf7b98ae8debe45146091bd1709cca9b487..26a4ff7a4aab1fa229bda35c27af3d71c550600b 100644 (file)
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -46,13 +46,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border
 Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="rounded pull-xs-left" alt="...">
-<img src="..." class="rounded pull-xs-right" alt="...">
+<img src="..." class="rounded float-xs-left" alt="...">
+<img src="..." class="rounded float-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 ccf8d035bfd488282618ce30710feb7e2fc5c4c5..308810300b93db62c093557708e52ed7add5e242 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-xs-right">
+        <p class="float-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 51ce13d70e99339a6261894f273e9ebf8ff4818c..3397a3a7e340316d8fb1b098b42f9aca3d76f63e 100644 (file)
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -164,7 +164,7 @@
 
       <!-- FOOTER -->
       <footer>
-        <p class="pull-xs-right"><a href="#">Back to top</a></p>
+        <p class="float-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 5a80654ff2e8020745f7132a3065a79ec8db5871..d0cceb7d77147c86434e6bbc480eb711312930f8 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-xs-left">
+        <nav class="nav navbar-nav float-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="pull-xs-right">
+        <form class="float-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 fc55d06488a0a8d10e15c1addb38e5fd8a72bffe..b0ccda3c20edc3825230f058ad36e5d97f9774ec 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-xs-right">
+          <ul class="nav nav-pills float-xs-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 d0beae1275d8465fefa7e1060aee093ab956c2c4..b5dff3380b3fa6fbdcdd01c136235280e994a503 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 pull-xs-right">
+          <form class="form-inline float-xs-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 b3faba6b95abefe04a6565c6d989e68f704d7329..669221fa5becc42acd8653985e87130d68fb060c 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-xs-right hidden-sm-up">
+          <p class="float-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 63e9156b518018272679dedd41f57c57122ac1dc..ee990b97560d66a77a38f8b608fcc979c6a5df31 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-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <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 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-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</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 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 30ac6ee9cca984ca18abb57f8232657178ee8bd6..779e7d22942ff984524b84dbaacaa844e459cadb 100644 (file)
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -180,7 +180,7 @@ Dropped entirely for the new card component.
 
 ### Utilities
 
-- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
+- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`.
 - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
 - Dropped `.center-block` for the new `.mx-auto` class.
 

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index 8ebf214d2a992feb06f0e9701c2d417e0a67b952..e63ba3cdae036e068b5c88f1bea7812184e82299 100644 (file)
--- a/docs/utilities/clearfix.md
+++ b/docs/utilities/clearfix.md
@@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
 
 {% example html %}
 <div class="bg-info clearfix">
-  <button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
-  <button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
+  <button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
+  <button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
 </div>
 {% endexample %}

diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md
index b9c76d59dbd4cc928cf4e94fdae5f427c1d3ff6d..13ae8a56d5c63d7b068280d6f089f8df83f42b78 100644 (file)
--- a/docs/utilities/responsive-helpers.md
+++ b/docs/utilities/responsive-helpers.md
@@ -46,25 +46,25 @@ Aspect ratios can be customized with modifier classes.
 
 These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
 
-Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available.
+Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
 
 {% example html %}
-<div class="pull-xs-left">Float left on all viewport sizes</div><br>
-<div class="pull-xs-right">Float right on all viewport sizes</div><br>
-<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
-
-<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
-<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
-<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
-<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
+<div class="float-xs-left">Float left on all viewport sizes</div><br>
+<div class="float-xs-right">Float right on all viewport sizes</div><br>
+<div class="float-xs-none">Don't float on all viewport sizes</div><br>
+
+<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
+<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
 {% endexample %}
 
 {% highlight scss %}
 // Related simple non-responsive mixins
 .element {
-  @include pull-left;
+  @include float-left;
 }
 .another-element {
-  @include pull-right;
+  @include float-right;
 }
 {% endhighlight %}

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 1b5bf0fae6252eca3f4fafad15c89fbc0b6db5bc..e53ab34148ed55038c76dcb4adfb9631d54c17ae 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -51,4 +51,4 @@
 // @import "mixins/navbar-align";
 @import "mixins/grid-framework";
 @import "mixins/grid";
-@import "mixins/pulls";
+@import "mixins/float";

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 8d9ff7cecc5a435cc9831cc607c27ddc55b7a017..aef99aeba68f062682ac49eb0a2d7f9115969b28 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -3,7 +3,7 @@
 @import "utilities/clearfix";
 @import "utilities/display";
 @import "utilities/flex";
-@import "utilities/pulls";
+@import "utilities/float";
 @import "utilities/screenreaders";
 @import "utilities/spacing";
 @import "utilities/text";

diff --git a/scss/mixins/_pulls.scss b/scss/mixins/_float.scss
similarity index 58%
rename from scss/mixins/_pulls.scss
rename to scss/mixins/_float.scss
index 6bdff025d43cf858086b0eefb99f8febce118c8e..b30cf14688149dca16e030aefa5d813f0bc0cbec 100644 (file)
--- a/scss/mixins/_pulls.scss
+++ b/scss/mixins/_float.scss
@@ -1,6 +1,6 @@
-@mixin pull-left {
+@mixin float-left {
   float: left !important;
 }
-@mixin pull-right {
+@mixin float-right {
   float: right !important;
 }

diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
new file mode 100644 (file)
index 0000000..eea34bf
--- /dev/null
+++ b/scss/utilities/_float.scss
@@ -0,0 +1,13 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .float-#{$breakpoint}-left {
+      @include float-left();
+    }
+    .float-#{$breakpoint}-right {
+      @include float-right();
+    }
+    .float-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
+}

diff --git a/scss/utilities/_pulls.scss b/scss/utilities/_pulls.scss
deleted file mode 100644 (file)
index 7fec56c..0000000
--- a/scss/utilities/_pulls.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@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;
-    }
-  }
-}