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

README.md

@@ -8,7 +8,14 @@
   <p align="center">
     Sleek, intuitive, and powerful front-end framework for faster and easier web development.
     <br>
-    <a href="https://v4-alpha.getbootstrap.com"><strong>Visit Bootstrap &raquo;</strong></a>
+    <a href="https://v4-alpha.getbootstrap.com"><strong>Explore Bootstrap docs &raquo;</strong></a>
+    <br>
+    <br>
+    <a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
+    &middot;
+    <a href="https://jobs.getbootstrap.com">Job Board</a>
+    &middot;
+    <a href="https://blog.getbootstrap.com">Blog</a>
   </p>
 </p>
 

build/postcss.config.js

@@ -35,7 +35,6 @@ module.exports = (ctx) => ({
         'Android >= 4',
         'Opera >= 12'
       ]
-    },
-    'postcss-flexbugs-fixes': {}
+    }
   }
 })

dist/css/bootstrap.css

@@ -3815,7 +3815,7 @@ tbody.collapse.show {
 }
 
 .nav-pills .nav-link.active,
-.show .nav-pills .nav-link {
+.show > .nav-pills .nav-link {
   color: #fff;
   background-color: #0275d8;
 }
@@ -3930,11 +3930,8 @@ tbody.collapse.show {
 }
 
 .navbar-nav .dropdown-menu {
-  position: static !important;
+  position: static;
   float: none;
-  -webkit-transform: unset !important;
-       -o-transform: unset !important;
-          transform: unset !important;
 }
 
 .navbar-text {
@@ -4004,8 +4001,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-sm .navbar-nav .dropdown-menu {
-    position: absolute !important;
-    top: 100% !important;
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-sm .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4059,8 +4059,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-md .navbar-nav .dropdown-menu {
-    position: absolute !important;
-    top: 100% !important;
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-md .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4114,8 +4117,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-lg .navbar-nav .dropdown-menu {
-    position: absolute !important;
-    top: 100% !important;
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-lg .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4169,8 +4175,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-xl .navbar-nav .dropdown-menu {
-    position: absolute !important;
-    top: 100% !important;
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-xl .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4223,8 +4232,12 @@ tbody.collapse.show {
 }
 
 .navbar-expand .navbar-nav .dropdown-menu {
-  position: absolute !important;
-  top: 100% !important;
+  position: absolute;
+}
+
+.navbar-expand .navbar-nav .dropdown-menu-right {
+  right: 0;
+  left: auto;
 }
 
 .navbar-expand .navbar-nav .nav-link {
@@ -6067,27 +6080,27 @@ a.bg-inverse:focus, a.bg-inverse:hover {
 }
 
 .rounded {
-  border-radius: 0.25rem;
+  border-radius: 0.25rem !important;
 }
 
 .rounded-top {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
 }
 
 .rounded-right {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
 }
 
 .rounded-bottom {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-left {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-circle {
@@ -7330,11 +7343,13 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   z-index: 1030;
 }
 
-.sticky-top {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 1020;
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sticky-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
 }
 
 .sr-only {

dist/js/bootstrap.js

@@ -1495,6 +1495,7 @@ var Util = function ($) {
       this._popper = null;
       this._config = this._getConfig(config);
       this._menu = this._getMenuElement();
+      this._inNavbar = this._detectNavbar();
 
       this._addEventListeners();
     }
@@ -1535,17 +1536,7 @@ var Util = function ($) {
           element = parent;
         }
       }
-      this._popper = new Popper(element, this._menu, {
-        placement: this._getPlacement(),
-        modifiers: {
-          offset: {
-            offset: this._config.offset
-          },
-          flip: {
-            enabled: this._config.flip
-          }
-        }
-      });
+      this._popper = new Popper(element, this._menu, this._getPopperConfig());
 
       // if this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -1574,6 +1565,7 @@ var Util = function ($) {
     };
 
     Dropdown.prototype.update = function update() {
+      this._inNavbar = this._detectNavbar();
       if (this._popper !== null) {
         this._popper.scheduleUpdate();
       }
@@ -1625,10 +1617,41 @@ var Util = function ($) {
       } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
         placement = AttachmentMap.BOTTOMEND;
       }
-
       return placement;
     };
 
+    Dropdown.prototype._detectNavbar = function _detectNavbar() {
+      return $(this._element).closest('.navbar').length > 0;
+    };
+
+    Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
+      var _this10 = this;
+
+      var popperConfig = {
+        placement: this._getPlacement(),
+        modifiers: {
+          offset: {
+            offset: this._config.offset
+          },
+          flip: {
+            enabled: this._config.flip
+          }
+        }
+      };
+
+      if (this._inNavbar) {
+        popperConfig.modifiers.AfterApplyStyle = {
+          enabled: true,
+          order: 901, // ApplyStyle order + 1
+          fn: function fn() {
+            // reset Popper styles
+            $(_this10._menu).attr('style', '');
+          }
+        };
+      }
+      return popperConfig;
+    };
+
     // static
 
     Dropdown._jQueryInterface = function _jQueryInterface(config) {
@@ -1906,7 +1929,7 @@ var Util = function ($) {
     };
 
     Modal.prototype.show = function show(relatedTarget) {
-      var _this10 = this;
+      var _this11 = this;
 
       if (this._isTransitioning) {
         return;
@@ -1937,24 +1960,24 @@ var Util = function ($) {
       this._setResizeEvent();
 
       $(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, function (event) {
-        return _this10.hide(event);
+        return _this11.hide(event);
       });
 
       $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
-        $(_this10._element).one(Event.MOUSEUP_DISMISS, function (event) {
-          if ($(event.target).is(_this10._element)) {
-            _this10._ignoreBackdropClick = true;
+        $(_this11._element).one(Event.MOUSEUP_DISMISS, function (event) {
+          if ($(event.target).is(_this11._element)) {
+            _this11._ignoreBackdropClick = true;
           }
         });
       });
 
       this._showBackdrop(function () {
-        return _this10._showElement(relatedTarget);
+        return _this11._showElement(relatedTarget);
       });
     };
 
     Modal.prototype.hide = function hide(event) {
-      var _this11 = this;
+      var _this12 = this;
 
       if (event) {
         event.preventDefault();
@@ -1993,7 +2016,7 @@ var Util = function ($) {
       if (transition) {
 
         $(this._element).one(Util.TRANSITION_END, function (event) {
-          return _this11._hideModal(event);
+          return _this12._hideModal(event);
         }).emulateTransitionEnd(TRANSITION_DURATION);
       } else {
         this._hideModal();
@@ -2028,7 +2051,7 @@ var Util = function ($) {
     };
 
     Modal.prototype._showElement = function _showElement(relatedTarget) {
-      var _this12 = this;
+      var _this13 = this;
 
       var transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE);
 
@@ -2056,11 +2079,11 @@ var Util = function ($) {
       });
 
       var transitionComplete = function transitionComplete() {
-        if (_this12._config.focus) {
-          _this12._element.focus();
+        if (_this13._config.focus) {
+          _this13._element.focus();
         }
-        _this12._isTransitioning = false;
-        $(_this12._element).trigger(shownEvent);
+        _this13._isTransitioning = false;
+        $(_this13._element).trigger(shownEvent);
       };
 
       if (transition) {
@@ -2071,24 +2094,24 @@ var Util = function ($) {
     };
 
     Modal.prototype._enforceFocus = function _enforceFocus() {
-      var _this13 = this;
+      var _this14 = this;
 
       $(document).off(Event.FOCUSIN // guard against infinite focus loop
       ).on(Event.FOCUSIN, function (event) {
-        if (document !== event.target && _this13._element !== event.target && !$(_this13._element).has(event.target).length) {
-          _this13._element.focus();
+        if (document !== event.target && _this14._element !== event.target && !$(_this14._element).has(event.target).length) {
+          _this14._element.focus();
         }
       });
     };
 
     Modal.prototype._setEscapeEvent = function _setEscapeEvent() {
-      var _this14 = this;
+      var _this15 = this;
 
       if (this._isShown && this._config.keyboard) {
         $(this._element).on(Event.KEYDOWN_DISMISS, function (event) {
           if (event.which === ESCAPE_KEYCODE) {
             event.preventDefault();
-            _this14.hide();
+            _this15.hide();
           }
         });
       } else if (!this._isShown) {
@@ -2097,11 +2120,11 @@ var Util = function ($) {
     };
 
     Modal.prototype._setResizeEvent = function _setResizeEvent() {
-      var _this15 = this;
+      var _this16 = this;
 
       if (this._isShown) {
         $(window).on(Event.RESIZE, function (event) {
-          return _this15.handleUpdate(event);
+          return _this16.handleUpdate(event);
         });
       } else {
         $(window).off(Event.RESIZE);
@@ -2109,16 +2132,16 @@ var Util = function ($) {
     };
 
     Modal.prototype._hideModal = function _hideModal() {
-      var _this16 = this;
+      var _this17 = this;
 
       this._element.style.display = 'none';
       this._element.setAttribute('aria-hidden', true);
       this._isTransitioning = false;
       this._showBackdrop(function () {
         $(document.body).removeClass(ClassName.OPEN);
-        _this16._resetAdjustments();
-        _this16._resetScrollbar();
-        $(_this16._element).trigger(Event.HIDDEN);
+        _this17._resetAdjustments();
+        _this17._resetScrollbar();
+        $(_this17._element).trigger(Event.HIDDEN);
       });
     };
 
@@ -2130,7 +2153,7 @@ var Util = function ($) {
     };
 
     Modal.prototype._showBackdrop = function _showBackdrop(callback) {
-      var _this17 = this;
+      var _this18 = this;
 
       var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : '';
 
@@ -2147,17 +2170,17 @@ var Util = function ($) {
         $(this._backdrop).appendTo(document.body);
 
         $(this._element).on(Event.CLICK_DISMISS, function (event) {
-          if (_this17._ignoreBackdropClick) {
-            _this17._ignoreBackdropClick = false;
+          if (_this18._ignoreBackdropClick) {
+            _this18._ignoreBackdropClick = false;
             return;
           }
           if (event.target !== event.currentTarget) {
             return;
           }
-          if (_this17._config.backdrop === 'static') {
-            _this17._element.focus();
+          if (_this18._config.backdrop === 'static') {
+            _this18._element.focus();
           } else {
-            _this17.hide();
+            _this18.hide();
           }
         });
 
@@ -2181,7 +2204,7 @@ var Util = function ($) {
         $(this._backdrop).removeClass(ClassName.SHOW);
 
         var callbackRemove = function callbackRemove() {
-          _this17._removeBackdrop();
+          _this18._removeBackdrop();
           if (callback) {
             callback();
           }
@@ -2225,7 +2248,7 @@ var Util = function ($) {
     };
 
     Modal.prototype._setScrollbar = function _setScrollbar() {
-      var _this18 = this;
+      var _this19 = this;
 
       if (this._isBodyOverflowing) {
         // Note: DOMNode.style.paddingRight returns the actual value or '' if not set
@@ -2235,14 +2258,14 @@ var Util = function ($) {
         $(Selector.FIXED_CONTENT).each(function (index, element) {
           var actualPadding = $(element)[0].style.paddingRight;
           var calculatedPadding = $(element).css('padding-right');
-          $(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this18._scrollbarWidth + 'px');
+          $(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this19._scrollbarWidth + 'px');
         }
 
         // Adjust navbar-toggler margin
         );$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
           var actualMargin = $(element)[0].style.marginRight;
           var calculatedMargin = $(element).css('margin-right');
-          $(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) + _this18._scrollbarWidth + 'px');
+          $(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) + _this19._scrollbarWidth + 'px');
         }
 
         // Adjust body padding
@@ -2331,7 +2354,7 @@ var Util = function ($) {
    */
 
   $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
-    var _this19 = this;
+    var _this20 = this;
 
     var target = void 0;
     var selector = Util.getSelectorFromElement(this);
@@ -2353,8 +2376,8 @@ var Util = function ($) {
       }
 
       $target.one(Event.HIDDEN, function () {
-        if ($(_this19).is(':visible')) {
-          _this19.focus();
+        if ($(_this20).is(':visible')) {
+          _this20.focus();
         }
       });
     });
@@ -2448,7 +2471,7 @@ var Util = function ($) {
   };
   var ScrollSpy = function () {
     function ScrollSpy(element, config) {
-      var _this20 = this;
+      var _this21 = this;
 
       _classCallCheck(this, ScrollSpy);
 
@@ -2462,7 +2485,7 @@ var Util = function ($) {
       this._scrollHeight = 0;
 
       $(this._scrollElement).on(Event.SCROLL, function (event) {
-        return _this20._process(event);
+        return _this21._process(event);
       });
 
       this.refresh();
@@ -2474,7 +2497,7 @@ var Util = function ($) {
     // public
 
     ScrollSpy.prototype.refresh = function refresh() {
-      var _this21 = this;
+      var _this22 = this;
 
       var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET;
 
@@ -2510,8 +2533,8 @@ var Util = function ($) {
       }).sort(function (a, b) {
         return a[0] - b[0];
       }).forEach(function (item) {
-        _this21._offsets.push(item[0]);
-        _this21._targets.push(item[1]);
+        _this22._offsets.push(item[0]);
+        _this22._targets.push(item[1]);
       });
     };
 
@@ -2758,7 +2781,7 @@ var Util = function ($) {
     // public
 
     Tab.prototype.show = function show() {
-      var _this22 = this;
+      var _this23 = this;
 
       if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE) || $(this._element).hasClass(ClassName.DISABLED)) {
         return;
@@ -2800,7 +2823,7 @@ var Util = function ($) {
 
       var complete = function complete() {
         var hiddenEvent = $.Event(Event.HIDDEN, {
-          relatedTarget: _this22._element
+          relatedTarget: _this23._element
         });
 
         var shownEvent = $.Event(Event.SHOWN, {
@@ -2808,7 +2831,7 @@ var Util = function ($) {
         });
 
         $(previous).trigger(hiddenEvent);
-        $(_this22._element).trigger(shownEvent);
+        $(_this23._element).trigger(shownEvent);
       };
 
       if (target) {
@@ -2826,13 +2849,13 @@ var Util = function ($) {
     // private
 
     Tab.prototype._activate = function _activate(element, container, callback) {
-      var _this23 = this;
+      var _this24 = this;
 
       var active = $(container).find(Selector.ACTIVE)[0];
       var isTransitioning = callback && Util.supportsTransitionEnd() && active && $(active).hasClass(ClassName.FADE);
 
       var complete = function complete() {
-        return _this23._transitionComplete(element, active, isTransitioning, callback);
+        return _this24._transitionComplete(element, active, isTransitioning, callback);
       };
 
       if (active && isTransitioning) {
@@ -3144,7 +3167,7 @@ var Util = function ($) {
     };
 
     Tooltip.prototype.show = function show() {
-      var _this24 = this;
+      var _this25 = this;
 
       if ($(this.element).css('display') === 'none') {
         throw new Error('Please use show on visible elements');
@@ -3202,11 +3225,11 @@ var Util = function ($) {
           },
           onCreate: function onCreate(data) {
             if (data.originalPlacement !== data.placement) {
-              _this24._handlePopperPlacementChange(data);
+              _this25._handlePopperPlacementChange(data);
             }
           },
           onUpdate: function onUpdate(data) {
-            _this24._handlePopperPlacementChange(data);
+            _this25._handlePopperPlacementChange(data);
           }
         });
 
@@ -3221,16 +3244,16 @@ var Util = function ($) {
         }
 
         var complete = function complete() {
-          if (_this24.config.animation) {
-            _this24._fixTransition();
+          if (_this25.config.animation) {
+            _this25._fixTransition();
           }
-          var prevHoverState = _this24._hoverState;
-          _this24._hoverState = null;
+          var prevHoverState = _this25._hoverState;
+          _this25._hoverState = null;
 
-          $(_this24.element).trigger(_this24.constructor.Event.SHOWN);
+          $(_this25.element).trigger(_this25.constructor.Event.SHOWN);
 
           if (prevHoverState === HoverState.OUT) {
-            _this24._leave(null, _this24);
+            _this25._leave(null, _this25);
           }
         };
 
@@ -3243,20 +3266,20 @@ var Util = function ($) {
     };
 
     Tooltip.prototype.hide = function hide(callback) {
-      var _this25 = this;
+      var _this26 = this;
 
       var tip = this.getTipElement();
       var hideEvent = $.Event(this.constructor.Event.HIDE);
       var complete = function complete() {
-        if (_this25._hoverState !== HoverState.SHOW && tip.parentNode) {
+        if (_this26._hoverState !== HoverState.SHOW && tip.parentNode) {
           tip.parentNode.removeChild(tip);
         }
 
-        _this25._cleanTipClass();
-        _this25.element.removeAttribute('aria-describedby');
-        $(_this25.element).trigger(_this25.constructor.Event.HIDDEN);
-        if (_this25._popper !== null) {
-          _this25._popper.destroy();
+        _this26._cleanTipClass();
+        _this26.element.removeAttribute('aria-describedby');
+        $(_this26.element).trigger(_this26.constructor.Event.HIDDEN);
+        if (_this26._popper !== null) {
+          _this26._popper.destroy();
         }
 
         if (callback) {
@@ -3351,28 +3374,28 @@ var Util = function ($) {
     };
 
     Tooltip.prototype._setListeners = function _setListeners() {
-      var _this26 = this;
+      var _this27 = this;
 
       var triggers = this.config.trigger.split(' ');
 
       triggers.forEach(function (trigger) {
         if (trigger === 'click') {
-          $(_this26.element).on(_this26.constructor.Event.CLICK, _this26.config.selector, function (event) {
-            return _this26.toggle(event);
+          $(_this27.element).on(_this27.constructor.Event.CLICK, _this27.config.selector, function (event) {
+            return _this27.toggle(event);
           });
         } else if (trigger !== Trigger.MANUAL) {
-          var eventIn = trigger === Trigger.HOVER ? _this26.constructor.Event.MOUSEENTER : _this26.constructor.Event.FOCUSIN;
-          var eventOut = trigger === Trigger.HOVER ? _this26.constructor.Event.MOUSELEAVE : _this26.constructor.Event.FOCUSOUT;
+          var eventIn = trigger === Trigger.HOVER ? _this27.constructor.Event.MOUSEENTER : _this27.constructor.Event.FOCUSIN;
+          var eventOut = trigger === Trigger.HOVER ? _this27.constructor.Event.MOUSELEAVE : _this27.constructor.Event.FOCUSOUT;
 
-          $(_this26.element).on(eventIn, _this26.config.selector, function (event) {
-            return _this26._enter(event);
-          }).on(eventOut, _this26.config.selector, function (event) {
-            return _this26._leave(event);
+          $(_this27.element).on(eventIn, _this27.config.selector, function (event) {
+            return _this27._enter(event);
+          }).on(eventOut, _this27.config.selector, function (event) {
+            return _this27._leave(event);
           });
         }
 
-        $(_this26.element).closest('.modal').on('hide.bs.modal', function () {
-          return _this26.hide();
+        $(_this27.element).closest('.modal').on('hide.bs.modal', function () {
+          return _this27.hide();
         });
       });
 

docs/4.0/getting-started/download.md

@@ -15,7 +15,7 @@ toc: true
 <a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
 
 ## Source files
-**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).
+**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).
 
 <a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 
@@ -30,7 +30,7 @@ Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS
 
 ## Package managers
 
-Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions.
+Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
 
 ### npm
 

docs/4.0/getting-started/webpack.md

@@ -61,7 +61,7 @@ First, create your own `_custom.scss` and use it to override the [built-in custo
 @import "~bootstrap/scss/bootstrap";
 {% endhighlight %}
 
-For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). With minimal setup, your webpack config should include this rule or similar:
+For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
 
 {% highlight js %}
   ...

js/dist/dropdown.js

@@ -101,6 +101,7 @@ var Dropdown = function ($) {
       this._popper = null;
       this._config = this._getConfig(config);
       this._menu = this._getMenuElement();
+      this._inNavbar = this._detectNavbar();
 
       this._addEventListeners();
     }
@@ -141,17 +142,7 @@ var Dropdown = function ($) {
           element = parent;
         }
       }
-      this._popper = new Popper(element, this._menu, {
-        placement: this._getPlacement(),
-        modifiers: {
-          offset: {
-            offset: this._config.offset
-          },
-          flip: {
-            enabled: this._config.flip
-          }
-        }
-      });
+      this._popper = new Popper(element, this._menu, this._getPopperConfig());
 
       // if this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -180,6 +171,7 @@ var Dropdown = function ($) {
     };
 
     Dropdown.prototype.update = function update() {
+      this._inNavbar = this._detectNavbar();
       if (this._popper !== null) {
         this._popper.scheduleUpdate();
       }
@@ -231,10 +223,41 @@ var Dropdown = function ($) {
       } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
         placement = AttachmentMap.BOTTOMEND;
       }
-
       return placement;
     };
 
+    Dropdown.prototype._detectNavbar = function _detectNavbar() {
+      return $(this._element).closest('.navbar').length > 0;
+    };
+
+    Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
+      var _this2 = this;
+
+      var popperConfig = {
+        placement: this._getPlacement(),
+        modifiers: {
+          offset: {
+            offset: this._config.offset
+          },
+          flip: {
+            enabled: this._config.flip
+          }
+        }
+      };
+
+      if (this._inNavbar) {
+        popperConfig.modifiers.AfterApplyStyle = {
+          enabled: true,
+          order: 901, // ApplyStyle order + 1
+          fn: function fn() {
+            // reset Popper styles
+            $(_this2._menu).attr('style', '');
+          }
+        };
+      }
+      return popperConfig;
+    };
+
     // static
 
     Dropdown._jQueryInterface = function _jQueryInterface(config) {

package.json

@@ -86,7 +86,6 @@
     "npm-run-all": "^4.0.2",
     "phantomjs-prebuilt": "^2.1.14",
     "postcss-cli": "^4.0.0",
-    "postcss-flexbugs-fixes": "^3.0.0",
     "qunit-phantomjs-runner": "^2.3.0",
     "qunitjs": "^2.3.2",
     "shelljs": "^0.7.7",

scss/_card.scss

@@ -197,7 +197,7 @@
 
     .card {
       display: flex;
-      flex: 1 0 0;
+      flex: 1 0 0%;
       flex-direction: column;
       margin-right: $card-deck-margin;
       margin-left: $card-deck-margin;
@@ -216,7 +216,7 @@
     flex-flow: row wrap;
 
     .card {
-      flex: 1 0 0;
+      flex: 1 0 0%;
 
       + .card {
         margin-left: 0;

scss/_nav.scss

@@ -76,7 +76,7 @@
     @include border-radius($nav-pills-border-radius);
 
     &.active,
-    .show & {
+    .show > & {
       color: $nav-pills-link-active-color;
       background-color: $nav-pills-link-active-bg;
     }

scss/mixins/_breakpoints.scss

@@ -93,7 +93,13 @@
   $min: breakpoint-min($name, $breakpoints);
   $max: breakpoint-max($name, $breakpoints);
 
-  @media (min-width: $min) and (max-width: $max) {
-    @content;
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name)
+  } @else if $min == null {
+    @include media-breakpoint-down($name)
   }
 }

scss/mixins/_pagination.scss

@@ -4,6 +4,7 @@
   .page-link {
     padding: $padding-y $padding-x;
     font-size: $font-size;
+    line-height: $line-height;
   }
 
   .page-item {

scss/utilities/_borders.scss

@@ -13,19 +13,23 @@
 //
 
 .rounded {
-  @include border-radius($border-radius);
+  border-radius: $border-radius !important;
 }
 .rounded-top {
-  @include border-top-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-top-right-radius: $border-radius !important;
 }
 .rounded-right {
-  @include border-right-radius($border-radius);
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
 }
 .rounded-bottom {
-  @include border-bottom-radius($border-radius);
+  border-bottom-right-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 .rounded-left {
-  @include border-left-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 
 .rounded-circle {