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

Gemfile.lock

@@ -7,7 +7,7 @@ GEM
     ffi (1.9.18)
     ffi (1.9.18-x64-mingw32)
     forwardable-extended (2.6.0)
-    jekyll (3.5.1)
+    jekyll (3.5.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)

README.md

@@ -96,9 +96,10 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol
 ### Running documentation locally
 
 1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
-2. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
+2. Run `npm install` to install Node.js dependencies.
-3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
+3. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
-4. Open <http://localhost:9001> in your browser, and voilà.
+4. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
+5. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
 

_includes/header.html

@@ -1,5 +1,6 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
 <title>
   {% if page.title %}

assets/scss/_component-examples.scss

@@ -392,16 +392,26 @@
 
 .highlight {
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   background-color: #f7f7f9;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
     padding: 1.5rem;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
     margin-right: 0;
     margin-left: 0;
   }
 }
+
 .highlight pre {
   padding: 0;
   margin-top: 0;

dist/css/bootstrap.css

@@ -1772,14 +1772,14 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }
 
-.was-validated .form-control:valid ~ .invalid-feedback,
+.was-validated .form-control:valid ~ .valid-feedback,
-.was-validated .form-control:valid ~ .invalid-tooltip, .form-control.is-valid ~ .invalid-feedback,
+.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
-.form-control.is-valid ~ .invalid-tooltip, .was-validated
+.form-control.is-valid ~ .valid-tooltip, .was-validated
-.custom-select:valid ~ .invalid-feedback,
+.custom-select:valid ~ .valid-feedback,
 .was-validated
-.custom-select:valid ~ .invalid-tooltip,
+.custom-select:valid ~ .valid-tooltip,
-.custom-select.is-valid ~ .invalid-feedback,
+.custom-select.is-valid ~ .valid-feedback,
-.custom-select.is-valid ~ .invalid-tooltip {
+.custom-select.is-valid ~ .valid-tooltip {
   display: block;
 }
 
@@ -2813,6 +2813,8 @@ tbody.collapse.show {
   position: relative;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-align: center;
+      align-items: center;
   width: 100%;
 }
 
@@ -2829,15 +2831,6 @@ tbody.collapse.show {
   z-index: 3;
 }
 
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-}
-
 .input-group-addon:not(:first-child):not(:last-child),
 .input-group-btn:not(:first-child):not(:last-child),
 .input-group .form-control:not(:first-child):not(:last-child) {
@@ -2847,7 +2840,6 @@ tbody.collapse.show {
 .input-group-addon,
 .input-group-btn {
   white-space: nowrap;
-  vertical-align: middle;
 }
 
 .input-group-addon {

dist/js/bootstrap.js

@@ -50,9 +50,10 @@ var Util = function ($) {
     MozTransition: 'transitionend',
     OTransition: 'oTransitionEnd otransitionend',
     transition: 'transitionend'
+  };
 
   // shoutout AngusCroll (https://goo.gl/pxwQGp)
-  };function toType(obj) {
+  function toType(obj) {
     return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
   }
 
@@ -215,6 +216,7 @@ var Alert = function ($) {
     ALERT: 'alert',
     FADE: 'fade',
     SHOW: 'show'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -222,7 +224,6 @@ var Alert = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Alert = function () {
     function Alert(element) {
       _classCallCheck(this, Alert);
@@ -396,6 +397,7 @@ var Button = function ($) {
   var Event = {
     CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
     FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -403,7 +405,6 @@ var Button = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Button = function () {
     function Button(element) {
       _classCallCheck(this, Button);
@@ -606,6 +607,7 @@ var Carousel = function ($) {
     INDICATORS: '.carousel-indicators',
     DATA_SLIDE: '[data-slide], [data-slide-to]',
     DATA_RIDE: '[data-ride="carousel"]'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -613,7 +615,6 @@ var Carousel = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Carousel = function () {
     function Carousel(element, config) {
       _classCallCheck(this, Carousel);
@@ -1090,6 +1091,7 @@ var Collapse = function ($) {
   var Selector = {
     ACTIVES: '.show, .collapsing',
     DATA_TOGGLE: '[data-toggle="collapse"]'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -1097,7 +1099,6 @@ var Collapse = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Collapse = function () {
     function Collapse(element, config) {
       _classCallCheck(this, Collapse);
@@ -1478,6 +1479,7 @@ var Dropdown = function ($) {
     placement: 'string',
     offset: '(number|string)',
     flip: 'boolean'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -1485,7 +1487,6 @@ var Dropdown = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Dropdown = function () {
     function Dropdown(element, config) {
       _classCallCheck(this, Dropdown);
@@ -1634,9 +1635,10 @@ var Dropdown = function ($) {
             enabled: this._config.flip
           }
         }
+      };
 
       // Disable Popper.js for Dropdown in Navbar
-      };if (this._inNavbar) {
+      if (this._inNavbar) {
         popperConfig.modifiers.applyStyle = {
           enabled: !this._inNavbar
         };
@@ -1889,6 +1891,7 @@ var Modal = function ($) {
     DATA_DISMISS: '[data-dismiss="modal"]',
     FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
     NAVBAR_TOGGLER: '.navbar-toggler'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -1896,7 +1899,6 @@ var Modal = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Modal = function () {
     function Modal(element, config) {
       _classCallCheck(this, Modal);
@@ -2453,6 +2455,7 @@ var ScrollSpy = function ($) {
   var OffsetMethod = {
     OFFSET: 'offset',
     POSITION: 'position'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -2460,7 +2463,6 @@ var ScrollSpy = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var ScrollSpy = function () {
     function ScrollSpy(element, config) {
       var _this20 = this;
@@ -2750,9 +2752,11 @@ var Tab = function ($) {
     DROPDOWN: '.dropdown',
     NAV_LIST_GROUP: '.nav, .list-group',
     ACTIVE: '.active',
+    ACTIVE_UL: '> li > .active',
     DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE: '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -2760,7 +2764,6 @@ var Tab = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Tab = function () {
     function Tab(element) {
       _classCallCheck(this, Tab);
@@ -2785,7 +2788,8 @@ var Tab = function ($) {
       var selector = Util.getSelectorFromElement(this._element);
 
       if (listElement) {
-        previous = $.makeArray($(listElement).find(Selector.ACTIVE));
+        var itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE;
+        previous = $.makeArray($(listElement).find(itemSelector));
         previous = previous[previous.length - 1];
       }
 
@@ -2843,7 +2847,14 @@ var Tab = function ($) {
     Tab.prototype._activate = function _activate(element, container, callback) {
       var _this23 = this;
 
-      var active = $(container).find(Selector.ACTIVE)[0];
+      var activeElements = void 0;
+      if (container.nodeName === 'UL') {
+        activeElements = $(container).find(Selector.ACTIVE_UL);
+      } else {
+        activeElements = $(container).children(Selector.ACTIVE);
+      }
+
+      var active = activeElements[0];
       var isTransitioning = callback && Util.supportsTransitionEnd() && active && $(active).hasClass(ClassName.FADE);
 
       var complete = function complete() {
@@ -3061,6 +3072,7 @@ var Tooltip = function ($) {
     FOCUS: 'focus',
     CLICK: 'click',
     MANUAL: 'manual'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -3068,7 +3080,6 @@ var Tooltip = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Tooltip = function () {
     function Tooltip(element, config) {
       _classCallCheck(this, Tooltip);
@@ -3687,6 +3698,7 @@ var Popover = function ($) {
     FOCUSOUT: 'focusout' + EVENT_KEY,
     MOUSEENTER: 'mouseenter' + EVENT_KEY,
     MOUSELEAVE: 'mouseleave' + EVENT_KEY
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -3694,7 +3706,6 @@ var Popover = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Popover = function (_Tooltip) {
     _inherits(Popover, _Tooltip);
 

docs/4.0/examples/blog/index.html

@@ -109,7 +109,7 @@
 
         </div><!-- /.blog-main -->
 
-        <div class="col-sm-3 offset-sm-1 blog-sidebar">
+        <div class="col-sm-3 ml-sm-auto blog-sidebar">
           <div class="sidebar-module sidebar-module-inset">
             <h4>About</h4>
             <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>

js/dist/alert.js

@@ -39,6 +39,7 @@ var Alert = function ($) {
     ALERT: 'alert',
     FADE: 'fade',
     SHOW: 'show'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -46,7 +47,6 @@ var Alert = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Alert = function () {
     function Alert(element) {
       _classCallCheck(this, Alert);

js/dist/button.js

@@ -41,6 +41,7 @@ var Button = function ($) {
   var Event = {
     CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
     FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -48,7 +49,6 @@ var Button = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Button = function () {
     function Button(element) {
       _classCallCheck(this, Button);

js/dist/carousel.js

@@ -83,6 +83,7 @@ var Carousel = function ($) {
     INDICATORS: '.carousel-indicators',
     DATA_SLIDE: '[data-slide], [data-slide-to]',
     DATA_RIDE: '[data-ride="carousel"]'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -90,7 +91,6 @@ var Carousel = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Carousel = function () {
     function Carousel(element, config) {
       _classCallCheck(this, Carousel);

js/dist/collapse.js

@@ -60,6 +60,7 @@ var Collapse = function ($) {
   var Selector = {
     ACTIVES: '.show, .collapsing',
     DATA_TOGGLE: '[data-toggle="collapse"]'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -67,7 +68,6 @@ var Collapse = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Collapse = function () {
     function Collapse(element, config) {
       _classCallCheck(this, Collapse);

js/dist/dropdown.js

@@ -85,6 +85,7 @@ var Dropdown = function ($) {
     placement: 'string',
     offset: '(number|string)',
     flip: 'boolean'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -92,7 +93,6 @@ var Dropdown = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Dropdown = function () {
     function Dropdown(element, config) {
       _classCallCheck(this, Dropdown);
@@ -241,9 +241,10 @@ var Dropdown = function ($) {
             enabled: this._config.flip
           }
         }
+      };
 
       // Disable Popper.js for Dropdown in Navbar
-      };if (this._inNavbar) {
+      if (this._inNavbar) {
         popperConfig.modifiers.applyStyle = {
           enabled: !this._inNavbar
         };

js/dist/modal.js

@@ -71,6 +71,7 @@ var Modal = function ($) {
     DATA_DISMISS: '[data-dismiss="modal"]',
     FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
     NAVBAR_TOGGLER: '.navbar-toggler'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -78,7 +79,6 @@ var Modal = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Modal = function () {
     function Modal(element, config) {
       _classCallCheck(this, Modal);

js/dist/popover.js

@@ -63,6 +63,7 @@ var Popover = function ($) {
     FOCUSOUT: 'focusout' + EVENT_KEY,
     MOUSEENTER: 'mouseenter' + EVENT_KEY,
     MOUSELEAVE: 'mouseleave' + EVENT_KEY
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -70,7 +71,6 @@ var Popover = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Popover = function (_Tooltip) {
     _inherits(Popover, _Tooltip);
 

js/dist/scrollspy.js

@@ -64,6 +64,7 @@ var ScrollSpy = function ($) {
   var OffsetMethod = {
     OFFSET: 'offset',
     POSITION: 'position'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -71,7 +72,6 @@ var ScrollSpy = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var ScrollSpy = function () {
     function ScrollSpy(element, config) {
       var _this = this;

js/dist/tab.js

@@ -45,9 +45,11 @@ var Tab = function ($) {
     DROPDOWN: '.dropdown',
     NAV_LIST_GROUP: '.nav, .list-group',
     ACTIVE: '.active',
+    ACTIVE_UL: '> li > .active',
     DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE: '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -55,7 +57,6 @@ var Tab = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Tab = function () {
     function Tab(element) {
       _classCallCheck(this, Tab);
@@ -80,7 +81,8 @@ var Tab = function ($) {
       var selector = Util.getSelectorFromElement(this._element);
 
       if (listElement) {
-        previous = $.makeArray($(listElement).find(Selector.ACTIVE));
+        var itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE;
+        previous = $.makeArray($(listElement).find(itemSelector));
         previous = previous[previous.length - 1];
       }
 
@@ -138,7 +140,14 @@ var Tab = function ($) {
     Tab.prototype._activate = function _activate(element, container, callback) {
       var _this2 = this;
 
-      var active = $(container).find(Selector.ACTIVE)[0];
+      var activeElements = void 0;
+      if (container.nodeName === 'UL') {
+        activeElements = $(container).find(Selector.ACTIVE_UL);
+      } else {
+        activeElements = $(container).children(Selector.ACTIVE);
+      }
+
+      var active = activeElements[0];
       var isTransitioning = callback && Util.supportsTransitionEnd() && active && $(active).hasClass(ClassName.FADE);
 
       var complete = function complete() {

js/dist/tooltip.js

@@ -106,6 +106,7 @@ var Tooltip = function ($) {
     FOCUS: 'focus',
     CLICK: 'click',
     MANUAL: 'manual'
+  };
 
   /**
    * ------------------------------------------------------------------------
@@ -113,7 +114,6 @@ var Tooltip = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  };
   var Tooltip = function () {
     function Tooltip(element, config) {
       _classCallCheck(this, Tooltip);

js/dist/util.js

@@ -22,9 +22,10 @@ var Util = function ($) {
     MozTransition: 'transitionend',
     OTransition: 'oTransitionEnd otransitionend',
     transition: 'transitionend'
+  };
 
   // shoutout AngusCroll (https://goo.gl/pxwQGp)
-  };function toType(obj) {
+  function toType(obj) {
     return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
   }
 

package.json

@@ -50,9 +50,9 @@
     "release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
     "dist": "npm-run-all --parallel css js css-docs",
     "test": "npm-run-all dist js-test docs",
+    "watch": "npm-run-all --parallel watch-css watch-js",
     "watch-css": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css && npm run css-docs\"",
-    "watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile-plugins\"",
+    "watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile-plugins\""
-    "watch": "npm-run-all --parallel watch-css watch-js"
   },
   "style": "dist/css/bootstrap.css",
   "sass": "scss/bootstrap.scss",

scss/_button-group.scss

@@ -10,7 +10,6 @@
   > .btn {
     position: relative;
     flex: 0 1 auto;
-    margin-bottom: 0;
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
@@ -66,15 +65,18 @@
 .btn-group > .btn-group {
   float: left;
 }
+
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     @include border-right-radius(0);
   }
 }
+
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-left-radius(0);
 }
@@ -129,7 +131,6 @@
 //
 
 .btn-group-vertical {
-  display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
@@ -146,31 +147,36 @@
     margin-top: -$input-btn-border-width;
     margin-left: 0;
   }
-}
 
-.btn-group-vertical > .btn {
+  > .btn {
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
     }
+  }
+
   &:first-child:not(:last-child) {
     @include border-bottom-radius(0);
   }
+
   &:last-child:not(:first-child) {
     @include border-top-radius(0);
   }
-}
+
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
     border-radius: 0;
   }
-.btn-group-vertical > .btn-group:first-child:not(:last-child) {
+
+  > .btn-group:first-child:not(:last-child) {
     > .btn:last-child,
     > .dropdown-toggle {
       @include border-bottom-radius(0);
     }
   }
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
     @include border-top-radius(0);
   }
+}
 
 
 // Checkbox and radio options

scss/_buttons.scss

@@ -71,36 +71,28 @@ fieldset[disabled] a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
+  background-color: transparent;
   border-radius: 0;
 
-  &,
-  &:active,
-  &.active,
-  &:disabled {
-    background-color: transparent;
-    @include box-shadow(none);
-  }
-  &,
-  &:focus,
-  &:active {
-    border-color: transparent;
-    box-shadow: none;
-  }
   @include hover {
-    border-color: transparent;
-  }
-  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
     background-color: transparent;
+    border-color: transparent;
   }
-  &:disabled {
-    color: $btn-link-disabled-color;
 
-    @include hover-focus {
+  &:focus,
-      text-decoration: none;
+  &.focus {
+    border-color: transparent;
+    box-shadow: none;
   }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
   }
+
+  // No need for an active state here
 }
 
 

scss/_card.scss

@@ -130,9 +130,15 @@
 
 // Card deck
 
-@include media-breakpoint-up(sm) {
 .card-deck {
   display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
     margin-right: -$card-deck-margin;
     margin-left: -$card-deck-margin;
@@ -142,6 +148,7 @@
       flex: 1 0 0%;
       flex-direction: column;
       margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
       margin-left: $card-deck-margin;
     }
   }
@@ -152,15 +159,22 @@
 // Card groups
 //
 
-@include media-breakpoint-up(sm) {
 .card-group {
   display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
 
     .card {
       flex: 1 0 0%;
 
       + .card {
+        margin-bottom: 0;
         margin-left: 0;
         border-left: 0;
       }
@@ -177,6 +191,7 @@
             border-bottom-right-radius: 0;
           }
         }
+
         &:last-child {
           @include border-left-radius(0);
 

scss/_forms.scss

@@ -241,14 +241,11 @@ select.form-control-lg {
 // Radios and checkboxes on same line
 .form-check-inline {
   display: inline-block;
+  margin-right: $form-check-inline-margin-x;
 
   .form-check-label {
     vertical-align: middle;
   }
-
-  + .form-check-inline {
-    margin-left: $form-check-inline-margin-x;
-  }
 }
 
 

scss/_input-group.scss

@@ -5,6 +5,7 @@
 .input-group {
   position: relative;
   display: flex;
+  align-items: center;
   width: 100%;
 
   .form-control {
@@ -28,10 +29,6 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  // Vertically centers the content of the addons within the input group
-  display: flex;
-  align-items: center;
-
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
   }
@@ -40,7 +37,6 @@
 .input-group-addon,
 .input-group-btn {
   white-space: nowrap;
-  vertical-align: middle; // Match the inputs
 }
 
 

scss/_variables.scss

@@ -61,7 +61,8 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:  #000 !default;
 
-$grays: (
+$grays: () !default;
+$grays: map-merge((
   100: $gray-100,
   200: $gray-200,
   300: $gray-300,
@@ -71,7 +72,7 @@ $grays: (
   700: $gray-700,
   800: $gray-800,
   900: $gray-900
-) !default;
+), $grays);
 
 $blue:    #007bff !default;
 $indigo:  #6610f2 !default;
@@ -84,7 +85,8 @@ $green:   #28a745 !default;
 $teal:    #20c997 !default;
 $cyan:    #17a2b8 !default;
 
-$colors: (
+$colors: () !default;
+$colors: map-merge((
   blue: $blue,
   indigo: $indigo,
   purple: $purple,
@@ -98,9 +100,10 @@ $colors: (
   white: $white,
   gray: $gray-600,
   gray-dark: $gray-800
-) !default;
+), $colors);
 
-$theme-colors: (
+$theme-colors: () !default;
+$theme-colors: map-merge((
   primary: $blue,
   secondary: $gray-600,
   success: $green,
@@ -109,7 +112,7 @@ $theme-colors: (
   danger: $red,
   light: $gray-100,
   dark: $gray-800
-) !default;
+), $theme-colors);
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
@@ -632,7 +635,8 @@ $card-bg:                  $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-deck-margin:          ($grid-gutter-width / 2) !default;
+$card-group-margin:         ($grid-gutter-width / 2) !default;
+$card-deck-margin:          $card-group-margin !default;
 
 $card-columns-count:        3 !default;
 $card-columns-gap:          1.25rem !default;

scss/mixins/_buttons.scss

@@ -9,7 +9,7 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
-  &:hover {
+  @include hover {
     @include color-yiq($background);
     background-color: $active-background;
     border-color: $active-border;

scss/mixins/_forms.scss

@@ -33,8 +33,8 @@
         box-shadow: 0 0 0 .2rem rgba($color,.25);
       }
 
-      ~ .invalid-feedback,
+      ~ .#{$state}-feedback,
-      ~ .invalid-tooltip {
+      ~ .#{$state}-tooltip {
         display: block;
       }
     }

scss/mixins/_grid.scss

@@ -3,11 +3,11 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-container() {
+  width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding-right: ($grid-gutter-width / 2);
   padding-left:  ($grid-gutter-width / 2);
-  width: 100%;
 }