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

12 files changed, 73 insertions, 50 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>
diff --git a/docs/content/images.md b/docs/content/images.md
index da342b546..c9323bcf2 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -47,13 +47,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border
 Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
-  <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">
+  <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="rounded float-xs-left" alt="...">
-<img src="..." class="rounded float-xs-right" alt="...">
+<img src="..." class="rounded float-left" alt="...">
+<img src="..." class="rounded float-right" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
diff --git a/docs/migration.md b/docs/migration.md
index ea7c67f65..4b1582482 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -185,7 +185,8 @@ Dropped entirely for the new card component.
 
 ### Utilities
 
-- 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`.
+- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`).
+- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-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 e63ba3cda..d1327566c 100644
--- 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 float-xs-left">Example Button pulled left</button>
-  <button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
+  <button class="btn btn-secondary float-left">Example Button pulled left</button>
+  <button class="btn btn-secondary float-right">Example Button pullred right</button>
 </div>
 {% endexample %}
diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md
index 13ae8a56d..35e7fcf2f 100644
--- a/docs/utilities/responsive-helpers.md
+++ b/docs/utilities/responsive-helpers.md
@@ -49,9 +49,9 @@ These utility classes float an element to the left or right, or disable floating
 Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
 
 {% example html %}
-<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-left">Float left on all viewport sizes</div><br>
+<div class="float-right">Float right on all viewport sizes</div><br>
+<div class="float-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>
diff --git a/js/dist/alert.js b/js/dist/alert.js
index 4a583a8ae..4b9970166 100644
--- a/js/dist/alert.js
+++ b/js/dist/alert.js
@@ -4,7 +4,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.5): alert.js
+ * Bootstrap (v4.0.0-alpha.4): alert.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -18,7 +18,7 @@ var Alert = function ($) {
    */
 
   var NAME = 'alert';
-  var VERSION = '4.0.0-alpha.5';
+  var VERSION = '4.0.0-alpha.4';
   var DATA_KEY = 'bs.alert';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -38,7 +38,7 @@ var Alert = function ($) {
   var ClassName = {
     ALERT: 'alert',
     FADE: 'fade',
-    ACTIVE: 'active'
+    IN: 'in'
   };
 
   /**
@@ -101,18 +101,14 @@ var Alert = function ($) {
     };
 
     Alert.prototype._removeElement = function _removeElement(element) {
-      var _this = this;
-
-      $(element).removeClass(ClassName.ACTIVE);
+      $(element).removeClass(ClassName.IN);
 
       if (!Util.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) {
         this._destroyElement(element);
         return;
       }
 
-      $(element).one(Util.TRANSITION_END, function (event) {
-        return _this._destroyElement(element, event);
-      }).emulateTransitionEnd(TRANSITION_DURATION);
+      $(element).one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION);
     };
 
     Alert.prototype._destroyElement = function _destroyElement(element) {
diff --git a/js/dist/alert.js.map b/js/dist/alert.js.map
index e3d5a3853..f5a55dbe2 100644
--- a/js/dist/alert.js.map
+++ b/js/dist/alert.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/alert.js"],"names":["Alert","$","NAME","VERSION","DATA_KEY","EVENT_KEY","DATA_API_KEY","JQUERY_NO_CONFLICT","fn","TRANSITION_DURATION","Selector","DISMISS","Event","CLOSE","CLOSED","CLICK_DATA_API","ClassName","ALERT","FADE","ACTIVE","element","_element","close","rootElement","_getRootElement","customEvent","_triggerCloseEvent","isDefaultPrevented","_removeElement","dispose","removeData","selector","Util","getSelectorFromElement","parent","closest","closeEvent","trigger","removeClass","supportsTransitionEnd","hasClass","_destroyElement","one","TRANSITION_END","event","emulateTransitionEnd","detach","remove","_jQueryInterface","config","each","$element","data","_handleDismiss","alertInstance","preventDefault","document","on","Constructor","noConflict","jQuery"],"mappings":"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","file":"alert.js","sourcesContent":["import Util from './util'\n\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-alpha.5): alert.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Alert = (($) => {\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Constants\n   * ------------------------------------------------------------------------\n   */\n\n  const NAME                = 'alert'\n  const VERSION             = '4.0.0-alpha.5'\n  const DATA_KEY            = 'bs.alert'\n  const EVENT_KEY           = `.${DATA_KEY}`\n  const DATA_API_KEY        = '.data-api'\n  const JQUERY_NO_CONFLICT  = $.fn[NAME]\n  const TRANSITION_DURATION = 150\n\n  const Selector = {\n    DISMISS : '[data-dismiss=\"alert\"]'\n  }\n\n  const Event = {\n    CLOSE          : `close${EVENT_KEY}`,\n    CLOSED         : `closed${EVENT_KEY}`,\n    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`\n  }\n\n  const ClassName = {\n    ALERT  : 'alert',\n    FADE   : 'fade',\n    ACTIVE : 'active'\n  }\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Class Definition\n   * ------------------------------------------------------------------------\n   */\n\n  class Alert {\n\n    constructor(element) {\n      this._element = element\n    }\n\n\n    // getters\n\n    static get VERSION() {\n      return VERSION\n    }\n\n\n    // public\n\n    close(element) {\n      element = element || this._element\n\n      let rootElement = this._getRootElement(element)\n      let customEvent = this._triggerCloseEvent(rootElement)\n\n      if (customEvent.isDefaultPrevented()) {\n        return\n      }\n\n      this._removeElement(rootElement)\n    }\n\n    dispose() {\n      $.removeData(this._element, DATA_KEY)\n      this._element = null\n    }\n\n\n    // private\n\n    _getRootElement(element) {\n      let selector = Util.getSelectorFromElement(element)\n      let parent   = false\n\n      if (selector) {\n        parent = $(selector)[0]\n      }\n\n      if (!parent) {\n        parent = $(element).closest(`.${ClassName.ALERT}`)[0]\n      }\n\n      return parent\n    }\n\n    _triggerCloseEvent(element) {\n      let closeEvent = $.Event(Event.CLOSE)\n\n      $(element).trigger(closeEvent)\n      return closeEvent\n    }\n\n    _removeElement(element) {\n      $(element).removeClass(ClassName.ACTIVE)\n\n      if (!Util.supportsTransitionEnd() ||\n          !$(element).hasClass(ClassName.FADE)) {\n        this._destroyElement(element)\n        return\n      }\n\n      $(element)\n        .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))\n        .emulateTransitionEnd(TRANSITION_DURATION)\n    }\n\n    _destroyElement(element) {\n      $(element)\n        .detach()\n        .trigger(Event.CLOSED)\n        .remove()\n    }\n\n\n    // static\n\n    static _jQueryInterface(config) {\n      return this.each(function () {\n        let $element = $(this)\n        let data     = $element.data(DATA_KEY)\n\n        if (!data) {\n          data = new Alert(this)\n          $element.data(DATA_KEY, data)\n        }\n\n        if (config === 'close') {\n          data[config](this)\n        }\n      })\n    }\n\n    static _handleDismiss(alertInstance) {\n      return function (event) {\n        if (event) {\n          event.preventDefault()\n        }\n\n        alertInstance.close(this)\n      }\n    }\n\n  }\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Data Api implementation\n   * ------------------------------------------------------------------------\n   */\n\n  $(document).on(\n    Event.CLICK_DATA_API,\n    Selector.DISMISS,\n    Alert._handleDismiss(new Alert())\n  )\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * jQuery\n   * ------------------------------------------------------------------------\n   */\n\n  $.fn[NAME]             = Alert._jQueryInterface\n  $.fn[NAME].Constructor = Alert\n  $.fn[NAME].noConflict  = function () {\n    $.fn[NAME] = JQUERY_NO_CONFLICT\n    return Alert._jQueryInterface\n  }\n\n  return Alert\n\n})(jQuery)\n\nexport default Alert\n"]}
\ No newline at end of file
+{"version":3,"sources":["../src/alert.js"],"names":["Alert","$","NAME","VERSION","DATA_KEY","EVENT_KEY","DATA_API_KEY","JQUERY_NO_CONFLICT","fn","TRANSITION_DURATION","Selector","DISMISS","Event","CLOSE","CLOSED","CLICK_DATA_API","ClassName","ALERT","FADE","IN","element","_element","close","rootElement","_getRootElement","customEvent","_triggerCloseEvent","isDefaultPrevented","_removeElement","dispose","removeData","selector","Util","getSelectorFromElement","parent","closest","closeEvent","trigger","removeClass","supportsTransitionEnd","hasClass","_destroyElement","one","TRANSITION_END","proxy","emulateTransitionEnd","detach","remove","_jQueryInterface","config","each","$element","data","_handleDismiss","alertInstance","event","preventDefault","document","on","Constructor","noConflict","jQuery"],"mappings":"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","file":"alert.js","sourcesContent":["import Util from './util'\n\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-alpha.4): alert.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Alert = (($) => {\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Constants\n   * ------------------------------------------------------------------------\n   */\n\n  const NAME                = 'alert'\n  const VERSION             = '4.0.0-alpha.4'\n  const DATA_KEY            = 'bs.alert'\n  const EVENT_KEY           = `.${DATA_KEY}`\n  const DATA_API_KEY        = '.data-api'\n  const JQUERY_NO_CONFLICT  = $.fn[NAME]\n  const TRANSITION_DURATION = 150\n\n  const Selector = {\n    DISMISS : '[data-dismiss=\"alert\"]'\n  }\n\n  const Event = {\n    CLOSE          : `close${EVENT_KEY}`,\n    CLOSED         : `closed${EVENT_KEY}`,\n    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`\n  }\n\n  const ClassName = {\n    ALERT : 'alert',\n    FADE  : 'fade',\n    IN    : 'in'\n  }\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Class Definition\n   * ------------------------------------------------------------------------\n   */\n\n  class Alert {\n\n    constructor(element) {\n      this._element = element\n    }\n\n\n    // getters\n\n    static get VERSION() {\n      return VERSION\n    }\n\n\n    // public\n\n    close(element) {\n      element = element || this._element\n\n      let rootElement = this._getRootElement(element)\n      let customEvent = this._triggerCloseEvent(rootElement)\n\n      if (customEvent.isDefaultPrevented()) {\n        return\n      }\n\n      this._removeElement(rootElement)\n    }\n\n    dispose() {\n      $.removeData(this._element, DATA_KEY)\n      this._element = null\n    }\n\n\n    // private\n\n    _getRootElement(element) {\n      let selector = Util.getSelectorFromElement(element)\n      let parent   = false\n\n      if (selector) {\n        parent = $(selector)[0]\n      }\n\n      if (!parent) {\n        parent = $(element).closest(`.${ClassName.ALERT}`)[0]\n      }\n\n      return parent\n    }\n\n    _triggerCloseEvent(element) {\n      let closeEvent = $.Event(Event.CLOSE)\n\n      $(element).trigger(closeEvent)\n      return closeEvent\n    }\n\n    _removeElement(element) {\n      $(element).removeClass(ClassName.IN)\n\n      if (!Util.supportsTransitionEnd() ||\n          !$(element).hasClass(ClassName.FADE)) {\n        this._destroyElement(element)\n        return\n      }\n\n      $(element)\n        .one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element))\n        .emulateTransitionEnd(TRANSITION_DURATION)\n    }\n\n    _destroyElement(element) {\n      $(element)\n        .detach()\n        .trigger(Event.CLOSED)\n        .remove()\n    }\n\n\n    // static\n\n    static _jQueryInterface(config) {\n      return this.each(function () {\n        let $element = $(this)\n        let data     = $element.data(DATA_KEY)\n\n        if (!data) {\n          data = new Alert(this)\n          $element.data(DATA_KEY, data)\n        }\n\n        if (config === 'close') {\n          data[config](this)\n        }\n      })\n    }\n\n    static _handleDismiss(alertInstance) {\n      return function (event) {\n        if (event) {\n          event.preventDefault()\n        }\n\n        alertInstance.close(this)\n      }\n    }\n\n  }\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * Data Api implementation\n   * ------------------------------------------------------------------------\n   */\n\n  $(document).on(\n    Event.CLICK_DATA_API,\n    Selector.DISMISS,\n    Alert._handleDismiss(new Alert())\n  )\n\n\n  /**\n   * ------------------------------------------------------------------------\n   * jQuery\n   * ------------------------------------------------------------------------\n   */\n\n  $.fn[NAME]             = Alert._jQueryInterface\n  $.fn[NAME].Constructor = Alert\n  $.fn[NAME].noConflict  = function () {\n    $.fn[NAME] = JQUERY_NO_CONFLICT\n    return Alert._jQueryInterface\n  }\n\n  return Alert\n\n})(jQuery)\n\nexport default Alert\n"]}
\ No newline at end of file
diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss
index b30cf1468..b43116fa6 100644
--- a/scss/mixins/_float.scss
+++ b/scss/mixins/_float.scss
@@ -4,3 +4,6 @@
 @mixin float-right {
   float: right !important;
 }
+@mixin float-none {
+  float: none !important;
+}
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index d74049be8..a79dddbde 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -2,12 +2,29 @@
 // Display utilities
 //
 
-.d-block {
-  display: block !important;
-}
-.d-inline-block {
-  display: inline-block !important;
-}
-.d-inline {
-  display: inline !important;
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $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; }
+      }
+    } @else {
+      .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; }
+    }
+  }
 }
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
index eea34bff2..99c2efdc0 100644
--- a/scss/utilities/_float.scss
+++ b/scss/utilities/_float.scss
@@ -1,13 +1,19 @@
 @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;
+    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+    @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; }
+      }
+    } @else {
+      // xs
+      .float-left { @include float-left; }
+      .float-right { @include float-right; }
+      .float-none { @include float-none; }
     }
   }
 }