Merge remote-tracking branch 'twbs/v4-dev' into patch-1

Conflicts:
	scss/_custom-forms.scss
	scss/_variables.scss

36 files changed, 314 insertions, 289 deletions

diff --git a/scss/.scsslint.yml b/scss/.scsslint.yml
index 3b24eeb3a..35ce8194f 100644
--- a/scss/.scsslint.yml
+++ b/scss/.scsslint.yml
@@ -12,6 +12,9 @@ linters:
   ColorKeyword:
     enabled: true
 
+  ColorVariable:
+    enabled: false
+
   Comment:
     enabled: true
     exclude: ['_normalize.scss', 'bootstrap.scss']
@@ -55,6 +58,9 @@ linters:
   IdSelector:
     enabled: true
 
+  ImportantRule:
+    enabled: false
+
   ImportPath:
     enabled: true
     leading_underscore: false
@@ -96,6 +102,9 @@ linters:
       "bottom",
       "left",
       "z-index",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
       "display",
       "float",
       "width",
@@ -104,10 +113,6 @@ linters:
       "height",
       "min-height",
       "max-height",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "-webkit-appearance",
       "flex",
       "flex-direction",
       "flex-flow",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index aaa2a1da5..e52e957b5 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -20,7 +20,6 @@
 
 // Headings for larger alerts
 .alert-heading {
-  margin-top: 0;
   // Specified to prevent conflicts of changing $headings-color
   color: inherit;
 }
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index d2302b829..30af411ab 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -4,16 +4,16 @@
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
+  @include clearfix;
 
   > li {
-    display: inline-block;
+    float: left;
 
-    + li:before {
-      $nbsp: "\00a0";
+    + li::before {
       padding-right: .5rem;
       padding-left: .5rem;
       color: $breadcrumb-divider-color;
-      content: "#{$breadcrumb-divider}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
+      content: "#{$breadcrumb-divider}";
     }
   }
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 265f35776..37ad14ddd 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -39,8 +39,7 @@
   }
 
   &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
+  &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
@@ -111,8 +110,7 @@ fieldset[disabled] a.btn {
   &,
   &:active,
   &.active,
-  &:disabled,
-  fieldset[disabled] & {
+  &:disabled {
     background-color: transparent;
     @include box-shadow(none);
   }
@@ -129,8 +127,7 @@ fieldset[disabled] a.btn {
     text-decoration: $link-hover-decoration;
     background-color: transparent;
   }
-  &:disabled,
-  fieldset[disabled] & {
+  &:disabled {
     @include hover-focus {
       color: $btn-link-disabled-color;
       text-decoration: none;
diff --git a/scss/_card.scss b/scss/_card.scss
index 0a4f5b630..03079f988 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -5,6 +5,7 @@
 .card {
   position: relative;
   margin-bottom: $card-spacer-y;
+  background-color: #fff;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
@@ -14,7 +15,6 @@
 }
 
 .card-title {
-  margin-top: 0;
   margin-bottom: $card-spacer-y;
 }
 
@@ -181,33 +181,37 @@
 //
 
 @if $enable-flex {
-  .card-deck {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -.625rem;
-    margin-left: -.625rem;
-
-    .card {
-      flex: 1 0 0;
-      margin-right: .625rem;
-      margin-left: .625rem;
+  @include media-breakpoint-up(sm) {
+    .card-deck {
+      display: flex;
+      flex-flow: row wrap;
+      margin-right: -.625rem;
+      margin-left: -.625rem;
+
+      .card {
+        flex: 1 0 0;
+        margin-right: .625rem;
+        margin-left: .625rem;
+      }
     }
   }
 } @else {
-  .card-deck {
-    display: table;
-    table-layout: fixed;
-    border-spacing: 1.25rem 0;
-
-    .card {
-      display: table-cell;
-      width: 1%;
-      vertical-align: top;
+  @include media-breakpoint-up(sm) {
+    .card-deck {
+      display: table;
+      table-layout: fixed;
+      border-spacing: 1.25rem 0;
+
+      .card {
+        display: table-cell;
+        width: 1%;
+        vertical-align: top;
+      }
+    }
+    .card-deck-wrapper {
+      margin-right: -1.25rem;
+      margin-left: -1.25rem;
     }
-  }
-  .card-deck-wrapper {
-    margin-right: -1.25rem;
-    margin-left: -1.25rem;
   }
 }
 
@@ -215,54 +219,56 @@
 // Card groups
 //
 
-.card-group {
-  @if $enable-flex {
-    display: flex;
-    flex-flow: row wrap;
-  } @else {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  .card {
+@include media-breakpoint-up(sm) {
+  .card-group {
     @if $enable-flex {
-      flex: 1 0 0;
+      display: flex;
+      flex-flow: row wrap;
     } @else {
-      display: table-cell;
-      vertical-align: top;
+      display: table;
+      width: 100%;
+      table-layout: fixed;
     }
 
-    + .card {
-      margin-left: 0;
-      border-left: 0;
-    }
+    .card {
+      @if $enable-flex {
+        flex: 1 0 0;
+      } @else {
+        display: table-cell;
+        vertical-align: top;
+      }
 
-    // Handle rounded corners
-    @if $enable-rounded {
-      &:first-child {
-        .card-img-top {
-          border-top-right-radius: 0;
-        }
-        .card-img-bottom {
-          border-bottom-right-radius: 0;
-        }
+      + .card {
+        margin-left: 0;
+        border-left: 0;
       }
-      &:last-child {
-        .card-img-top {
-          border-top-left-radius: 0;
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:first-child {
+          .card-img-top {
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom {
+            border-bottom-right-radius: 0;
+          }
         }
-        .card-img-bottom {
-          border-bottom-left-radius: 0;
+        &:last-child {
+          .card-img-top {
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom {
+            border-bottom-left-radius: 0;
+          }
         }
-      }
 
-      &:not(:first-child):not(:last-child) {
-        border-radius: 0;
-
-        .card-img-top,
-        .card-img-bottom {
+        &:not(:first-child):not(:last-child) {
           border-radius: 0;
+
+          .card-img-top,
+          .card-img-bottom {
+            border-radius: 0;
+          }
         }
       }
     }
@@ -274,12 +280,14 @@
 // Card
 //
 
-.card-columns {
-  column-count: 3;
-  column-gap: 1.25rem;
+@include media-breakpoint-up(sm) {
+  .card-columns {
+    column-count: 3;
+    column-gap: 1.25rem;
 
-  .card {
-    display: inline-block;
-    width: 100%; // Don't let them exceed the column width
+    .card {
+      display: inline-block;
+      width: 100%; // Don't let them exceed the column width
+    }
   }
 }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index c5a7fdfcb..b02a2cd21 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -16,7 +16,7 @@
     // Account for jankitude on images
     > img,
     > a > img {
-      @extend .img-responsive;
+      @extend .img-fluid;
       line-height: 1;
     }
 
@@ -141,12 +141,12 @@
   }
 
   .icon-prev {
-    &:before {
+    &::before {
       content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
     }
   }
   .icon-next {
-    &:before {
+    &::before {
       content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
     }
   }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 9c5b7796f..ebca1e1ec 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -19,16 +19,17 @@
     z-index: -1; // Put the input behind the label so it doesn't overlay text
     opacity: 0;
 
-    &:focus ~ .c-indicator {
-      @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
-    }
-
     &:checked ~ .c-indicator {
       color: #fff;
       background-color: #0074d9;
       @include box-shadow(none);
     }
 
+    &:focus ~ .c-indicator {
+      // the mixin is not used here to make sure there is feedback
+      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+    }
+
     &:active ~ .c-indicator {
       color: #fff;
       background-color: #84c6ff;
@@ -108,7 +109,7 @@
   .c-input {
     display: inline;
 
-    &:after {
+    &::after {
       display: block;
       margin-bottom: .25rem;
       content: "";
@@ -125,29 +126,31 @@
 //
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
+//
+// Includes IE9-specific hacks (noted by ` \9`).
 
 .c-select {
   display: inline-block;
   max-width: 100%;
   padding: .375rem 1.75rem .375rem .75rem;
+  padding-right: .75rem \9;
   vertical-align: middle;
+<<<<<<< HEAD
 	background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDUiPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0yIDBMMCAyaDR6bTAgNUwwIDNoNHoiLz48L3N2Zz4=) no-repeat right .75rem center;
+=======
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
+  background-image: none \9;
+>>>>>>> twbs/v4-dev
   background-size: 8px 10px;
   border: 1px solid $input-border;
-
-  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-  -webkit-appearance: none;
+  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
-  appearance: none;
-
-  // IE9 hacks to hide the background-image and reduce padding
-  padding-right: .75rem \9;
-  background-image: none \9;
+  -webkit-appearance: none;
 
   &:focus {
-    outline: none;
     border-color: #51a7e8;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+    outline: none;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5));
   }
 
   // Hides the default caret in IE11
@@ -181,7 +184,7 @@
 .file input {
   min-width: 14rem;
   margin: 0;
-  filter: alpha(opacity=0);
+  filter: alpha(opacity = 0);
   opacity: 0;
 }
 .file-custom {
@@ -198,12 +201,12 @@
   background-color: #fff;
   border: .075rem solid #ddd;
   border-radius: .25rem;
-  box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
+  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
-.file-custom:after {
+.file-custom::after {
   content: "Choose file...";
 }
-.file-custom:before {
+.file-custom::before {
   position: absolute;
   top: -.075rem;
   right: -.075rem;
@@ -222,5 +225,5 @@
 
 // Focus state
 .file input:focus ~ .file-custom {
-  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+  @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
 }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index d3588d270..aa1a9d1b3 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -6,7 +6,7 @@
 
 .dropdown-toggle {
   // Generate the caret automatically
-  &:after {
+  &::after {
     display: inline-block;
     width: 0;
     height: 0;
@@ -24,6 +24,15 @@
   }
 }
 
+.dropup {
+  .dropdown-toggle {
+    &::after {
+      border-top: 0;
+      border-bottom: $caret-width solid;
+    }
+  }
+}
+
 // The dropdown menu (ul)
 .dropdown-menu {
   position: absolute;
@@ -51,20 +60,20 @@
 }
 
 // Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// for <button>s`
 .dropdown-item {
   display: block;
+  width: 100%; // For `<button>`s
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
   line-height: $line-height;
   color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-  // For `<button>`s
-  text-align: inherit;
-  width: 100%;
-  background: none;
-  border: 0;
+  background: none; // For `<button>`s
+  border: 0; // For `<button>`s
 
   @include hover-focus {
     color: $dropdown-link-hover-color;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 6eafd53ca..7879f6384 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -50,15 +50,13 @@
   // disabled if the fieldset is disabled. Due to implementation difficulty, we
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
-  &[readonly],
-  fieldset[disabled] & {
+  &[readonly] {
     background-color: $input-bg-disabled;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
 
-  &[disabled],
-  fieldset[disabled] & {
+  &:disabled {
     cursor: $cursor-disabled;
   }
 }
@@ -233,24 +231,21 @@
 input[type="radio"],
 input[type="checkbox"] {
   &:disabled,
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     cursor: $cursor-disabled;
   }
 }
 // These classes are used directly on <label>s
 .radio-inline,
 .checkbox-inline {
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     cursor: $cursor-disabled;
   }
 }
 // These classes are used on elements with <label> descendants
 .radio,
 .checkbox {
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     label {
       cursor: $cursor-disabled;
     }
@@ -266,14 +261,14 @@ input[type="checkbox"] {
 .form-control-warning,
 .form-control-error {
   padding-right: ($input-padding-x * 3);
+  background-repeat: no-repeat;
   background-position: center right ($input-height * .25);
   background-size: ($input-height * .65) ($input-height * .65);
-  background-repeat: no-repeat;
 }
 
 // Form validation states
 .has-success {
-  @include form-control-validation(success, $brand-success);
+  @include form-control-validation($brand-success);
 
   .form-control-success {
     background-image: url($form-icon-success);
@@ -281,7 +276,7 @@ input[type="checkbox"] {
 }
 
 .has-warning {
-  @include form-control-validation(warning, $brand-warning);
+  @include form-control-validation($brand-warning);
 
   .form-control-warning {
     background-image: url($form-icon-warning);
@@ -289,7 +284,7 @@ input[type="checkbox"] {
 }
 
 .has-error {
-  @include form-control-validation(error, $brand-danger);
+  @include form-control-validation($brand-danger);
 
   .form-control-error {
     background-image: url($form-icon-error);
@@ -384,7 +379,7 @@ input[type="checkbox"] {
 // Requires wrapping inputs and labels with `.form-group` for proper display of
 // default HTML form controls and our custom form controls (e.g., input groups).
 //
-// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+// Heads up! This is mixin-ed into `.navbar-form` in _navbar.scss.
 
 .form-inline {
 
@@ -425,7 +420,7 @@ input[type="checkbox"] {
       width: 100%;
     }
 
-    .control-label {
+    .form-control-label {
       margin-bottom: 0;
       vertical-align: middle;
     }
diff --git a/scss/_grid.scss b/scss/_grid.scss
index b71d5b03d..2f58dc1ea 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -4,13 +4,8 @@
 
 .container {
   @include make-container();
+  @include make-container-max-widths();
 
-  // For each breakpoint, define the maximum width of the container in a media query
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    @include media-breakpoint-up($breakpoint) {
-      max-width: $container-max-width;
-    }
-  }
 }
 
 
@@ -28,8 +23,10 @@
 //
 // Rows contain and clear the floats of your columns.
 
-.row {
-  @include make-row();
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+  }
 }
 
 
@@ -37,14 +34,16 @@
 //
 // Common styles for small and large grid columns
 
-@include make-grid-columns();
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}
 
 
 // Flex variation
 //
 // Custom styles for additional flex alignment options.
 
-@if $enable-flex {
+@if $enable-flex and $enable-grid-classes {
 
   // Flex column reordering
 
diff --git a/scss/_images.scss b/scss/_images.scss
index dbdd858b8..eb7b4ce18 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,6 +1,6 @@
 // Responsive images (ensure images don't scale beyond their parents)
-.img-responsive {
-  @include img-responsive();
+.img-fluid {
+  @include img-fluid();
 }
 
 // Rounded corners
@@ -19,7 +19,7 @@
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));
 
   // Keep them at most 100% wide
-  @include img-responsive(inline-block);
+  @include img-fluid(inline-block);
 }
 
 // Perfect circle
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index df8aa10eb..3b4ef632c 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -97,7 +97,7 @@
     @include border-radius($border-radius-sm);
   }
   &.form-control-lg {
-    padding: $input-padding-x-lg $input-padding-x-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($border-radius-lg);
   }
diff --git a/scss/_labels.scss b/scss/_labels.scss
index 599f33558..400b8b2a6 100644
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@@ -19,12 +19,12 @@
   &:empty {
     display: none;
   }
+}
 
-  // Quick fix for labels in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
+// Quick fix for labels in buttons
+.btn .label {
+  position: relative;
+  top: -1px;
 }
 
 // Add hover effects, but only for links
@@ -41,8 +41,8 @@ a.label {
 // Make them extra rounded with a modifier to replace v3's badges.
 
 .label-pill {
-  padding-left: .6em;
   padding-right: .6em;
+  padding-left: .6em;
   border-radius: 1rem;
 }
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d90902290..cff9d17b7 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -18,9 +18,9 @@
   display: block;
   padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -.0625rem;
+  margin-bottom: -$border-width;
   background-color: $list-group-bg;
-  border: .0625rem solid $list-group-border;
+  border: $border-width solid $list-group-border;
 
   // Round the first and last items
   &:first-child {
@@ -34,7 +34,7 @@
 
 .list-group-flush {
   .list-group-item {
-    border-width: .0625rem 0;
+    border-width: $border-width 0;
     border-radius: 0;
   }
 }
@@ -48,8 +48,8 @@
 a.list-group-item,
 button.list-group-item {
   width: 100%;
-  text-align: inherit;
   color: $list-group-link-color;
+  text-align: inherit;
 
   .list-group-item-heading {
     color: $list-group-link-heading-color;
diff --git a/scss/_media.scss b/scss/_media.scss
index c92e2b1c2..4163db3c0 100644
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -6,6 +6,12 @@
   .media-body {
     flex: 1;
   }
+  .media-middle {
+    align-self: center;
+  }
+  .media-bottom {
+    align-self: flex-end;
+  }
 } @else {
   .media {
     margin-top: 15px;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 35f46feb7..90a48cf89 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -22,18 +22,17 @@
 
 // Utilities
 @import "mixins/breakpoints";
-@import "mixins/hide-text";
 @import "mixins/hover";
 @import "mixins/image";
 @import "mixins/label";
 @import "mixins/reset-filter";
 @import "mixins/resize";
-@import "mixins/responsive-visibility";
 @import "mixins/screen-reader";
 @import "mixins/size";
 @import "mixins/tab-focus";
 @import "mixins/reset-text";
 @import "mixins/text-emphasis";
+@import "mixins/text-hide";
 @import "mixins/text-truncate";
 
 // // Components
diff --git a/scss/_modal.scss b/scss/_modal.scss
index f034c77c8..046810f5f 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -26,8 +26,8 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    transform: translate(0, -25%);
     transition: transform .3s ease-out;
+    transform: translate(0, -25%);
   }
   &.in .modal-dialog { transform: translate(0, 0); }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 61c212144..ffe133b9f 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -19,8 +19,8 @@
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.
 
-// Static top (unfixed, but 100% wide) navbar
-.navbar-static-top {
+// A static, full width modifier with no rounded corners.
+.navbar-full {
   z-index: $zindex-navbar;
 
   @include media-breakpoint-up(sm) {
@@ -35,7 +35,6 @@
   right: 0;
   left: 0;
   z-index: $zindex-navbar-fixed;
-  margin-bottom: 0; // override .navbar defaults
 
   // Undo the rounded corners
   @include media-breakpoint-up(sm) {
@@ -70,9 +69,9 @@
 
 .navbar-brand {
   float: left;
-  margin-right: 1rem;
   padding-top:    .25rem;
   padding-bottom: .25rem;
+  margin-right: 1rem;
   font-size: $font-size-lg;
 
   @include hover-focus {
@@ -90,12 +89,12 @@
   width: 1px;
   padding-top: .425rem;
   padding-bottom: .425rem;
-  overflow: hidden;
-  margin-left:  $navbar-padding-horizontal;
   margin-right: $navbar-padding-horizontal;
+  margin-left:  $navbar-padding-horizontal;
+  overflow: hidden;
 
-  &:before {
-    content: '\00a0';
+  &::before {
+    content: "\00a0";
   }
 }
 
@@ -130,6 +129,11 @@
       display: block !important;
     }
   }
+  &-md {
+    @include media-breakpoint-up(lg) {
+      display: block !important;
+    }
+  }
 }
 
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 2bd8415d5..674a8f31f 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -29,7 +29,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
       border-bottom-width: 0;
-      &:after {
+      &::after {
         bottom: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -49,7 +49,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
       border-left-width: 0;
-      &:after {
+      &::after {
         bottom: -$popover-arrow-width;
         left: 1px;
         content: "";
@@ -69,7 +69,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
       border-bottom-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         top: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -89,7 +89,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         right: 1px;
         bottom: -$popover-arrow-width;
         content: "";
@@ -118,11 +118,11 @@
 
 // Arrows
 //
-// .popover-arrow is outer, .popover-arrow:after is inner
+// .popover-arrow is outer, .popover-arrow::after is inner
 
 .popover-arrow {
   &,
-  &:after {
+  &::after {
     position: absolute;
     display: block;
     width: 0;
@@ -134,7 +134,7 @@
 .popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow:after {
+.popover-arrow::after {
   content: "";
   border-width: $popover-arrow-width;
 }
diff --git a/scss/_print.scss b/scss/_print.scss
index 4bbece544..e9cc65e32 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -7,8 +7,8 @@
 
 @media print {
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     text-shadow: none !important;
     box-shadow: none !important;
   }
@@ -18,7 +18,7 @@
     text-decoration: underline;
   }
 
-  abbr[title]:after {
+  abbr[title]::after {
     content: " (" attr(title) ")";
   }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index de32aae2b..a4dc0398c 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,7 +1,7 @@
 // Reboot
 //
 // Global resets to common HTML elements and more for easier usage by Bootstrap.
-// Builds on the resets of Normalize.css.
+// Adds additional rules on top of Normalize.css, including several overrides.
 
 
 // Reset the box-sizing
@@ -22,8 +22,8 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
@@ -146,7 +146,7 @@ blockquote {
 
 a {
   color: $link-color;
-  text-decoration: none;
+  text-decoration: $link-decoration;
 
   @include hover-focus {
     color: $link-hover-color;
@@ -279,6 +279,8 @@ legend {
 }
 
 input[type="search"] {
+  // Undo Normalize's default here to match our global overrides.
+  box-sizing: inherit;
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
diff --git a/scss/_type.scss b/scss/_type.scss
index 2f5cdb4f9..597886db3 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -143,7 +143,7 @@ mark,
     line-height: $line-height;
     color: $blockquote-small-color;
 
-    &:before {
+    &::before {
       content: "\2014 \00A0"; // em dash, nbsp
     }
   }
@@ -159,8 +159,8 @@ mark,
 
   // Account for citation
   footer {
-    &:before { content: ""; }
-    &:after {
+    &::before { content: ""; }
+    &::after {
       content: "\00A0 \2014"; // nbsp, em dash
     }
   }
@@ -175,9 +175,9 @@ mark,
   display: inline-block;
 
   > img {
-    @extend .img-responsive;
-    line-height: 1;
+    @extend .img-fluid;
     margin-bottom: ($spacer-y / 2);
+    line-height: 1;
   }
 }
 
diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index c69ecc93e..2c3617ce0 100644
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@@ -44,6 +44,6 @@
 
 .hidden-print {
   @media print {
-    @include responsive-invisibility(".hidden-print");
+    display: none !important;
   }
 }
diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss
index 547bea701..1c2cca468 100644
--- a/scss/_utilities-spacing.scss
+++ b/scss/_utilities-spacing.scss
@@ -40,7 +40,7 @@
 .p-r-0 { padding-right:  0 !important; }
 .p-b-0 { padding-bottom: 0 !important; }
 .p-l-0 { padding-left:   0 !important; }
-.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
+.p-x-0 { padding-right:  0 !important; padding-left:   0 !important; }
 .p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
 
 .p-a { padding:        $spacer !important; }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 70e22e8e8..fca481a6d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -49,6 +49,7 @@ $enable-shadows:            false !default;
 $enable-gradients:          false !default;
 $enable-transitions:        false !default;
 $enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
 
 
 // Spacing
@@ -75,6 +76,7 @@ $body-color:                 $gray-dark !default;
 // Style anchor elements.
 
 $link-color:                 $brand-primary !default;
+$link-decoration:            none !default;
 $link-hover-color:           darken($link-color, 15%) !default;
 $link-hover-decoration:      underline !default;
 
@@ -142,10 +144,10 @@ $font-size-h4:               1.5rem !default;
 $font-size-h5:               1.25rem !default;
 $font-size-h6:               1rem !default;
 
-$display1-size:               3.5rem !default;
-$display2-size:               4.5rem !default;
-$display3-size:               5.5rem !default;
-$display4-size:               6rem !default;
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
 
 $display1-weight:             300 !default;
 $display2-weight:             300 !default;
@@ -172,14 +174,14 @@ $blockquote-font-size:        ($font-size-base * 1.25) !default;
 $blockquote-border-color:     $gray-lighter !default;
 
 $hr-border-color:             rgba(0,0,0,.1) !default;
-$hr-border-width:             $border-width;
+$hr-border-width:             $border-width !default;
 
 
 // Components
 //
 // Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$line-height-lg:         (4/3) !default;
+$line-height-lg:         (4 / 3) !default;
 $line-height-sm:         1.5 !default;
 
 $border-radius:          .25rem !default;
@@ -212,8 +214,8 @@ $table-border-color:            $gray-lighter !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-padding-x:                  1rem;
-$btn-padding-y:                  .375rem;
+$btn-padding-x:                  1rem !default;
+$btn-padding-y:                  .375rem !default;
 $btn-font-weight:                normal !default;
 
 $btn-primary-color:              #fff !default;
@@ -249,9 +251,9 @@ $btn-padding-x-lg:               1.25rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:              $border-radius;
-$btn-border-radius-lg:           $border-radius-lg;
-$btn-border-radius-sm:           $border-radius-sm;
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
 
 
 // Forms
@@ -285,7 +287,7 @@ $input-height:                   (($font-size-base * $line-height) + ($input-pad
 $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default;
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default;
 
-$form-group-margin-bottom:       15px;
+$form-group-margin-bottom:       $spacer-y !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
 $input-group-addon-border-color: $input-border !default;
@@ -293,9 +295,15 @@ $input-group-addon-border-color: $input-border !default;
 $cursor-disabled:                not-allowed !default;
 
 // Form validation icons
+<<<<<<< HEAD
 $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==";
 $form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+";
 $form-icon-error: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=";
+=======
+$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==" !default;
+$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==" !default;
+$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=" !default;
+>>>>>>> twbs/v4-dev
 
 
 // Dropdowns
@@ -341,15 +349,15 @@ $navbar-border-radius:              $border-radius !default;
 $navbar-padding-horizontal:         $spacer !default;
 $navbar-padding-vertical:           ($spacer / 2) !default;
 
-$navbar-dark-color:                 rgba(255,255,255,.5);
-$navbar-dark-hover-color:           rgba(255,255,255,.75);
-$navbar-dark-active-color:          rgba(255,255,255,1);
-$navbar-dark-disabled-color:        rgba(255,255,255,.25);
+$navbar-dark-color:                 rgba(255,255,255,.5) !default;
+$navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
+$navbar-dark-active-color:          rgba(255,255,255,1) !default;
+$navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
 
-$navbar-light-color:                rgba(0,0,0,.3);
-$navbar-light-hover-color:          rgba(0,0,0,.6);
-$navbar-light-active-color:         rgba(0,0,0,.8);
-$navbar-light-disabled-color:       rgba(0,0,0,.15);
+$navbar-light-color:                rgba(0,0,0,.3) !default;
+$navbar-light-hover-color:          rgba(0,0,0,.6) !default;
+$navbar-light-active-color:         rgba(0,0,0,.8) !default;
+$navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
 
 
 // Navs
@@ -445,14 +453,13 @@ $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 
 // Cards
-$card-spacer-x:            1.25rem;
-$card-spacer-y:            .75rem;
-$card-border-width:        .0625rem;
-$card-border-radius:       .25rem;
-$card-border-color:        #e5e5e5;
-$card-border-radius-inner: ($card-border-radius - $card-border-width);
-
-$card-cap-bg: #f5f5f5;
+$card-spacer-x:            1.25rem !default;
+$card-spacer-y:            .75rem !default;
+$card-border-width:        .0625rem !default;
+$card-border-radius:       .25rem !default;
+$card-border-color:        #e5e5e5 !default;
+$card-border-radius-inner: ($card-border-radius - $card-border-width) !default;
+$card-cap-bg:              #f5f5f5 !default;
 
 // Tooltips
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 892ae560a..203109faf 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,4 +1,10 @@
-// Core variables and mixins
+/*!
+ * Bootstrap v4.0.0-alpha (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+ // Core variables and mixins
 @import "variables";
 @import "mixins";
 
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 0b76c3004..b1dfbbab6 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,21 +1,29 @@
 // Single side border-radius
 
 @mixin border-top-radius($radius) {
-  border-top-right-radius: $radius;
-   border-top-left-radius: $radius;
+  @if $enable-rounded {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+  }
 }
 
 @mixin border-right-radius($radius) {
-  border-bottom-right-radius: $radius;
-     border-top-right-radius: $radius;
+  @if $enable-rounded {
+    border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+  }
 }
 
 @mixin border-bottom-radius($radius) {
-  border-bottom-right-radius: $radius;
-   border-bottom-left-radius: $radius;
+  @if $enable-rounded {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
 }
 
 @mixin border-left-radius($radius) {
-  border-bottom-left-radius: $radius;
-     border-top-left-radius: $radius;
+  @if $enable-rounded {
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+  }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 75d284778..61b9f9caf 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -4,39 +4,48 @@
 // and disabled options for all buttons
 
 @mixin button-variant($color, $background, $border) {
+  $active-background: darken($background, 10%);
+  $active-border: darken($border, 12%);
+
   color: $color;
   background-color: $background;
   border-color: $border;
-//  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
-//  .box-shadow($shadow);
-
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
 
-  &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
+  @include hover {
     color: $color;
     background-color: $active-background;
         border-color: $active-border;
   }
-  @include hover {
+
+  &:focus,
+  &.focus {
     color: $color;
     background-color: $active-background;
         border-color: $active-border;
   }
+
   &:active,
   &.active,
   .open > &.dropdown-toggle {
+    color: $color;
+    background-color: $active-background;
+        border-color: $active-border;
     // Remove the gradient for the pressed/active state
     background-image: none;
     @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: darken($background, 17%);
+          border-color: darken($border, 25%);
+    }
   }
+
   &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
+  &:disabled {
     &:focus,
     &.focus {
       background-color: $background;
@@ -71,8 +80,7 @@
   }
 
   &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
+  &:disabled {
     &:focus,
     &.focus {
       border-color: lighten($color, 20%);
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index dc3e2ab42..d0ae125f3 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,22 +1,7 @@
-// Clearfix
-//
-// For modern browsers
-// 1. The space content is one way to avoid an Opera bug when the
-//    contenteditable attribute is included anywhere else in the document.
-//    Otherwise it causes space to appear at the top and bottom of elements
-//    that are clearfixed.
-// 2. The use of `table` rather than `block` is only necessary if using
-//    `:before` to contain the top-margins of child elements.
-//
-// Source: http://nicolasgallagher.com/micro-clearfix-hack/
-
 @mixin clearfix() {
-  &:before,
-  &:after {
-    content: " "; // 1
-    display: table; // 2
-  }
-  &:after {
+  &::after {
+    content: "";
+    display: table;
     clear: both;
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 764c5e083..8a59e04f6 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -3,10 +3,10 @@
 // Used in _forms.scss to generate the form validation CSS for warnings, errors,
 // and successes.
 
-@mixin form-control-validation($state, $color) {
+@mixin form-control-validation($color) {
   // Color the label and help text
   .help-block,
-  .control-label,
+  .form-control-label,
   .radio,
   .checkbox,
   .radio-inline,
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 56b8c6f20..87b4ac94a 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -10,6 +10,16 @@
   @include clearfix();
 }
 
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
 @mixin make-row($gutter: $grid-gutter-width) {
   @if $enable-flex {
     display: flex;
diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss
index bec9626f6..db590e3c5 100644
--- a/scss/mixins/_image.scss
+++ b/scss/mixins/_image.scss
@@ -7,7 +7,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@mixin img-responsive($display: block) {
+@mixin img-fluid($display: block) {
   display: $display;
   max-width: 100%; // Part 1: Set a maximum relative to the parent
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@@ -19,7 +19,7 @@
 // Short retina mixin for setting background-image and -size.
 
 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
-  background-image: url("#{file-1x}");
+  background-image: url($file-1x);
 
   @media
   only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -27,7 +27,7 @@
   only screen and (        min-device-pixel-ratio: 2),
   only screen and (                min-resolution: 192dpi),
   only screen and (                min-resolution: 2dppx) {
-    background-image: url("#{file-2x}");
+    background-image: url($file-2x);
     background-size: $width-1x $height-1x;
   }
 }
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index a40dda96d..81b0f1634 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,13 +1,13 @@
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
-  .list-group-item-#{state} {
+  .list-group-item-#{$state} {
     color: $color;
     background-color: $background;
   }
 
-  a.list-group-item-#{state},
-  button.list-group-item-#{state} {
+  a.list-group-item-#{$state},
+  button.list-group-item-#{$state} {
     color: $color;
 
     .list-group-item-heading {
diff --git a/scss/mixins/_responsive-visibility.scss b/scss/mixins/_responsive-visibility.scss
deleted file mode 100644
index cbdf77723..000000000
--- a/scss/mixins/_responsive-visibility.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Responsive utilities
-
-//
-// More easily include all the states for responsive-utilities.less.
-// [converter] $parent hack
-@mixin responsive-visibility($parent) {
-  #{$parent} {
-    display: block !important;
-  }
-  table#{$parent}  { display: table !important; }
-  tr#{$parent}     { display: table-row !important; }
-  th#{$parent},
-  td#{$parent}     { display: table-cell !important; }
-}
-
-// [converter] $parent hack
-@mixin responsive-invisibility($parent) {
-  #{$parent} {
-    display: none !important;
-  }
-}
diff --git a/scss/mixins/_size.scss b/scss/mixins/_size.scss
index abbe2463c..b9dd48e8d 100644
--- a/scss/mixins/_size.scss
+++ b/scss/mixins/_size.scss
@@ -1,10 +1,6 @@
 // Sizing shortcuts
 
-@mixin size($width, $height) {
+@mixin size($width, $height: $width) {
   width: $width;
   height: $height;
 }
-
-@mixin square($size) {
-  @include size($size, $size);
-}
diff --git a/scss/mixins/_hide-text.scss b/scss/mixins/_text-hide.scss
index daed5fb7a..daed5fb7a 100644
--- a/scss/mixins/_hide-text.scss
+++ b/scss/mixins/_text-hide.scss