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

41 files changed, 346 insertions, 315 deletions

diff --git a/scss/.scsslint.yml b/scss/.scss-lint.yml
index 35ce8194f..5117da2af 100644
--- a/scss/.scsslint.yml
+++ b/scss/.scss-lint.yml
@@ -381,6 +381,9 @@ linters:
     enabled: true
     extra_properties: []
 
+  PseudoElement:
+    enabled: true
+
   QualifyingElement:
     enabled: false
     allow_element_with_attribute: false
diff --git a/scss/_alert.scss b/scss/_alert.scss
index e52e957b5..b9f6c60da 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -5,7 +5,7 @@
 .alert {
   padding: $alert-padding;
   margin-bottom: $spacer-y;
-  border: 1px solid transparent;
+  border: $alert-border-width solid transparent;
   @include border-radius($alert-border-radius);
 
   // Improve alignment and spacing of inner content
@@ -61,5 +61,5 @@
   @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
 }
 .alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text);
+  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
 }
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index d85c63767..90cc2cd02 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -27,7 +27,7 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -1px;
+    margin-left: -$btn-border-width;
   }
 }
 
@@ -167,7 +167,7 @@
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -1px;
+    margin-top: -$btn-border-width;
     margin-left: 0;
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 37ad14ddd..e5d949965 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -8,10 +8,9 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  touch-action: manipulation;
   cursor: pointer;
   user-select: none;
-  border: $border-width solid transparent;
+  border: $btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
   @include transition(all .2s ease-in-out);
 
diff --git a/scss/_card.scss b/scss/_card.scss
index 03079f988..630447ff9 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -4,8 +4,9 @@
 
 .card {
   position: relative;
+  display: block;
   margin-bottom: $card-spacer-y;
-  background-color: #fff;
+  background-color: $card-bg;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
@@ -120,7 +121,7 @@
 .card-inverse {
   .card-header,
   .card-footer {
-    border-bottom: .075rem solid rgba(255,255,255,.2);
+    border-bottom: $card-border-width solid rgba(255,255,255,.2);
   }
   .card-header,
   .card-footer,
@@ -135,7 +136,7 @@
   }
   .card-link {
     @include hover-focus {
-      color: #fff;
+      color: $card-link-hover-color;
     }
   }
 }
@@ -169,10 +170,10 @@
 
 // Card image caps
 .card-img-top {
-  @include border-radius(.25rem .25rem 0 0);
+  @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
 }
 .card-img-bottom {
-  @include border-radius(0 0 .25rem .25rem);
+  @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
 }
 
 
@@ -246,6 +247,8 @@
       // Handle rounded corners
       @if $enable-rounded {
         &:first-child {
+          @include border-right-radius(0);
+
           .card-img-top {
             border-top-right-radius: 0;
           }
@@ -254,6 +257,8 @@
           }
         }
         &:last-child {
+          @include border-left-radius(0);
+
           .card-img-top {
             border-top-left-radius: 0;
           }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index b02a2cd21..bf0ea61d3 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -178,9 +178,9 @@
     cursor: pointer;
     // IE9 hack for event handling
     //
-    // Internet Explorer 9 does not support clicks on elements without a set
-    // `background-color`. We cannot use `filter` since that's not viewed as a
-    // background color by the browser. Thus, a hack is needed.
+    // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
+    // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
+    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     background-color: rgba(0,0,0,0); // IE9
     border: 1px solid $carousel-indicator-border-color;
     border-radius: 10px;
diff --git a/scss/_code.scss b/scss/_code.scss
index 0de67d9ec..60bbcae81 100644
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -27,7 +27,7 @@ kbd {
   kbd {
     padding: 0;
     font-size: 100%;
-    font-weight: bold;
+    font-weight: $nested-kbd-font-weight;
     @include box-shadow(none);
   }
 }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index ebca1e1ec..ae5fc3d93 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -142,7 +142,7 @@
   background-image: none \9;
 >>>>>>> twbs/v4-dev
   background-size: 8px 10px;
-  border: 1px solid $input-border;
+  border: $input-border-width solid $input-border-color;
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -199,7 +199,7 @@
   color: #555;
   user-select: none;
   background-color: #fff;
-  border: .075rem solid #ddd;
+  border: $input-border-width solid #ddd;
   border-radius: .25rem;
   @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
@@ -219,7 +219,7 @@
   color: #555;
   content: "Browse";
   background-color: #eee;
-  border: .075rem solid #ddd;
+  border: $input-border-width solid #ddd;
   border-radius: 0 .25rem .25rem 0;
 }
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index aa1a9d1b3..d9776d59c 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -1,4 +1,4 @@
-// The dropdown wrapper (div)
+// The dropdown wrapper (`<div>`)
 .dropup,
 .dropdown {
   position: relative;
@@ -10,6 +10,7 @@
     display: inline-block;
     width: 0;
     height: 0;
+    margin-right: .25rem;
     margin-left: .25rem;
     vertical-align: middle;
     content: "";
@@ -33,7 +34,7 @@
   }
 }
 
-// The dropdown menu (ul)
+// The dropdown menu
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -45,23 +46,24 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   font-size: $font-size-base;
+  color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: 1px solid $dropdown-border;
+  border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($border-radius);
   @include box-shadow(0 6px 12px rgba(0,0,0,.175));
 }
 
-// Dividers (basically an hr) within the dropdown
+// Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
 }
 
 // Links, buttons, and more within the dropdown menu
 //
-// `<button>`-specific styles are denoted with `// for <button>s`
+// `<button>`-specific styles are denoted with `// For <button>s`
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
@@ -170,7 +172,7 @@
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 //
-// Just add .dropup after the standard .dropdown class and you're set, bro.
+// Just add .dropup after the standard .dropdown class and you're set.
 // TODO: abstract this so that the navbar fixed styles are not placed here?
 
 .dropup,
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7879f6384..942fea51a 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -14,14 +14,14 @@
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
-  border: $border-width solid $input-border;
-   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  border: $input-border-width solid $input-border-color;
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius);
   @include box-shadow($input-box-shadow);
   @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
 
   // Make inputs at least the height of their button counterpart (base line-height + padding + border).
-  // Only apply the height to textual inputs and some selcts.
+  // Only apply the height to textual inputs and some selects.
   // &:not(textarea),
   // &:not(select[size]),
   // &:not(select[multiple]) {
@@ -76,7 +76,7 @@
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .form-control-label {
-  padding: ($input-padding-y + $border-width) $input-padding-x;
+  padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Override the `<label>` default
 }
 
@@ -89,6 +89,8 @@
 // text within the input to become vertically misaligned. As a workaround, we
 // set a pixel line-height that matches the given height of the input, but only
 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   input[type="date"],
@@ -120,8 +122,8 @@
 .form-control-static {
   min-height: $input-height;
   // Size it appropriately next to real form controls
-  padding-top: ($input-padding-y + $border-width);
-  padding-bottom: ($input-padding-y + $border-width);
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
   // Remove default margin from `p`
   margin-bottom: 0;
 
@@ -259,7 +261,7 @@ input[type="checkbox"] {
 
 .form-control-success,
 .form-control-warning,
-.form-control-error {
+.form-control-danger {
   padding-right: ($input-padding-x * 3);
   background-repeat: no-repeat;
   background-position: center right ($input-height * .25);
@@ -283,11 +285,11 @@ input[type="checkbox"] {
   }
 }
 
-.has-error {
+.has-danger {
   @include form-control-validation($brand-danger);
 
-  .form-control-error {
-    background-image: url($form-icon-error);
+  .form-control-danger {
+    background-image: url($form-icon-danger);
   }
 }
 
@@ -352,7 +354,7 @@ input[type="checkbox"] {
 // .has-warning {
 //   @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
 // }
-// .has-error {
+// .has-danger {
 //   @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
 // }
 //
@@ -378,8 +380,6 @@ 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 _navbar.scss.
 
 .form-inline {
 
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 2f58dc1ea..a71f3aaf2 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -47,78 +47,30 @@
 
   // Flex column reordering
 
-  .col-xs-first { order: -1; }
-  .col-xs-last { order: 1; }
-
-  @include media-breakpoint-up(sm) {
-    .col-sm-first { order: -1; }
-    .col-sm-last { order: 1; }
-  }
-  @include media-breakpoint-up(md) {
-    .col-md-first { order: -1; }
-    .col-md-last { order: 1; }
-  }
-  @include media-breakpoint-up(lg) {
-    .col-lg-first { order: -1; }
-    .col-lg-last { order: 1; }
-  }
-  @include media-breakpoint-up(xl) {
-    .col-xl-first { order: -1; }
-    .col-xl-last { order: 1; }
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .col-#{$breakpoint}-first { order: -1; }
+      .col-#{$breakpoint}-last  { order: 1; }
+    }
   }
 
   // Alignment for every column in row
 
-  .row-xs-top    { align-items: flex-start; }
-  .row-xs-center { align-items: center; }
-  .row-xs-bottom { align-items: flex-end; }
-
-  @include media-breakpoint-up(sm) {
-    .row-sm-top    { align-items: flex-start; }
-    .row-sm-center { align-items: center; }
-    .row-sm-bottom { align-items: flex-end; }
-  }
-  @include media-breakpoint-up(md) {
-    .row-md-top    { align-items: flex-start; }
-    .row-md-center { align-items: center; }
-    .row-md-bottom { align-items: flex-end; }
-  }
-  @include media-breakpoint-up(lg) {
-    .row-lg-top    { align-items: flex-start; }
-    .row-lg-center { align-items: center; }
-    .row-lg-bottom { align-items: flex-end; }
-  }
-  @include media-breakpoint-up(xl) {
-    .row-xl-top    { align-items: flex-start; }
-    .row-xl-center { align-items: center; }
-    .row-xl-bottom { align-items: flex-end; }
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .row-#{$breakpoint}-top    { align-items: flex-start; }
+      .row-#{$breakpoint}-center { align-items: center; }
+      .row-#{$breakpoint}-bottom { align-items: flex-end; }
+    }
   }
 
   // Alignment per column
 
-  .col-xs-top    { align-self: flex-start; }
-  .col-xs-center { align-self: center; }
-  .col-xs-bottom { align-self: flex-end; }
-
-  @include media-breakpoint-up(sm) {
-    .col-sm-top    { align-self: flex-start; }
-    .col-sm-center { align-self: center; }
-    .col-sm-bottom { align-self: flex-end; }
-  }
-  @include media-breakpoint-up(md) {
-    .col-md-top    { align-self: flex-start; }
-    .col-md-center { align-self: center; }
-    .col-md-bottom { align-self: flex-end; }
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .col-#{$breakpoint}-top    { align-self: flex-start; }
+      .col-#{$breakpoint}-center { align-self: center; }
+      .col-#{$breakpoint}-bottom { align-self: flex-end; }
+    }
   }
-  @include media-breakpoint-up(lg) {
-    .col-lg-top    { align-self: flex-start; }
-    .col-lg-center { align-self: center; }
-    .col-lg-bottom { align-self: flex-end; }
-  }
-  @include media-breakpoint-up(xl) {
-    .col-xl-top    { align-self: flex-start; }
-    .col-xl-center { align-self: center; }
-    .col-xl-bottom { align-self: flex-end; }
-  }
-
 }
diff --git a/scss/_images.scss b/scss/_images.scss
index eb7b4ce18..81e823ca0 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,4 +1,10 @@
 // Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
 .img-fluid {
   @include img-fluid();
 }
@@ -13,7 +19,7 @@
   padding: $thumbnail-padding;
   line-height: $line-height;
   background-color: $thumbnail-bg;
-  border: 1px solid $thumbnail-border;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
   border-radius: $thumbnail-border-radius;
   transition: all .2s ease-in-out;
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));
@@ -26,3 +32,22 @@
 .img-circle {
   border-radius: 50%;
 }
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: ($spacer-y / 2);
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: $gray-light;
+}
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 3b4ef632c..da003d5a3 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -19,6 +19,10 @@
     // proper border colors.
     position: relative;
     z-index: 2;
+    // Bring the "active" form control to the front
+    @include hover-focus-active {
+      z-index: 3;
+    }
     @if $enable-flex {
       flex: 1;
     } @else {
@@ -87,7 +91,7 @@
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
-  border: 1px solid $input-group-addon-border-color;
+  border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($border-radius);
 
   // Sizing
@@ -156,26 +160,30 @@
   > .btn {
     position: relative;
     + .btn {
-      margin-left: -1px;
+      margin-left: (-$btn-border-width);
     }
     // Bring the "active" button to the front
     @include hover-focus-active {
-      z-index: 2;
+      z-index: 3;
     }
   }
 
-  // Negative margin to only have a 1px border between the two
+  // Negative margin to only have a single, shared border between the two
   &:first-child {
     > .btn,
     > .btn-group {
-      margin-right: -1px;
+      margin-right: (-$btn-border-width);
     }
   }
   &:last-child {
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: -1px;
+      margin-left: (-$btn-border-width);
+      // Because specificity
+      @include hover-focus-active {
+        z-index: 3;
+      }
     }
   }
 }
diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index 97806afed..b12d465d9 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -3,18 +3,16 @@
   margin-bottom: $jumbotron-padding;
   background-color: $jumbotron-bg;
   @include border-radius($border-radius-lg);
+
+  @include media-breakpoint-up(sm) {
+    padding: ($jumbotron-padding * 2) $jumbotron-padding;
+  }
 }
 
 .jumbotron-hr {
   border-top-color: darken($jumbotron-bg, 10%);
 }
 
-@include media-breakpoint-up(sm) {
-  .jumbotron {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;
diff --git a/scss/_labels.scss b/scss/_labels.scss
index 400b8b2a6..c58ddde17 100644
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@@ -7,7 +7,7 @@
   display: inline-block;
   padding: .25em .4em;
   font-size: 75%;
-  font-weight: bold;
+  font-weight: $label-font-weight;
   line-height: 1;
   color: $label-color;
   text-align: center;
@@ -43,10 +43,11 @@ a.label {
 .label-pill {
   padding-right: .6em;
   padding-left: .6em;
-  border-radius: 1rem;
+  // Use a higher than normal value to ensure completely rounded edges when
+  // customizing padding or font-size on labels.
+  @include border-radius(10rem);
 }
 
-
 // Colors
 //
 // Contextual variations (linked labels get darker on :hover).
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index cff9d17b7..5115e56fa 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: -$border-width;
+  margin-bottom: -$list-group-border-width;
   background-color: $list-group-bg;
-  border: $border-width solid $list-group-border;
+  border: $list-group-border-width solid $list-group-border-color;
 
   // Round the first and last items
   &:first-child {
@@ -34,9 +34,21 @@
 
 .list-group-flush {
   .list-group-item {
-    border-width: $border-width 0;
+    border-width: $list-group-border-width 0;
     border-radius: 0;
   }
+
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
+  }
 }
 
 
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 90a48cf89..9378ff785 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,12 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-@mixin border-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-radius: $radius;
-  }
-}
-
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     box-shadow: $shadow;
@@ -39,6 +33,7 @@
 @import "mixins/alert";
 @import "mixins/buttons";
 @import "mixins/pagination";
+@import "mixins/lists";
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 551f3c9cd..f7b83c68d 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -32,6 +32,11 @@
 // Nav inline
 
 .nav-inline {
+  .nav-item {
+    display: inline-block;
+  }
+
+  .nav-item + .nav-item,
   .nav-link + .nav-link {
     margin-left: 1rem;
   }
@@ -59,7 +64,7 @@
   .nav-link {
     display: block;
     padding: $nav-link-padding;
-    border: 1px solid transparent;
+    border: $nav-tabs-link-border-width solid transparent;
     @include border-radius($border-radius $border-radius 0 0);
 
     @include hover-focus {
@@ -91,6 +96,8 @@
 //
 
 .nav-pills {
+  @include clearfix();
+
   .nav-item {
     float: left;
 
diff --git a/scss/_pager.scss b/scss/_pager.scss
index 06036c206..933036061 100644
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@@ -14,7 +14,7 @@
       display: inline-block;
       padding: 5px 14px;
       background-color: $pager-bg;
-      border: 1px solid $pager-border;
+      border: $pager-border-width solid $pager-border-color;
       border-radius: $pager-border-radius;
     }
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index a52b9d1e2..282cd4886 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -18,7 +18,7 @@
       color: $pagination-color;
       text-decoration: none;
       background-color: $pagination-bg;
-      border: 1px solid $pagination-border;
+      border: $pagination-border-width solid $pagination-border-color;
     }
     &:first-child {
       > a,
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 674a8f31f..39f5542ed 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -12,7 +12,7 @@
   font-size: $font-size-sm;
   background-color: $popover-bg;
   background-clip: padding-box;
-  border: 1px solid $popover-border-color;
+  border: $popover-border-width solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
 
@@ -107,7 +107,7 @@
   margin: 0; // reset heading margin
   font-size: $font-size-base;
   background-color: $popover-title-bg;
-  border-bottom: 1px solid darken($popover-title-bg, 5%);
+  border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
   @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
 }
 
diff --git a/scss/_print.scss b/scss/_print.scss
index e9cc65e32..e2929bb48 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -24,7 +24,7 @@
 
   pre,
   blockquote {
-    border: 1px solid #999;
+    border: $border-width solid #999;
     page-break-inside: avoid;
   }
 
@@ -66,7 +66,7 @@
     }
   }
   .label {
-    border: 1px solid #000;
+    border: $border-width solid #000;
   }
 
   .table {
diff --git a/scss/_progress.scss b/scss/_progress.scss
index a93a63426..61e13b052 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -111,6 +111,7 @@
   @include gradient-striped();
   background-size: $spacer-y $spacer-y;
 }
+// IE9
 @media screen and (min-width:0\0) {
   .progress-bar-striped {
     @include gradient-striped();
@@ -129,6 +130,7 @@
 .progress-animated[value]::-moz-progress-bar {
   animation: progress-bar-stripes 2s linear infinite;
 }
+// IE9
 @media screen and (min-width:0\0) {
   .progress-animated .progress-bar-striped {
     animation: progress-bar-stripes 2s linear infinite;
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index a4dc0398c..c4caaa4c3 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -41,10 +41,11 @@ html {
 // and apply some conditional CSS.
 //
 // See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
-
-
+//
 // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
 // `.class-name { @import "bootstrap"; }`).
+//
+// Includes future-proofed vendor prefixes as well.
 @at-root {
   @-moz-viewport      { width: device-width; }
   @-ms-viewport       { width: device-width; }
@@ -53,6 +54,7 @@ html {
   @viewport           { width: device-width; }
 }
 
+
 //
 // Reset HTML, body, and more
 //
@@ -127,7 +129,7 @@ ul ol {
 }
 
 dt {
-  font-weight: bold;
+  font-weight: $dt-font-weight;
 }
 
 dd {
@@ -191,6 +193,8 @@ img {
   // By default, `<img>`s are `inline-block`. This assumes that, and vertically
   // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
+  // Note: `<img>`s are deliberately not made responsive by default.
+  // For the rationale behind this, see the comments on the `.img-fluid` class.
 }
 
 
@@ -199,13 +203,34 @@ img {
 // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
 // for traditionally non-focusable elements with role="button"
 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
 
 [role="button"] {
   cursor: pointer;
 }
 
 
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
 //
 // Tables
 //
@@ -234,7 +259,7 @@ th {
 //
 
 label {
-  // Allow labels can use `margin` for spacing.
+  // Allow labels to use `margin` for spacing.
   display: inline-block;
   margin-bottom: .5rem;
 }
@@ -249,6 +274,8 @@ textarea {
   // properly inherited. However, `line-height` isn't addressed there. Using this
   // ensures we don't need to unnecessarily redeclare the global font stack.
   line-height: inherit;
+  // iOS adds rounded borders by default
+  border-radius: 0;
 }
 
 textarea {
@@ -295,3 +322,8 @@ output {
 //  line-height: $line-height;
 //  color: $input-color;
 }
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
+}
diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index ac4dc743a..244321959 100644
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -22,17 +22,18 @@
   }
 }
 
-// Modifier class for 21:9 aspect ratio
 .embed-responsive-21by9 {
   padding-bottom: percentage(9 / 21);
 }
 
-// Modifier class for 16:9 aspect ratio
 .embed-responsive-16by9 {
   padding-bottom: percentage(9 / 16);
 }
 
-// Modifier class for 4:3 aspect ratio
 .embed-responsive-4by3 {
   padding-bottom: percentage(3 / 4);
 }
+
+.embed-responsive-1by1 {
+  padding-bottom: percentage(1 / 1);
+}
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 5f0698fb9..8ec35b9d4 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -12,16 +12,16 @@
     padding: $table-cell-padding;
     line-height: $line-height;
     vertical-align: top;
-    border-top: 1px solid $table-border-color;
+    border-top: $table-border-width solid $table-border-color;
   }
 
   thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid $table-border-color;
+    border-bottom: (2 * $table-border-width) solid $table-border-color;
   }
 
   tbody + tbody {
-    border-top: 2px solid $table-border-color;
+    border-top: (2 * $table-border-width) solid $table-border-color;
   }
 
   .table {
@@ -47,17 +47,17 @@
 // Add borders all around the table and between all the columns.
 
 .table-bordered {
-  border: 1px solid $table-border-color;
+  border: $table-border-width solid $table-border-color;
 
   th,
   td {
-    border: 1px solid $table-border-color;
+    border: $table-border-width solid $table-border-color;
   }
 
   thead {
     th,
     td {
-      border-bottom-width: 2px;
+      border-bottom-width: (2 * $table-border-width);
     }
   }
 }
@@ -109,13 +109,13 @@
 .table-responsive {
   display: block;
   width: 100%;
+  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
   overflow-x: auto;
 
-  // Todo: find out if we need this still.
+  // TODO: find out if we need this still.
   //
-  // border: 1px solid $table-border-color;
-  // -ms-overflow-style: -ms-autohiding-scrollbar;
-  // min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+  // border: $table-border-width solid $table-border-color;
+  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 }
 
 
@@ -160,11 +160,11 @@
 
   th,
   td {
-    border-top: 1px solid $table-border-color;
-    border-left: 1px solid $table-border-color;
+    border-top: $table-border-width solid $table-border-color;
+    border-left: $table-border-width solid $table-border-color;
 
     &:last-child {
-      border-right: 1px solid $table-border-color;
+      border-right: $table-border-width solid $table-border-color;
     }
   }
 
@@ -175,7 +175,7 @@
       tr:last-child {
         th,
         td {
-          border-bottom: 1px solid $table-border-color;
+          border-bottom: $table-border-width solid $table-border-color;
         }
       }
     }
@@ -187,7 +187,7 @@
     th,
     td {
       display: block !important;
-      border: 1px solid $table-border-color;
+      border: $table-border-width solid $table-border-color;
     }
   }
 }
diff --git a/scss/_type.scss b/scss/_type.scss
index 597886db3..6759677aa 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -4,29 +4,29 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: $headings-margin-bottom;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
   color: $headings-color;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3 {
-  margin-bottom: $headings-margin-bottom;
-}
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-  margin-bottom: $headings-margin-bottom;
-}
+h1 { font-size: $font-size-h1; }
+h2 { font-size: $font-size-h2; }
+h3 { font-size: $font-size-h3; }
+h4 { font-size: $font-size-h4; }
+h5 { font-size: $font-size-h5; }
+h6 { font-size: $font-size-h6; }
 
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
+// These declarations are kept separate from and placed after
+// the previous tag-based declarations so that the classes beat the tags in
+// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
+.h1 { font-size: $font-size-h1; }
+.h2 { font-size: $font-size-h2; }
+.h3 { font-size: $font-size-h3; }
+.h4 { font-size: $font-size-h4; }
+.h5 { font-size: $font-size-h5; }
+.h6 { font-size: $font-size-h6; }
 
 .lead {
   font-size: $lead-font-size;
@@ -85,22 +85,19 @@ mark,
 // Lists
 //
 
-// Unstyled keeps list items block level, just removes default browser padding and list-style
 .list-unstyled {
-  padding-left: 0;
-  list-style: none;
+  @include list-unstyled;
 }
 
 // Inline turns list items into inline-block
 .list-inline {
-  padding-left: 0;
-  margin-left: -5px;
-  list-style: none;
+  @include list-unstyled;
+  margin-left: -$list-inline-padding;
 
   > li {
     display: inline-block;
-    padding-right: 5px;
-    padding-left: 5px;
+    padding-right: $list-inline-padding;
+    padding-left: $list-inline-padding;
   }
 }
 
@@ -165,23 +162,3 @@ mark,
     }
   }
 }
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-
-  > img {
-    @extend .img-fluid;
-    margin-bottom: ($spacer-y / 2);
-    line-height: 1;
-  }
-}
-
-.figure-caption {
-  font-size: 90%;
-  color: $gray-light;
-}
diff --git a/scss/_utilities-background.scss b/scss/_utilities-background.scss
new file mode 100644
index 000000000..4bbf7318d
--- /dev/null
+++ b/scss/_utilities-background.scss
@@ -0,0 +1,24 @@
+//
+// Contextual backgrounds
+//
+
+// Inverse
+// TODO: redo this as a proper class
+.bg-inverse {
+  color: $gray-lighter;
+  background-color: $gray-dark;
+}
+
+.bg-faded {
+  background-color: $gray-lightest;
+}
+
+@include bg-variant('.bg-primary', $brand-primary);
+
+@include bg-variant('.bg-success', $brand-success);
+
+@include bg-variant('.bg-info', $brand-info);
+
+@include bg-variant('.bg-warning', $brand-warning);
+
+@include bg-variant('.bg-danger', $brand-danger);
diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index 2c3617ce0..0470dc5bf 100644
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@@ -1,5 +1,5 @@
 //
-// Mixins
+// Responsive utilities
 //
 
 @each $bp in map-keys($grid-breakpoints) {
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 12e29626e..520666ec1 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -10,12 +10,18 @@
   @include center-block();
 }
 
-.pull-right {
-  @include pull-right();
-}
-
-.pull-left {
-  @include pull-left();
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .pull-#{$breakpoint}-left {
+      @include pull-left();
+    }
+    .pull-#{$breakpoint}-right {
+      @include pull-right();
+    }
+    .pull-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
 }
 
 
@@ -31,13 +37,8 @@
   @include sr-only-focusable();
 }
 
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-[hidden] {
-  display: none !important;
-}
-
 .invisible {
-  visibility: hidden;
+  visibility: hidden !important;
 }
 
 .text-hide {
@@ -51,48 +52,31 @@
 
 // Alignment
 
-.text-left           { text-align: left; }
-.text-right          { text-align: right; }
-.text-center         { text-align: center; }
-.text-justify        { text-align: justify; }
-.text-nowrap         { white-space: nowrap; }
+.text-justify        { text-align: justify !important; }
+.text-nowrap         { white-space: nowrap !important; }
 .text-truncate       { @include text-truncate; }
 
 // Responsive alignment
 
-.text-xs-left   { text-align: left; }
-.text-xs-right  { text-align: right; }
-.text-xs-center { text-align: center; }
-
-@include media-breakpoint-up(sm) {
-  .text-sm-left   { text-align: left; }
-  .text-sm-right  { text-align: right; }
-  .text-sm-center { text-align: center; }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .text-#{$breakpoint}-left   { text-align: left !important; }
+    .text-#{$breakpoint}-right  { text-align: right !important; }
+    .text-#{$breakpoint}-center { text-align: center !important; }
+  }
 }
 
-@include media-breakpoint-up(md) {
-  .text-md-left   { text-align: left; }
-  .text-md-right  { text-align: right; }
-  .text-md-center { text-align: center; }
-}
+// Transformation
 
-@include media-breakpoint-up(lg) {
-  .text-lg-left   { text-align: left; }
-  .text-lg-right  { text-align: right; }
-  .text-lg-center { text-align: center; }
-}
+.text-lowercase      { text-transform: lowercase !important; }
+.text-uppercase      { text-transform: uppercase !important; }
+.text-capitalize     { text-transform: capitalize !important; }
 
-@include media-breakpoint-up(xl) {
-  .text-xl-left   { text-align: left; }
-  .text-xl-right  { text-align: right; }
-  .text-xl-center { text-align: center; }
-}
-
-// Transformation
+// Weight and italics
 
-.text-lowercase      { text-transform: lowercase; }
-.text-uppercase      { text-transform: uppercase; }
-.text-capitalize     { text-transform: capitalize; }
+.font-weight-normal  { font-weight: normal; }
+.font-weight-bold    { font-weight: bold; }
+.font-italic         { font-style: italic; }
 
 // Contextual colors
 
@@ -109,29 +93,3 @@
 @include text-emphasis-variant('.text-warning', $brand-warning);
 
 @include text-emphasis-variant('.text-danger', $brand-danger);
-
-
-// Contextual backgrounds
-// For now we'll leave these alongside the text classes until v4 when we can
-// safely shift things around (per SemVer rules).
-
-// Inverse
-// Todo: redo this as a proper class
-.bg-inverse {
-  color: $gray-lighter;
-  background-color: $gray-dark;
-}
-
-.bg-faded {
-  background-color: $gray-lightest;
-}
-
-@include bg-variant('.bg-primary', $brand-primary);
-
-@include bg-variant('.bg-success', $brand-success);
-
-@include bg-variant('.bg-info', $brand-info);
-
-@include bg-variant('.bg-warning', $brand-warning);
-
-@include bg-variant('.bg-danger', $brand-danger);
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 7308f83b7..28d59095e 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -8,41 +8,46 @@
 // Variables
 //
 
-// Grid system
+
+// Grid breakpoints
 //
-// Define your custom responsive grid.
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 34em,
+  sm: 544px,
   // Medium screen / tablet
-  md: 48em,
+  md: 768px,
   // Large screen / desktop
-  lg: 62em,
+  lg: 992px,
   // Extra large screen / wide desktop
-  xl: 75em
+  xl: 1200px
 ) !default;
 
-// Number of columns in the grid.
-$grid-columns:               12 !default;
-
-// Padding between columns. Gets divided in half for the left and right.
-$grid-gutter-width:          1.5rem !default;
-
 
-// Container sizes
+// Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 34rem,    // 480
-  md: 45rem,    // 720
-  lg: 60rem,    // 960
-  xl: 72.25rem  // 1140
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
 ) !default;
 
 
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:               12 !default;
+$grid-gutter-width:          1.875rem !default; // 30px
+
+
 //
 // Grid mixins
 //
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 203109faf..e9300f54d 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -4,11 +4,11 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
- // Core variables and mixins
+// Core variables and mixins
 @import "variables";
 @import "mixins";
 
-// // Reset and dependencies
+// Reset and dependencies
 @import "normalize";
 @import "print";
 
@@ -22,7 +22,7 @@
 @import "forms";
 @import "buttons";
 
-// // Components
+// Components
 @import "animation";
 @import "dropdown";
 @import "button-group";
@@ -51,5 +51,6 @@
 
 // Utility classes
 @import "utilities";
+@import "utilities-background";
 @import "utilities-spacing";
 @import "utilities-responsive";
diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index a665f2551..0c9f2f084 100644
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -1,10 +1,9 @@
 // Contextual backgrounds
 
-// [converter] $parent hack
 @mixin bg-variant($parent, $color) {
   #{$parent} {
-    color: #fff;
-    background-color: $color;
+    color: #fff !important;
+    background-color: $color !important;
   }
   a#{$parent} {
     @include hover-focus {
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index b1dfbbab6..54f29f41d 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,5 +1,11 @@
 // Single side border-radius
 
+@mixin border-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-radius: $radius;
+  }
+}
+
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
     border-top-right-radius: $radius;
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 790bb7343..a868833b4 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 34rem, md: 45rem)
+//    (xs: 0, sm: 544px, md: 768px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,7 +10,7 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
+//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
 //    md
@@ -21,8 +21,8 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
-//    34rem
+//    >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
+//    544px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,11 +31,11 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
-//    44.9rem
+//    >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
+//    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
@@ -74,3 +74,13 @@
     }
   }
 }
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 8a59e04f6..eab8063e0 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -5,7 +5,7 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .help-block,
+  .text-help,
   .form-control-label,
   .radio,
   .checkbox,
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 87b4ac94a..94b829583 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,11 +3,13 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-container($gutter: $grid-gutter-width) {
-  margin-right: auto;
   margin-left: auto;
+  margin-right: auto;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
-  @include clearfix();
+  @if not $enable-flex {
+    @include clearfix();
+  }
 }
 
 
@@ -33,9 +35,7 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  @if $enable-flex {
-    // Do nothing
-  } @else {
+  @if not $enable-flex {
     float: left;
   }
   min-height: 1px;
diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss
index db590e3c5..91d2f59ee 100644
--- a/scss/mixins/_image.scss
+++ b/scss/mixins/_image.scss
@@ -21,12 +21,13 @@
 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
   background-image: url($file-1x);
 
+  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+  // but doesn't convert dppx=>dpi.
+  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+  // Compatibility info: http://caniuse.com/#feat=css-media-resolution
   @media
-  only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (     -o-min-device-pixel-ratio: 2/1),
-  only screen and (        min-device-pixel-ratio: 2),
-  only screen and (                min-resolution: 192dpi),
-  only screen and (                min-resolution: 2dppx) {
+  only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+  only screen and (min-resolution: 2dppx) { // Standardized
     background-image: url($file-2x);
     background-size: $width-1x $height-1x;
   }
diff --git a/scss/mixins/_lists.scss b/scss/mixins/_lists.scss
new file mode 100644
index 000000000..251856266
--- /dev/null
+++ b/scss/mixins/_lists.scss
@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
index 802e179a4..e174141dc 100644
--- a/scss/mixins/_progress.scss
+++ b/scss/mixins/_progress.scss
@@ -9,6 +9,7 @@
     background-color: $color;
   }
 
+  // IE9
   @media screen and (min-width:0\0) {
     .progress-bar {
       background-color: $color;
diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
index 0a6428ea7..27a4f454e 100644
--- a/scss/mixins/_text-emphasis.scss
+++ b/scss/mixins/_text-emphasis.scss
@@ -2,7 +2,7 @@
 
 @mixin text-emphasis-variant($parent, $color) {
   #{$parent} {
-    color: $color;
+    color: $color !important;
   }
   a#{$parent} {
     @include hover-focus {