Merge branch 'v4-dev' into v4-docs-streamlined

70 files changed, 1751 insertions, 1665 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 65c365ddb..2a6914a07 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -3,6 +3,9 @@ scss_files:
   - "**/*.scss"
   - "docs/assets/scss/**/*.scss"
 
+exclude:
+  - "scss/_normalize.scss"
+
 plugin_directories: ['.scss-linters']
 
 # List of gem names to load custom linters from (make sure they are already
@@ -152,10 +155,13 @@ linters:
       - flex-align
       - flex-basis
       - flex-direction
+      - flex-wrap
       - flex-flow
       - flex-grow
       - flex-order
       - flex-pack
+      - align-items
+      - justify-content
       - float
       - width
       - min-width
@@ -228,6 +234,7 @@ linters:
       - word-spacing
       - -ms-word-wrap
       - word-wrap
+      - overflow-wrap
       - -moz-tab-size
       - -o-tab-size
       - tab-size
@@ -487,7 +494,7 @@ linters:
   SpaceBeforeBrace:
     enabled: true
     style: space # or 'new_line'
-    allow_single_line_padding: false
+    allow_single_line_padding: true
 
   SpaceBetweenParens:
     enabled: true
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 433177101..d9b4e9b27 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -3,8 +3,8 @@
 //
 
 .alert {
-  padding: $alert-padding;
-  margin-bottom: $spacer-y;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
   border: $alert-border-width solid transparent;
   @include border-radius($alert-border-radius);
 }
@@ -26,13 +26,12 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding * 2);
-
   // Adjust close link position
   .close {
     position: relative;
-    top: -.125rem;
-    right: -$alert-padding;
+    top: -$alert-padding-y;
+    right: -$alert-padding-x;
+    padding: $alert-padding-y $alert-padding-x;
     color: inherit;
   }
 }
diff --git a/scss/_animation.scss b/scss/_animation.scss
deleted file mode 100644
index edd7147e5..000000000
--- a/scss/_animation.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.fade {
-  opacity: 0;
-  transition: opacity .15s linear;
-
-  &.in {
-    opacity: 1;
-  }
-}
-
-.collapse {
-  display: none;
-
-  &.in {
-    display: block;
-  }
-  // tr&.in    { display: table-row; }
-  // tbody&.in { display: table-row-group; }
-}
-
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition-timing-function: ease;
-  transition-duration: .35s;
-  transition-property: height;
-}
diff --git a/scss/_badge.scss b/scss/_badge.scss
new file mode 100644
index 000000000..e5a329893
--- /dev/null
+++ b/scss/_badge.scss
@@ -0,0 +1,77 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  color: $badge-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius();
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// scss-lint:disable QualifyingElement
+// Add hover effects, but only for links
+a.badge {
+  @include hover-focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+// scss-lint:enable QualifyingElement
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+.badge-default {
+  @include badge-variant($badge-default-bg);
+}
+
+.badge-primary {
+  @include badge-variant($badge-primary-bg);
+}
+
+.badge-success {
+  @include badge-variant($badge-success-bg);
+}
+
+.badge-info {
+  @include badge-variant($badge-info-bg);
+}
+
+.badge-warning {
+  @include badge-variant($badge-warning-bg);
+}
+
+.badge-danger {
+  @include badge-variant($badge-danger-bg);
+}
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 60e9f7a74..1d921a74a 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -4,27 +4,26 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  display: inline-block;
+  display: flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
-    float: left;
+    flex: 0 1 auto;
 
-    // Bring the "active" button to the front
+    // Bring the hover, focused, and "active" buttons to the fron to overlay
+    // the borders properly
+    @include hover {
+      z-index: 2;
+    }
     &:focus,
     &:active,
     &.active {
       z-index: 2;
     }
-    @include hover {
-      z-index: 2;
-    }
   }
-}
 
-// Prevent double borders when buttons are next to each other
-.btn-group {
+  // Prevent double borders when buttons are next to each other
   .btn + .btn,
   .btn + .btn-group,
   .btn-group + .btn,
@@ -35,18 +34,11 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -$btn-toolbar-margin; // Offset the first child's margin
-  @include clearfix();
+  display: flex;
+  justify-content: flex-start;
 
-  .btn-group,
   .input-group {
-    float: left;
-  }
-
-  > .btn,
-  > .btn-group,
-  > .input-group {
-    margin-left: $btn-toolbar-margin;
+    width: auto;
   }
 }
 
@@ -157,22 +149,14 @@
 //
 
 .btn-group-vertical {
-  > .btn,
-  > .btn-group,
-  > .btn-group > .btn {
-    display: block;
-    float: none;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  // Clear floats so dropdown menus can be properly placed
-  > .btn-group {
-    @include clearfix();
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 
-    > .btn {
-      float: none;
-    }
+  .btn,
+  .btn-group {
+    width: 100%;
   }
 
   > .btn + .btn,
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 119cf1c05..e36ff0f1f 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -11,41 +11,34 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: pointer;
   user-select: none;
   border: $input-btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
-  @include transition(all .2s ease-in-out);
-
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      @include tab-focus();
-    }
-  }
+  @include transition($btn-transition);
 
+  // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
+  &:focus,
   &.focus {
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    background-image: none;
     outline: 0;
-    @include box-shadow($btn-active-box-shadow);
+    box-shadow: $btn-focus-box-shadow;
   }
 
+  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
+
+  &:active,
+  &.active {
+    background-image: none;
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
@@ -105,7 +98,7 @@ fieldset[disabled] a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $link-color;
   border-radius: 0;
 
@@ -130,8 +123,9 @@ fieldset[disabled] a.btn {
     background-color: transparent;
   }
   &:disabled {
+    color: $btn-link-disabled-color;
+
     @include hover-focus {
-      color: $btn-link-disabled-color;
       text-decoration: none;
     }
   }
diff --git a/scss/_card.scss b/scss/_card.scss
index 6fa77e61e..9fe70e8cf 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -4,16 +4,17 @@
 
 .card {
   position: relative;
-  display: block;
-  margin-bottom: $card-spacer-y;
+  display: flex;
+  flex-direction: column;
   background-color: $card-bg;
-  // border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
   border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
 }
 
 .card-block {
-  @include clearfix;
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
   padding: $card-spacer-x;
 }
 
@@ -30,14 +31,6 @@
   margin-bottom: 0;
 }
 
-// .card-actions {
-//   padding: $card-spacer-y $card-spacer-x;
-
-//   .card-link + .card-link {
-//     margin-left: $card-spacer-x;
-//   }
-// }
-
 .card-link {
   @include hover {
     text-decoration: none;
@@ -68,8 +61,8 @@
 //
 
 .card-header {
-  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
   background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
 
@@ -79,7 +72,6 @@
 }
 
 .card-footer {
-  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
@@ -168,7 +160,7 @@
 // Card image
 .card-img {
   // margin: -1.325rem;
-  @include border-radius(.25rem);
+  @include border-radius($card-border-radius-inner);
 }
 .card-img-overlay {
   position: absolute;
@@ -190,77 +182,39 @@
 }
 
 
-// Card set
-//
-// Heads up! We do some funky style resetting here for margins across our two
-// variations (one flex, one table). Individual cards have margin-bottom by
-// default, but they're ignored due to table styles. For a consistent design,
-// we've done the same to the flex variation.
-//
-// Those changes are noted by `// Margin balancing`.
+// Card deck
 
-@if $enable-flex {
-  @include media-breakpoint-up(sm) {
-    .card-deck {
+@include media-breakpoint-up(sm) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+
+    .card {
       display: flex;
-      flex-flow: row wrap;
-      margin-right: -$card-deck-margin;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      margin-left: -$card-deck-margin;
-
-      .card {
-        flex: 1 0 0;
-        margin-right: $card-deck-margin;
-        margin-bottom: 0; // Margin balancing
-        margin-left: $card-deck-margin;
-      }
-    }
-  }
-} @else {
-  @include media-breakpoint-up(sm) {
-    $space-between-cards: (2 * $card-deck-margin);
-    .card-deck {
-      display: table;
-      width: 100%;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      table-layout: fixed;
-      border-spacing: $space-between-cards 0;
-
-      .card {
-        display: table-cell;
-        margin-bottom: 0; // Margin balancing
-        vertical-align: top;
-      }
-    }
-    .card-deck-wrapper {
-      margin-right: (-$space-between-cards);
-      margin-left: (-$space-between-cards);
+      flex: 1 0 0;
+      flex-direction: column;
+
+      // Selectively apply horizontal margins to cards to avoid doing the
+      // negative margin dance like our grid. This differs from the grid
+      // due to the use of margins as gutters instead of padding.
+      &:not(:first-child) { margin-left: $card-deck-margin; }
+      &:not(:last-child) { margin-right: $card-deck-margin; }
     }
   }
 }
 
+
 //
 // Card groups
 //
 
 @include media-breakpoint-up(sm) {
   .card-group {
-    @if $enable-flex {
-      display: flex;
-      flex-flow: row wrap;
-    } @else {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
+    display: flex;
+    flex-flow: row wrap;
 
     .card {
-      @if $enable-flex {
-        flex: 1 0 0;
-      } @else {
-        display: table-cell;
-        vertical-align: top;
-      }
+      flex: 1 0 0;
 
       + .card {
         margin-left: 0;
@@ -305,16 +259,18 @@
 
 
 //
-// Card
+// Columns
 //
 
 @include media-breakpoint-up(sm) {
   .card-columns {
-    column-count: 3;
-    column-gap: $card-columns-sm-up-column-gap;
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
 
     .card {
-      width: 100%; // Don't let them exceed the column width
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+      margin-bottom: $card-columns-margin;
     }
   }
 }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 9386983d1..df1e300b5 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -7,77 +7,47 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+}
 
-  > .carousel-item {
-    position: relative;
-    display: none;
-    transition: .6s ease-in-out left;
-
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @extend .img-fluid;
-      line-height: 1;
-    }
+.carousel-item {
+  position: relative;
+  display: none;
+  width: 100%;
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      transition: transform .6s ease-in-out;
-      backface-visibility: hidden;
-      perspective: 1000px;
-
-      &.next,
-      &.active.right {
-        left: 0;
-        transform: translate3d(100%, 0, 0);
-      }
-      &.prev,
-      &.active.left {
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        left: 0;
-        transform: translate3d(0, 0, 0);
-      }
-    }
+  @include if-supports-3d-transforms() {
+    @include transition($carousel-transition);
+    backface-visibility: hidden;
+    perspective: 1000px;
   }
+}
 
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
-  }
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: flex;
+}
 
-  > .active {
-    left: 0;
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
 
-  > .next,
-  > .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
+// CSS3 transforms when supported by the browser
+@include if-supports-3d-transforms() {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translate3d(0, 0, 0);
   }
 
-  > .next {
-    left: 100%;
-  }
-  > .prev {
-    left: -100%;
-  }
-  > .next.left,
-  > .prev.right {
-    left: 0;
+  .carousel-item-next,
+  .active.carousel-item-right {
+    transform: translate3d(100%, 0, 0);
   }
 
-  > .active.left {
-    left: -100%;
-  }
-  > .active.right {
-    left: 100%;
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    transform: translate3d(-100%, 0, 0);
   }
 }
 
@@ -86,30 +56,22 @@
 // Left/right controls for nav
 //
 
-.carousel-control {
+.carousel-control-prev,
+.carousel-control-next {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
-  font-size: $carousel-control-font-size;
   color: $carousel-control-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
   opacity: $carousel-control-opacity;
-  // We can't have this transition here because WebKit cancels the carousel
+  // We can't have a transition here because WebKit cancels the carousel
   // animation if you trip this while in the middle of another animation.
 
-  // Set gradients for backgrounds
-  &.left {
-    @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
-  }
-  &.right {
-    right: 0;
-    left: auto;
-    @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
-  }
-
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
@@ -117,39 +79,28 @@
     outline: 0;
     opacity: .9;
   }
+}
+.carousel-control-prev {
+  left: 0;
+}
+.carousel-control-next {
+  right: 0;
+}
 
-  // Toggles
-  .icon-prev,
-  .icon-next {
-    position: absolute;
-    top: 50%;
-    z-index: 5;
-    display: inline-block;
-    width: $carousel-icon-width;
-    height: $carousel-icon-width;
-    margin-top: -($carousel-icon-width / 2);
-    font-family: serif;
-    line-height: 1;
-  }
-  .icon-prev {
-    left: 50%;
-    margin-left: -($carousel-icon-width / 2);
-  }
-  .icon-next {
-    right: 50%;
-    margin-right: -($carousel-icon-width / 2);
-  }
-
-  .icon-prev {
-    &::before {
-      content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
-    }
-  }
-  .icon-next {
-    &::before {
-      content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
-    }
-  }
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
 }
 
 
@@ -160,36 +111,51 @@
 
 .carousel-indicators {
   position: absolute;
+  right: 0;
   bottom: 10px;
-  left: 50%;
+  left: 0;
   z-index: 15;
-  width: $carousel-indicators-width;
-  padding-left: 0;
-  margin-left: -($carousel-indicators-width / 2);
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ul> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
   list-style: none;
 
   li {
-    display: inline-block;
-    width: $carousel-indicator-size;
-    height: $carousel-indicator-size;
-    margin: 1px;
+    position: relative;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    // IE9 hack for event handling
-    //
-    // 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: $carousel-indicator-size;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
   }
 
   .active {
-    width: $carousel-indicator-active-size;
-    height: $carousel-indicator-active-size;
-    margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
 }
@@ -209,45 +175,4 @@
   padding-bottom: 20px;
   color: $carousel-caption-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
-
-  .btn {
-    text-shadow: none; // No shadow for button elements in carousel-caption
-  }
-}
-
-
-//
-// Responsive variations
-//
-
-@include media-breakpoint-up(sm) {
-  // Scale up the controls a smidge
-  .carousel-control {
-    .icon-prev,
-    .icon-next {
-      width: $carousel-control-sm-up-size;
-      height: $carousel-control-sm-up-size;
-      margin-top: -($carousel-control-sm-up-size / 2);
-      font-size: $carousel-control-sm-up-size;
-    }
-    .icon-prev {
-      margin-left: -($carousel-control-sm-up-size / 2);
-    }
-    .icon-next {
-      margin-right: -($carousel-control-sm-up-size / 2);
-    }
-  }
-
-  // Show and left align the captions
-  .carousel-caption {
-    right: ((100% - $carousel-caption-sm-up-width) / 2);
-    left: ((100% - $carousel-caption-sm-up-width) / 2);
-    padding-bottom: 30px;
-  }
-
-  // Move up the indicators
-  .carousel-indicators {
-    bottom: 20px;
-  }
 }
diff --git a/scss/_close.scss b/scss/_close.scss
index f98d4c1dc..5a92430a4 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -5,13 +5,13 @@
   line-height: 1;
   color: $close-color;
   text-shadow: $close-text-shadow;
-  opacity: .2;
+  opacity: .5;
 
   @include hover-focus {
     color: $close-color;
     text-decoration: none;
     cursor: pointer;
-    opacity: .5;
+    opacity: .75;
   }
 }
 
diff --git a/scss/_code.scss b/scss/_code.scss
index ea660bcdb..759da15b7 100644
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -13,6 +13,13 @@ code {
   color: $code-color;
   background-color: $code-bg;
   @include border-radius($border-radius);
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    padding: 0;
+    color: inherit;
+    background-color: inherit;
+  }
 }
 
 // User input typically entered via keyboard
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index a5f0bdfc4..8c2ce328f 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -2,7 +2,7 @@
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
-// http://useiconic.com/open
+// https://useiconic.com/open
 
 
 // Checkboxes and radios
@@ -11,13 +11,11 @@
 
 .custom-control {
   position: relative;
-  display: inline;
+  display: inline-flex;
+  min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
+  margin-right: $custom-control-spacer-x;
   cursor: pointer;
-
-  + .custom-control {
-    margin-left: $custom-control-spacer-x;
-  }
 }
 
 .custom-control-input {
@@ -61,7 +59,7 @@
 
 .custom-control-indicator {
   position: absolute;
-  top: .0625rem;
+  top: (($line-height-base - $custom-control-indicator-size) / 2);
   left: 0;
   display: block;
   width: $custom-control-indicator-size;
@@ -116,14 +114,11 @@
 // set. Use these optional classes to tweak the layout.
 
 .custom-controls-stacked {
-  .custom-control {
-    display: inline;
+  display: flex;
+  flex-direction: column;
 
-    &::after {
-      display: block;
-      margin-bottom: $custom-control-spacer-y;
-      content: "";
-    }
+  .custom-control {
+    margin-bottom: $custom-control-spacer-y;
 
     + .custom-control {
       margin-left: 0;
@@ -137,17 +132,17 @@
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
 //
-// Includes IE9-specific hacks (noted by ` \9`).
 
 .custom-select {
   display: inline-block;
   max-width: 100%;
+  $select-border-width: ($border-width * 2);
+  height: calc(#{$input-height} + #{$select-border-width});
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-  padding-right: $custom-select-padding-x \9;
+  line-height: $custom-select-line-height;
   color: $custom-select-color;
   vertical-align: middle;
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
-  background-image: none \9;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @include border-radius($custom-select-border-radius);
@@ -204,6 +199,7 @@
   display: inline-block;
   max-width: 100%;
   height: $custom-file-height;
+  margin-bottom: 0;
   cursor: pointer;
 }
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index e696d28be..46251031f 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -68,7 +68,7 @@
   width: 100%; // For `<button>`s
   padding: 3px $dropdown-item-padding-x;
   clear: both;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $dropdown-link-color;
   text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -81,37 +81,27 @@
     background-color: $dropdown-link-hover-bg;
   }
 
-  // Active state
-  &.active {
-    @include plain-hover-focus {
-      color: $dropdown-link-active-color;
-      text-decoration: none;
-      background-color: $dropdown-link-active-bg;
-      outline: 0;
-    }
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    background-color: $dropdown-link-active-bg;
   }
 
-  // Disabled state
-  //
-  // Gray out text and ensure the hover/focus state remains gray
-  &.disabled {
-    @include plain-hover-focus {
-      color: $dropdown-link-disabled-color;
-    }
-
-    // Nuke hover/focus effects
-    @include hover-focus {
-      text-decoration: none;
-      cursor: $cursor-disabled;
-      background-color: transparent;
-      background-image: none; // Remove CSS gradient
-      @include reset-filter();
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
     }
   }
 }
 
 // Open state for the dropdown
-.open {
+.show {
   // Show the menu
   > .dropdown-menu {
     display: block;
@@ -141,6 +131,7 @@
 .dropdown-header {
   display: block;
   padding: $dropdown-padding-y $dropdown-item-padding-x;
+  margin-bottom: 0; // for use with heading elements
   font-size: $font-size-sm;
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 263a8bc15..7b750f030 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -18,10 +18,18 @@
   background-image: none;
   background-clip: padding-box;
   border: $input-btn-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);
+  @if $enable-rounded {
+    // Manually use the if/else instead of the mixin to account for iOS override
+    border-radius: $input-border-radius;
+  } @else {
+    // Otherwise undo the iOS default
+    border-radius: 0;
+  }
+
   @include box-shadow($input-box-shadow);
-  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+  @include transition($input-transition);
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {
@@ -58,7 +66,8 @@
 
 select.form-control {
   &:not([size]):not([multiple]) {
-    height: $input-height;
+    $select-border-width: ($border-width * 2);
+    height: calc(#{$input-height} + #{$select-border-width});
   }
 
   &:focus::-ms-value {
@@ -86,20 +95,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: $input-padding-y-lg;
-  padding-bottom: $input-padding-y-lg;
+  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: $input-padding-y-sm;
-  padding-bottom: $input-padding-y-sm;
+  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -124,12 +133,12 @@ select.form-control {
 // horizontal form layout.
 
 .form-control-static {
-  min-height: $input-height;
-  // Size it appropriately next to real form controls
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
-  // Remove default margin from `p`
-  margin-bottom: 0;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  line-height: $input-line-height;
+  border: solid transparent;
+  border-width: $input-btn-border-width 0;
 
   &.form-control-sm,
   &.form-control-lg {
@@ -183,7 +192,7 @@ select.form-control-lg {
 
 .form-text {
   display: block;
-  margin-top: ($spacer * .25);
+  margin-top: $form-text-margin-top;
 }
 
 
@@ -194,12 +203,7 @@ select.form-control-lg {
 .form-check {
   position: relative;
   display: block;
-  margin-bottom: ($spacer * .75);
-
-  // Move up sibling radios or checkboxes for tighter spacing
-  + .form-check {
-    margin-top: -.25rem;
-  }
+  margin-bottom: $form-check-margin-bottom;
 
   &.disabled {
     .form-check-label {
@@ -210,15 +214,15 @@ select.form-control-lg {
 }
 
 .form-check-label {
-  padding-left: 1.25rem;
+  padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
   cursor: pointer;
 }
 
 .form-check-input {
   position: absolute;
-  margin-top: .25rem;
-  margin-left: -1.25rem;
+  margin-top: $form-check-input-margin-y;
+  margin-left: -$form-check-input-gutter;
 
   &:only-child {
     position: static;
@@ -227,19 +231,14 @@ select.form-control-lg {
 
 // Radios and checkboxes on same line
 .form-check-inline {
-  position: relative;
   display: inline-block;
-  padding-left: 1.25rem;
-  margin-bottom: 0; // Override default `<label>` bottom margin
-  vertical-align: middle;
-  cursor: pointer;
 
-  + .form-check-inline {
-    margin-left: .75rem;
+  .form-check-label {
+    vertical-align: middle;
   }
 
-  &.disabled {
-    cursor: $cursor-disabled;
+  + .form-check-inline {
+    margin-left: $form-check-inline-margin-x;
   }
 }
 
@@ -249,7 +248,7 @@ select.form-control-lg {
 // Apply contextual and semantic states to individual form controls.
 
 .form-control-feedback {
-  margin-top: ($spacer * .25);
+  margin-top: $form-feedback-margin-top;
 }
 
 .form-control-success,
@@ -297,14 +296,32 @@ select.form-control-lg {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
+  display: flex;
+  flex-flow: row wrap;
+
+  // Because we use flex, the initial sizing of checkboxes is collapsed and
+  // doesn't occupy the full-width (which is what we want for xs grid tier),
+  // so we force that here.
+  .form-check {
+    width: 100%;
+  }
 
   // Kick in the inline
   @include media-breakpoint-up(sm) {
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+
     // Inline-block all the things for "inline"
     .form-group {
-      display: inline-block;
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
       margin-bottom: 0;
-      vertical-align: middle;
     }
 
     // Allow folks to *not* use `.form-group`
@@ -320,19 +337,7 @@ select.form-control-lg {
     }
 
     .input-group {
-      display: inline-table;
-      vertical-align: middle;
-
-      .input-group-addon,
-      .input-group-btn,
-      .form-control {
-        width: auto;
-      }
-    }
-
-    // Input groups need that 100% width though
-    .input-group > .form-control {
-      width: 100%;
+      width: auto;
     }
 
     .form-control-label {
@@ -343,19 +348,37 @@ select.form-control-lg {
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
     .form-check {
-      display: inline-block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
       margin-top: 0;
       margin-bottom: 0;
-      vertical-align: middle;
     }
     .form-check-label {
       padding-left: 0;
     }
     .form-check-input {
       position: relative;
+      margin-top: 0;
+      margin-right: $form-check-input-margin-x;
       margin-left: 0;
     }
 
+    // Custom form controls
+    .custom-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 0;
+    }
+    .custom-control-indicator {
+      position: static;
+      display: inline-block;
+      margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
+      vertical-align: text-bottom;
+    }
+
     // Re-override the feedback icon.
     .has-feedback .form-control-feedback {
       top: 0;
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 24cf74dda..8c7a9ee31 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -28,6 +28,19 @@
   .row {
     @include make-row();
   }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
 }
 
 // Columns
diff --git a/scss/_images.scss b/scss/_images.scss
index 989426999..a8135a6c3 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -6,13 +6,9 @@
 // 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();
+  @include img-fluid;
 }
 
-// Rounded corners
-.img-rounded {
-  @include border-radius($border-radius-lg);
-}
 
 // Image thumbnails
 .img-thumbnail {
@@ -20,16 +16,11 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  transition: all .2s ease-in-out;
+  @include transition($thumbnail-transition);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
-  @include img-fluid(inline-block);
-}
-
-// Perfect circle
-.img-circle {
-  border-radius: 50%;
+  @include img-fluid;
 }
 
 //
@@ -48,5 +39,5 @@
 
 .figure-caption {
   font-size: $figure-caption-font-size;
-  color: $gray-light;
+  color: $figure-caption-color;
 }
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index b447a3282..29831ab96 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -4,45 +4,34 @@
 
 .input-group {
   position: relative;
+  display: flex;
   width: 100%;
 
-  @if $enable-flex {
-    display: flex;
-  } @else {
-    display: table;
-    // Prevent input groups from inheriting border styles from table cells when
-    // placed within a table.
-    border-collapse: separate;
-  }
-
   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;
+    flex: 1 1 auto;
+    // Add width 1% and flex-basis auto to ensure that button will not wrap out
+    // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
+    width: 1%;
+    margin-bottom: 0;
+
     // Bring the "active" form control to the front
     @include hover-focus-active {
       z-index: 3;
     }
-    @if $enable-flex {
-      flex: 1;
-    } @else {
-      // IE9 fubars the placeholder attribute in text inputs and the arrows on
-      // select elements in input groups. To fix it, we float the input. Details:
-      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-      float: left;
-      width: 100%;
-    }
-    margin-bottom: 0;
   }
 }
 
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if not $enable-flex {
-    display: table-cell;
-  }
+  // Vertically centers the content of the addons within the input group
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -51,9 +40,6 @@
 
 .input-group-addon,
 .input-group-btn {
-  @if not $enable-flex {
-    width: 1%;
-  }
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
@@ -84,7 +70,7 @@
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-color;
   text-align: center;
@@ -158,9 +144,13 @@
   // element above the siblings.
   > .btn {
     position: relative;
+    // Vertically stretch the button and center its content
+    flex: 1;
+
     + .btn {
       margin-left: (-$input-btn-border-width);
     }
+
     // Bring the "active" button to the front
     @include hover-focus-active {
       z-index: 3;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d7e2ec5c1..ec813c807 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -3,19 +3,52 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
+  display: flex;
+  flex-direction: column;
+
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
 }
 
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-link-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  .list-group-item-heading {
+    color: $list-group-link-heading-color;
+  }
+
+  // Hover state
+  @include hover-focus {
+    color: $list-group-link-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-link-active-color;
+    background-color: $list-group-link-active-bg;
+  }
+}
+
+
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
   position: relative;
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
@@ -31,69 +64,68 @@
     @include border-bottom-radius($list-group-border-radius);
   }
 
-  &.disabled {
-    @include plain-hover-focus {
-      color: $list-group-disabled-color;
-      cursor: $cursor-disabled;
-      background-color: $list-group-disabled-bg;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-disabled-text-color;
-      }
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: $list-group-disabled-bg;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: $list-group-disabled-text-color;
     }
   }
 
+  // Include both here for `<a>`s and `<button>`s
   &.active {
-    @include plain-hover-focus {
-      z-index: 2; // Place active items above their siblings for proper border styling
-      color: $list-group-active-color;
-      text-decoration: none; // Repeat here because it inherits global a:hover otherwise
-      background-color: $list-group-active-bg;
-      border-color: $list-group-active-border;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading,
-      .list-group-item-heading > small,
-      .list-group-item-heading > .small {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-active-text-color;
-      }
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
     }
-  }
-}
 
-.list-group-flush {
-  .list-group-item {
-    border-radius: 0;
+    .list-group-item-text {
+      color: $list-group-active-text-color;
+    }
   }
 }
 
 
-// Interactive list items
+// Flush list items
 //
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
 
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-link-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
+.list-group-flush {
+  .list-group-item {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
 
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
   }
 
-  // Hover state
-  @include hover-focus {
-    color: $list-group-link-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
   }
 }
 
@@ -107,17 +139,3 @@
 @include list-group-item-variant(info, $state-info-bg, $state-info-text);
 @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
 @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
-
-
-// Custom content options
-//
-// Extra classes for creating well-formatted content within `.list-group-item`s.
-
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: $list-group-item-heading-margin-bottom;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}
diff --git a/scss/_media.scss b/scss/_media.scss
index d1ebbcdeb..b573052c1 100644
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -1,81 +1,8 @@
-@if $enable-flex {
-  .media {
-    display: flex;
-  }
-  .media-body {
-    flex: 1;
-  }
-  .media-middle {
-    align-self: center;
-  }
-  .media-bottom {
-    align-self: flex-end;
-  }
-} @else {
-  .media,
-  .media-body {
-    overflow: hidden;
-  }
-  .media-body {
-    width: 10000px;
-  }
-  .media-left,
-  .media-right,
-  .media-body {
-    display: table-cell;
-    vertical-align: top;
-  }
-  .media-middle {
-    vertical-align: middle;
-  }
-  .media-bottom {
-    vertical-align: bottom;
-  }
+.media {
+  display: flex;
+  align-items: flex-start;
 }
 
-
-//
-// Images/elements as the media anchor
-//
-
-.media-object {
-  display: block;
-
-  // Fix collapse in webkit from max-width: 100% and display: table-cell.
-  &.img-thumbnail {
-    max-width: none;
-  }
-}
-
-
-//
-// Alignment
-//
-
-.media-right {
-  padding-left: $media-alignment-padding-x;
-}
-
-.media-left {
-  padding-right: $media-alignment-padding-x;
-}
-
-
-//
-// Headings
-//
-
-.media-heading {
-  margin-top: 0;
-  margin-bottom: $media-heading-margin-bottom;
-}
-
-
-//
-// Media list variation
-//
-
-.media-list {
-  padding-left: 0;
-  list-style: none;
+.media-body {
+  flex: 1;
 }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 1b5bf0fae..19bf4d41f 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -10,7 +10,11 @@
 
 @mixin transition($transition...) {
   @if $enable-transitions {
-    transition: $transition;
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
   }
 }
 
@@ -18,8 +22,7 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/tag";
-@import "mixins/reset-filter";
+@import "mixins/badge";
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/size";
@@ -28,6 +31,8 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/transforms";
+@import "mixins/visibility";
 
 // // Components
 @import "mixins/alert";
@@ -51,4 +56,4 @@
 // @import "mixins/navbar-align";
 @import "mixins/grid-framework";
 @import "mixins/grid";
-@import "mixins/pulls";
+@import "mixins/float";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 83a133531..9d2a86776 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,7 +1,7 @@
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and shit
+// .modal-content   - actual modal w/ bg and corners and stuff
 
 
 // Kill the scroll on the body
@@ -22,14 +22,16 @@
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;
-  -webkit-overflow-scrolling: touch;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    transition: transform .3s ease-out;
+    @include transition($modal-transition);
     transform: translate(0, -25%);
   }
-  &.in .modal-dialog { transform: translate(0, 0); }
+  &.show .modal-dialog { transform: translate(0, 0); }
 }
 .modal-open .modal {
   overflow-x: hidden;
@@ -46,6 +48,8 @@
 // Actual modal
 .modal-content {
   position: relative;
+  display: flex;
+  flex-direction: column;
   background-color: $modal-content-bg;
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
@@ -62,29 +66,27 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: $zindex-modal-bg;
+  z-index: $zindex-modal-backdrop;
   background-color: $modal-backdrop-bg;
 
   // Fade for backdrop
   &.fade { opacity: 0; }
-  &.in { opacity: $modal-backdrop-opacity; }
+  &.show { opacity: $modal-backdrop-opacity; }
 }
 
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: $modal-title-padding;
+  display: flex;
+  align-items: center; // vertically center it
+  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+  padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include clearfix;
-}
-// Close icon
-.modal-header .close {
-  margin-top: -2px;
 }
 
 // Title text within header
 .modal-title {
-  margin: 0;
+  margin-bottom: 0;
   line-height: $modal-title-line-height;
 }
 
@@ -92,15 +94,23 @@
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when should there be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
   padding: $modal-inner-padding;
 }
 
 // Footer (for actions)
 .modal-footer {
+  display: flex;
+  align-items: center; // vertically center
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding;
-  text-align: right; // right align buttons
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Easily place margin between footer elements
+  > :not(:first-child) { margin-left: .25rem; }
+  > :not(:last-child) { margin-right: .25rem; }
 }
 
 // Measure scrollbar width for padding body during modal show/hide
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 640956ca2..eb316bb27 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -4,13 +4,15 @@
 // `<nav>`s or `<ul>`s.
 
 .nav {
+  display: flex;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
 
 .nav-link {
-  display: inline-block;
+  display: block;
+  padding: $nav-link-padding;
 
   @include hover-focus {
     text-decoration: none;
@@ -19,26 +21,7 @@
   // Disabled state lightens text and removes hover/tab effects
   &.disabled {
     color: $nav-disabled-link-color;
-
-    @include plain-hover-focus {
-      color: $nav-disabled-link-hover-color;
-      cursor: $cursor-disabled;
-      background-color: $nav-disabled-link-hover-bg;
-    }
-  }
-}
-
-
-// Nav inline
-
-.nav-inline {
-  .nav-item {
-    display: inline-block;
-  }
-
-  .nav-item + .nav-item,
-  .nav-link + .nav-link {
-    margin-left: $nav-item-inline-spacer;
+    cursor: $cursor-disabled;
   }
 }
 
@@ -49,21 +32,12 @@
 
 .nav-tabs {
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-  @include clearfix();
 
   .nav-item {
-    float: left;
-    // Make the list-items overlay the bottom border
     margin-bottom: -$nav-tabs-border-width;
-
-    + .nav-item {
-      margin-left: $nav-item-margin;
-    }
   }
 
   .nav-link {
-    display: block;
-    padding: $nav-link-padding;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
@@ -72,21 +46,17 @@
     }
 
     &.disabled {
-      @include plain-hover-focus {
-        color: $nav-disabled-link-color;
-        background-color: transparent;
-        border-color: transparent;
-      }
+      color: $nav-disabled-link-color;
+      background-color: transparent;
+      border-color: transparent;
     }
   }
 
   .nav-link.active,
-  .nav-item.open .nav-link {
-    @include plain-hover-focus {
-      color: $nav-tabs-active-link-hover-color;
-      background-color: $nav-tabs-active-link-hover-bg;
-      border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
-    }
+  .nav-item.show .nav-link {
+    color: $nav-tabs-active-link-hover-color;
+    background-color: $nav-tabs-active-link-hover-bg;
+    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
   }
 
   .dropdown-menu {
@@ -103,50 +73,42 @@
 //
 
 .nav-pills {
-  @include clearfix();
-
-  .nav-item {
-    float: left;
-
-    + .nav-item {
-      margin-left: $nav-item-margin;
-    }
-  }
-
   .nav-link {
-    display: block;
-    padding: $nav-link-padding;
     @include border-radius($nav-pills-border-radius);
   }
 
   .nav-link.active,
-  .nav-item.open .nav-link {
-    @include plain-hover-focus {
-      color: $nav-pills-active-link-color;
-      cursor: default;
-      background-color: $nav-pills-active-link-bg;
-    }
+  .nav-item.show .nav-link {
+    color: $nav-pills-active-link-color;
+    cursor: default;
+    background-color: $nav-pills-active-link-bg;
   }
 }
 
-.nav-stacked {
+
+//
+// Justified variants
+//
+
+.nav-fill {
   .nav-item {
-    display: block;
-    float: none;
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
 
-    + .nav-item {
-      margin-top: $nav-item-margin;
-      margin-left: 0;
-    }
+.nav-justified {
+  .nav-item {
+    flex: 1 1 100%;
+    text-align: center;
   }
 }
 
 
-//
 // Tabbable tabs
 //
-
 // Hide tabbable panes to start, show them when `.active`
+
 .tab-content {
   > .tab-pane {
     display: none;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 881af0db6..4c603c1db 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,12 +5,18 @@
 
 .navbar {
   position: relative;
+  display: flex;
   padding: $navbar-padding-y $navbar-padding-x;
-  @include clearfix;
+}
 
-  @include media-breakpoint-up(sm) {
-    @include border-radius($navbar-border-radius);
-  }
+.navbar-toggler-left {
+  position: absolute;
+  left: $navbar-padding-x;
+}
+
+.navbar-toggler-right {
+  position: absolute;
+  right: $navbar-padding-x;
 }
 
 
@@ -19,15 +25,6 @@
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.
 
-// A static, full width modifier with no rounded corners.
-.navbar-full {
-  z-index: $zindex-navbar;
-
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
-}
-
 // Fix the top/bottom navbars when screen real estate supports it
 .navbar-fixed-top,
 .navbar-fixed-bottom {
@@ -35,11 +32,6 @@
   right: 0;
   left: 0;
   z-index: $zindex-navbar-fixed;
-
-  // Undo the rounded corners
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
 }
 
 .navbar-fixed-top {
@@ -54,12 +46,6 @@
   position: sticky;
   top: 0;
   z-index: $zindex-navbar-sticky;
-  width: 100%;
-
-  // Undo the rounded corners
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
 }
 
 
@@ -68,27 +54,24 @@
 //
 
 .navbar-brand {
-  float: left;
-  padding-top:    $navbar-brand-padding-y;
-  padding-bottom: $navbar-brand-padding-y;
-  margin-right: 1rem;
+  display: inline-block;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  margin-right: $navbar-padding-x;
   font-size: $font-size-lg;
+  line-height: inherit;
+  white-space: nowrap;
 
   @include hover-focus {
     text-decoration: none;
   }
-
-  > img {
-    display: block;
-  }
 }
 
-
 .navbar-divider {
   float: left;
   width: $border-width;
-  padding-top: .425rem;
-  padding-bottom: .425rem;
+  padding-top: $navbar-divider-padding-y;
+  padding-bottom: $navbar-divider-padding-y;
   margin-right: $navbar-padding-x;
   margin-left:  $navbar-padding-x;
   overflow: hidden;
@@ -99,51 +82,66 @@
 }
 
 
+// Navbar text
+//
+//
+
+.navbar-text {
+  display: inline-block;
+  padding-top:    .425rem;
+  padding-bottom: .425rem;
+}
+
+
 // Navbar toggle
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
-  padding: .5rem .75rem;
-  font-size: $font-size-lg;
+  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+  font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: none;
-  border: $border-width solid transparent;
-  @include border-radius($btn-border-radius);
+  background: transparent; // remove default button style
+  border: $border-width solid transparent; // remove default button style
+  @include border-radius($navbar-toggler-border-radius);
 
   @include hover-focus {
     text-decoration: none;
   }
 }
 
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: no-repeat center center;
+  background-size: 100% 100%;
+}
+
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
 
 .navbar-nav {
-  .nav-item {
-    float: left;
-  }
+  flex-grow: 10; // high number to force alignment
 
   .nav-link {
     display: block;
-    padding-top:    .425rem;
+    padding-top: .425rem;
     padding-bottom: .425rem;
-
-    + .nav-link {
-      margin-left: 1rem;
-    }
-  }
-
-  .nav-item + .nav-item {
-    margin-left: 1rem;
   }
 }
 
+
 // Dark links against a light background
 .navbar-light {
-  .navbar-brand {
+  .navbar-brand,
+  .navbar-toggler {
     color: $navbar-light-active-color;
 
     @include hover-focus {
@@ -158,39 +156,58 @@
       @include hover-focus {
         color: $navbar-light-hover-color;
       }
+
+      &.disabled {
+        color: $navbar-light-disabled-color;
+      }
     }
 
     .open > .nav-link,
     .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-light-active-color;
-      }
+      color: $navbar-light-active-color;
     }
   }
 
+  .navbar-toggler {
+    border-color: $navbar-light-toggler-border;
+  }
+
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(0,0,0,.075);
   }
+
+  .navbar-text {
+    color: $navbar-light-color;
+  }
 }
 
 // White links against a dark background
-.navbar-dark {
-  .navbar-brand {
-    color: $navbar-dark-active-color;
+.navbar-inverse {
+  .navbar-brand,
+  .navbar-toggler {
+    color: $navbar-inverse-active-color;
 
     @include hover-focus {
-      color: $navbar-dark-active-color;
+      color: $navbar-inverse-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-dark-color;
+      color: $navbar-inverse-color;
 
       @include hover-focus {
-        color: $navbar-dark-hover-color;
+        color: $navbar-inverse-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-inverse-disabled-color;
       }
     }
 
@@ -198,59 +215,83 @@
     .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-dark-active-color;
-      }
+      color: $navbar-inverse-active-color;
     }
   }
 
+  .navbar-toggler {
+    border-color: $navbar-inverse-toggler-border;
+  }
+
+  .navbar-toggler-icon {
+    background-image: $navbar-inverse-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(255,255,255,.075);
   }
-}
 
+  .navbar-text {
+    color: $navbar-inverse-color;
+  }
+}
 
 // Navbar toggleable
 //
 // Custom override for collapse plugin in navbar.
 
+// Placed at the end of the file so it can override some CSS properties
 .navbar-toggleable {
-  &-xs {
-    @include clearfix;
-    @include media-breakpoint-down(xs) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
-
-  &-sm {
-    @include clearfix;
-    @include media-breakpoint-down(sm) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        .navbar-nav {
+          .dropdown-menu {
+            position: static;
+            float: none;
+          }
+        }
+
+        > .container {
+          padding-right: 0;
+          padding-left: 0;
+        }
       }
-    }
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
 
-  &-md {
-    @include clearfix;
-    @include media-breakpoint-down(md) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
+      @include media-breakpoint-up($next) {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+
+        // For nesting containers, have to redeclare for alignment purposes
+        > .container {
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+        }
+
+        // scss-lint:disable ImportantRule
+        .navbar-collapse {
+          display: flex !important;
+          width: 100%;
+        }
+        // scss-lint:enable ImportantRule
+
+        .nav-item {
+          display: inline-block;
+        }
+
+        .nav-link {
+          padding-right: .5rem;
+          padding-left: .5rem;
+        }
+
+        .navbar-toggler {
+          display: none;
+        }
       }
     }
-    @include media-breakpoint-up(lg) {
-      display: block !important;
-    }
   }
 }
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
index 8a74836b0..6bafd53f6 100644
--- a/scss/_normalize.scss
+++ b/scss/_normalize.scss
@@ -1,16 +1,25 @@
-/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 
 //
 // 1. Change the default font family in all browsers (opinionated).
-// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+// 2. Correct the line height in all browsers.
+// 3. Prevent adjustments of font size after orientation changes in
+//    IE on Windows Phone and in iOS.
 //
 
+// Document
+// ==========================================================================
+
 html {
   font-family: sans-serif; // 1
-  -ms-text-size-adjust: 100%; // 2
-  -webkit-text-size-adjust: 100%; // 2
+  line-height: 1.15; // 2
+  -ms-text-size-adjust: 100%; // 3
+  -webkit-text-size-adjust: 100%; // 3
 }
 
+// Sections
+// ==========================================================================
+
 //
 // Remove the margin in all browsers (opinionated).
 //
@@ -19,77 +28,83 @@ body {
   margin: 0;
 }
 
-// HTML5 display definitions
-// ==========================================================================
-
 //
 // Add the correct display in IE 9-.
-// 1. Add the correct display in Edge, IE, and Firefox.
-// 2. Add the correct display in IE.
 //
 
 article,
 aside,
-details, // 1
-figcaption,
-figure,
 footer,
 header,
-main, // 2
-menu,
 nav,
-section,
-summary { // 1
+section {
   display: block;
 }
 
 //
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Firefox, and Safari.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
 // Add the correct display in IE 9-.
+// 1. Add the correct display in IE.
 //
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
+figcaption,
+figure,
+main { // 1
+  display: block;
 }
 
 //
-// Add the correct display in iOS 4-7.
+// Add the correct margin in IE 8.
 //
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+figure {
+  margin: 1em 40px;
 }
 
 //
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
 //
 
-progress {
-  vertical-align: baseline;
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
 }
 
 //
-// Add the correct display in IE 10-.
-// 1. Add the correct display in IE.
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
 //
 
-template, // 2
-[hidden] {
-  display: none;
+pre {
+  font-family: monospace, monospace; // 1
+  font-size: 1em; // 2
 }
 
-// Links
+// Text-level semantics
 // ==========================================================================
 
 //
-// Remove the gray background on active links in IE 10.
+// 1. Remove the gray background on active links in IE 10.
+// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 //
 
 a {
-  background-color: transparent;
+  background-color: transparent; // 1
+  -webkit-text-decoration-skip: objects; // 2
 }
 
 //
@@ -102,9 +117,6 @@ a:hover {
   outline-width: 0;
 }
 
-// Text-level semantics
-// ==========================================================================
-
 //
 // 1. Remove the bottom border in Firefox 39-.
 // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -135,21 +147,23 @@ strong {
 }
 
 //
-// Add the correct font style in Android 4.3-.
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
 //
 
-dfn {
-  font-style: italic;
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; // 1
+  font-size: 1em; // 2
 }
 
 //
-// Correct the font size and margin on `h1` elements within `section` and
-// `article` contexts in Chrome, Firefox, and Safari.
+// Add the correct font style in Android 4.3-.
 //
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+dfn {
+  font-style: italic;
 }
 
 //
@@ -194,105 +208,71 @@ sup {
 // ==========================================================================
 
 //
-// Remove the border on images inside links in IE 10-.
-//
-
-img {
-  border-style: none;
-}
-
-//
-// Hide the overflow in IE.
+// Add the correct display in IE 9-.
 //
 
-svg:not(:root) {
-  overflow: hidden;
+audio,
+video {
+  display: inline-block;
 }
 
-// Grouping content
-// ==========================================================================
-
 //
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
+// Add the correct display in iOS 4-7.
 //
 
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; // 1
-  font-size: 1em; // 2
+audio:not([controls]) {
+  display: none;
+  height: 0;
 }
 
 //
-// Add the correct margin in IE 8.
+// Remove the border on images inside links in IE 10-.
 //
 
-figure {
-  margin: 1em 40px;
+img {
+  border-style: none;
 }
 
 //
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
+// Hide the overflow in IE.
 //
 
-hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
+svg:not(:root) {
+  overflow: hidden;
 }
 
 // Forms
 // ==========================================================================
 
 //
-// Change font properties to `inherit` in all browsers (opinionated).
+// 1. Change the font styles in all browsers (opinionated).
+// 2. Remove the margin in Firefox and Safari.
 //
 
 button,
 input,
+optgroup,
 select,
 textarea {
-  font: inherit;
-}
-
-//
-// Restore the font weight unset by the previous rule.
-//
-
-optgroup {
-  font-weight: bold;
+  font-family: sans-serif; // 1
+  font-size: 100%; // 1
+  line-height: 1.15; // 1
+  margin: 0; // 2
 }
 
 //
 // Show the overflow in IE.
 // 1. Show the overflow in Edge.
-// 2. Show the overflow in Edge, Firefox, and IE.
 //
 
 button,
-input, // 1
-select { // 2
+input { // 1
   overflow: visible;
 }
 
 //
-// Remove the margin in Safari.
-// 1. Remove the margin in Firefox and Safari.
-//
-
-button,
-input,
-select,
-textarea { // 1
-  margin: 0;
-}
-
-//
-// Remove the inheritence of text transform in Edge, Firefox, and IE.
-// 1. Remove the inheritence of text transform in Firefox.
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+// 1. Remove the inheritance of text transform in Firefox.
 //
 
 button,
@@ -301,28 +281,9 @@ select { // 1
 }
 
 //
-// Change the cursor in all browsers (opinionated).
-//
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  cursor: pointer;
-}
-
-//
-// Restore the default cursor to disabled elements unset by the previous rule.
-//
-
-[disabled] {
-  cursor: default;
-}
-
-//
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 //    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS.
+// 2. Correct the inability to style clickable types in iOS and Safari.
 //
 
 button,
@@ -337,8 +298,10 @@ html [type="button"], // 1
 //
 
 button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
   padding: 0;
 }
 
@@ -347,7 +310,9 @@ input::-moz-focus-inner {
 //
 
 button:-moz-focusring,
-input:-moz-focusring {
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -378,6 +343,16 @@ legend {
 }
 
 //
+// 1. Add the correct display in IE 9-.
+// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+//
+
+progress {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
 // Remove the default vertical scrollbar in IE.
 //
 
@@ -406,19 +381,81 @@ textarea {
 }
 
 //
-// Correct the odd appearance of search inputs in Chrome and Safari.
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
 //
 
 [type="search"] {
-  -webkit-appearance: textfield;
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
 }
 
 //
-// Remove the inner padding and cancel buttons in Chrome on OS X and
-// Safari on OS X.
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 //
 
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; // 1
+  font: inherit; // 2
+}
+
+// Interactive
+// ==========================================================================
+
+//
+// Add the correct display in IE 9-.
+// 1. Add the correct display in Edge, IE, and Firefox.
+//
+
+details, // 1
+menu {
+  display: block;
+}
+
+//
+// Add the correct display in all browsers.
+//
+
+summary {
+  display: list-item;
+}
+
+// Scripting
+// ==========================================================================
+
+//
+// Add the correct display in IE 9-.
+//
+
+canvas {
+  display: inline-block;
+}
+
+//
+// Add the correct display in IE.
+//
+
+template {
+  display: none;
+}
+
+// Hidden
+// ==========================================================================
+
+//
+// Add the correct display in IE 10-.
+//
+
+[hidden] {
+  display: none;
+}
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 5f40a7fd4..24aa028d1 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -1,14 +1,12 @@
 .pagination {
-  display: inline-block;
-  padding-left: 0;
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
+  display: flex;
+  // 1-2: Disable browser default list styles
+  padding-left: 0; // 1
+  list-style: none; // 2
   @include border-radius();
 }
 
 .page-item {
-  display: inline; // Remove list-style and block-level defaults
-
   &:first-child {
     .page-link {
       margin-left: 0;
@@ -22,38 +20,34 @@
   }
 
   &.active .page-link {
-    @include plain-hover-focus {
-      z-index: 2;
-      color: $pagination-active-color;
-      cursor: default;
-      background-color: $pagination-active-bg;
-      border-color: $pagination-active-border;
-    }
+    z-index: 2;
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border;
   }
 
   &.disabled .page-link {
-    @include plain-hover-focus {
-      color: $pagination-disabled-color;
-      pointer-events: none;
-      cursor: $cursor-disabled;
-      background-color: $pagination-disabled-bg;
-      border-color: $pagination-disabled-border;
-    }
+    color: $pagination-disabled-color;
+    pointer-events: none;
+    cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback.
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border;
   }
 }
 
 .page-link {
   position: relative;
-  float: left; // Collapse white-space
+  display: block;
   padding: $pagination-padding-y $pagination-padding-x;
   margin-left: -1px;
+  line-height: $pagination-line-height;
   color: $pagination-color;
-  text-decoration: none;
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
 
   @include hover-focus {
     color: $pagination-hover-color;
+    text-decoration: none;
     background-color: $pagination-hover-bg;
     border-color: $pagination-hover-border;
   }
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 6e6fe3c9c..86b489a48 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -25,19 +25,22 @@
   &.bs-tether-element-attached-bottom {
     margin-top: -$popover-arrow-width;
 
-    .popover-arrow {
-      bottom: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
+      border-bottom-width: 0;
+    }
+
+    &::before {
+      bottom: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
-      border-bottom-width: 0;
-      &::after {
-        bottom: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-color: $popover-arrow-color;
-        border-bottom-width: 0;
-      }
+    }
+
+    &::after {
+      bottom: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-top-color: $popover-arrow-color;
     }
   }
 
@@ -45,19 +48,22 @@
   &.bs-tether-element-attached-left {
     margin-left: $popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-left-width: 0;
+    }
+
+    &::before {
       left: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
-      border-left-width: 0;
-      &::after {
-        bottom: -$popover-arrow-width;
-        left: 1px;
-        content: "";
-        border-right-color: $popover-arrow-color;
-        border-left-width: 0;
-      }
+    }
+
+    &::after {
+      left: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-right-color: $popover-arrow-color;
     }
   }
 
@@ -65,19 +71,34 @@
   &.bs-tether-element-attached-top {
     margin-top: $popover-arrow-width;
 
-    .popover-arrow {
-      top: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
-      margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
+    }
+
+    &::before {
+      top: -$popover-arrow-outer-width;
+      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
-      &::after {
-        top: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-width: 0;
-        border-bottom-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      top: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-bottom-color: $popover-title-bg;
+    }
+
+    // This will remove the popover-title's border just below the arrow
+    .popover-title::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: 20px;
+      margin-left: -10px;
+      content: "";
+      border-bottom: 1px solid $popover-title-bg;
     }
   }
 
@@ -85,19 +106,22 @@
   &.bs-tether-element-attached-right {
     margin-left: -$popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-right-width: 0;
+    }
+
+    &::before {
       right: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
-      border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &::after {
-        right: 1px;
-        bottom: -$popover-arrow-width;
-        content: "";
-        border-right-width: 0;
-        border-left-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      right: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-left-color: $popover-arrow-color;
     }
   }
 }
@@ -127,21 +151,21 @@
 //
 // .popover-arrow is outer, .popover-arrow::after is inner
 
-.popover-arrow {
-  &,
-  &::after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
+.popover::before,
+.popover::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
 }
-.popover-arrow {
+
+.popover::before {
+  content: "";
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow::after {
+.popover::after {
   content: "";
   border-width: $popover-arrow-width;
 }
diff --git a/scss/_print.scss b/scss/_print.scss
index 84556602f..e77ac1dba 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -13,8 +13,14 @@
     *,
     *::before,
     *::after,
-    *::first-letter,
-    *::first-line {
+    p::first-letter,
+    div::first-letter,
+    blockquote::first-letter,
+    li::first-letter,
+    p::first-line,
+    div::first-line,
+    blockquote::first-line,
+    li::first-line {
       // Bootstrap specific; comment out `color` and `background`
       //color: #000 !important; // Black prints faster:
                                 //   http://www.sanbeiji.com/archives/953
@@ -45,9 +51,12 @@
 
     //a[href^="#"]::after,
     //a[href^="javascript:"]::after {
-    //  content: "";
+    // content: "";
     //}
 
+    pre {
+      white-space: pre-wrap !important;
+    }
     pre,
     blockquote {
       border: $border-width solid #999;   // Bootstrap custom code; using `$border-width` instead of 1px
@@ -92,7 +101,7 @@
         border-top-color: #000 !important;
       }
     }
-    .tag {
+    .badge {
       border: $border-width solid #000;
     }
 
diff --git a/scss/_progress.scss b/scss/_progress.scss
index c2364feee..800138cdc 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -17,6 +17,7 @@
   width: 100%;
   height: $spacer-y; // todo: make a new var for this
   margin-bottom: $spacer-y;
+  overflow: hidden; // force rounded corners by cropping it
 }
 .progress[value] {
   // Set overall background
@@ -37,52 +38,22 @@
 }
 .progress[value]::-moz-progress-bar {
   background-color: $progress-bar-color;
-  @include border-left-radius($progress-border-radius);
 }
 .progress[value]::-webkit-progress-value {
   background-color: $progress-bar-color;
-  @include border-left-radius($progress-border-radius);
-}
-// Tweaks for full progress bar
-.progress[value="100"]::-moz-progress-bar {
-  @include border-right-radius($progress-border-radius);
-}
-.progress[value="100"]::-webkit-progress-value {
-  @include border-right-radius($progress-border-radius);
 }
 
 // Unfilled portion of the bar
 .progress[value]::-webkit-progress-bar {
   background-color: $progress-bg;
-  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
 .progress[value] {
   background-color: $progress-bg;
-  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 
-// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
-@media screen and (min-width:0\0) {
-  .progress {
-    background-color: $progress-bg;
-    @include border-radius($progress-border-radius);
-    @include box-shadow($progress-box-shadow);
-  }
-  .progress-bar {
-    display: inline-block;
-    height: $spacer-y;
-    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
-    background-color: $progress-bar-color;
-    @include border-left-radius($progress-border-radius);
-  }
-  .progress[width="100%"] {
-    @include border-right-radius($progress-border-radius);
-  }
-}
-
 
 //
 // Striped
@@ -100,13 +71,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
   @include gradient-striped();
   background-size: $spacer-y $spacer-y;
 }
-// IE9
-@media screen and (min-width:0\0) {
-  .progress-bar-striped {
-    @include gradient-striped();
-    background-size: $spacer-y $spacer-y;
-  }
-}
 
 
 //
@@ -119,12 +83,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
 .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 1a1e4728b..e90d7cd3b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -15,7 +15,7 @@
 //
 // Heads up! This reset may cause conflicts with some third-party widgets. For
 // recommendations on resolving such conflicts, see
-// http://getbootstrap.com/getting-started/#third-box-sizing.
+// https://getbootstrap.com/getting-started/#third-box-sizing.
 //
 // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 
@@ -33,15 +33,15 @@ html {
 // Make viewport responsive
 //
 // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
-// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
+// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
 // Eventually @viewport will replace <meta name="viewport">.
 //
 // However, `device-width` is broken on IE 10 on Windows (Phone) 8,
-// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
+// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
 // and the fix for that involves a snippet of JavaScript to sniff the user agent
 // and apply some conditional CSS.
 //
-// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
+// See https://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"; }`).
@@ -63,6 +63,7 @@ html {
   // thus making it hard to click on stuff near the right edge of the page.
   // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
   // See https://github.com/twbs/bootstrap/issues/18543
+  // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
   -ms-overflow-style: scrollbar;
   // Changes the default tap highlight to be completely transparent in iOS.
   -webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -72,6 +73,7 @@ body {
   // Make the `body` use the `font-size-root`
   font-family: $font-family-base;
   font-size: $font-size-base;
+  font-weight: $font-weight-base;
   line-height: $line-height-base;
   // Go easy on the eyes and use something other than `#000` for text
   color: $body-color;
@@ -111,12 +113,11 @@ p {
   margin-bottom: 1rem;
 }
 
-// Abbreviations and acronyms
+// Abbreviations
 abbr[title],
 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted $abbr-border-color;
 }
 
 address {
@@ -247,9 +248,9 @@ img {
 // 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
+// * https://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
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 
 a,
 area,
@@ -312,14 +313,9 @@ input,
 button,
 select,
 textarea {
-  // Remove all `margin`s so our classes don't have to do it themselves.
-  margin: 0;
   // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
-  // properly inherited. However, `line-height` isn't addressed there. Using this
-  // ensures we don't need to unnecessarily redeclare the global font stack.
+  // properly inherited. However, `line-height` isn't inherited there.
   line-height: inherit;
-  // iOS adds rounded borders by default
-  border-radius: 0;
 }
 
 input[type="radio"],
@@ -340,8 +336,8 @@ input[type="month"] {
   // Remove the default appearance of temporal inputs to avoid a Mobile Safari
   // bug where setting a custom line-height prevents text from being vertically
   // centered within the input.
-  //
-  // Bug report: https://github.com/twbs/bootstrap/issues/11266
+  // See https://bugs.webkit.org/show_bug.cgi?id=139848
+  // and https://github.com/twbs/bootstrap/issues/11266
   -webkit-appearance: listbox;
 }
 
@@ -351,9 +347,11 @@ textarea {
 }
 
 fieldset {
-  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
-  // so we reset that to ensure it behaves more like a standard block element.
-  // See https://github.com/twbs/bootstrap/issues/12359.
+  // Browsers set a default `min-width: min-content;` on fieldsets,
+  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  // So we reset that to ensure fieldsets behave more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359
+  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
   min-width: 0;
   // Reset the default outline behavior of fieldsets so they don't affect page layout.
   padding: 0;
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 235ec984e..e6894cfed 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -105,26 +105,26 @@
 
 .thead-inverse {
   th {
-    color: #fff;
-    background-color: $gray-dark;
+    color: $table-inverse-color;
+    background-color: $table-inverse-bg;
   }
 }
 
 .thead-default {
   th {
-    color: $gray;
-    background-color: $gray-lighter;
+    color: $table-head-color;
+    background-color: $table-head-bg;
   }
 }
 
 .table-inverse {
-  color: $gray-lighter;
-  background-color: $gray-dark;
+  color: $table-inverse-color;
+  background-color: $table-inverse-bg;
 
   th,
   td,
   thead th {
-    border-color: $gray;
+    border-color: $body-bg;
   }
 
   &.table-bordered {
@@ -136,20 +136,20 @@
 
 // Responsive tables
 //
-// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
+// enabling horizontal scrolling. Only applies <768px. Everything above that
 // will display normally.
 
 .table-responsive {
   display: block;
   width: 100%;
-  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
   overflow-x: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 
-  // TODO: find out if we need this still.
-  //
-  // border: $table-border-width solid $table-border-color;
-  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+  // Prevent double border on horizontal scroll due to use of `display: block;`
+  &.table-bordered {
+    border: 0;
+  }
 }
 
 
diff --git a/scss/_tags.scss b/scss/_tags.scss
deleted file mode 100644
index dee9ed95d..000000000
--- a/scss/_tags.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-// Base class
-//
-// Requires one of the contextual, color modifier classes for `color` and
-// `background-color`.
-
-.tag {
-  display: inline-block;
-  padding: $tag-padding-y $tag-padding-x;
-  font-size: $tag-font-size;
-  font-weight: $tag-font-weight;
-  line-height: 1;
-  color: $tag-color;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  @include border-radius();
-
-  // Empty tags collapse automatically
-  &:empty {
-    display: none;
-  }
-}
-
-// Quick fix for tags in buttons
-.btn .tag {
-  position: relative;
-  top: -1px;
-}
-
-// scss-lint:disable QualifyingElement
-// Add hover effects, but only for links
-a.tag {
-  @include hover-focus {
-    color: $tag-link-hover-color;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}
-// scss-lint:enable QualifyingElement
-
-// Pill tags
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.tag-pill {
-  padding-right: $tag-pill-padding-x;
-  padding-left: $tag-pill-padding-x;
-  @include border-radius($tag-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked tags get darker on :hover).
-
-.tag-default {
-  @include tag-variant($tag-default-bg);
-}
-
-.tag-primary {
-  @include tag-variant($tag-primary-bg);
-}
-
-.tag-success {
-  @include tag-variant($tag-success-bg);
-}
-
-.tag-info {
-  @include tag-variant($tag-info-bg);
-}
-
-.tag-warning {
-  @include tag-variant($tag-warning-bg);
-}
-
-.tag-danger {
-  @include tag-variant($tag-danger-bg);
-}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index e8151af07..24e198d46 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -11,17 +11,18 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.in { opacity: $tooltip-opacity; }
+  &.show { opacity: $tooltip-opacity; }
 
   &.tooltip-top,
   &.bs-tether-element-attached-bottom {
     padding: $tooltip-arrow-width 0;
     margin-top: -$tooltip-margin;
 
-    .tooltip-arrow {
+    .tooltip-inner::before {
       bottom: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
@@ -31,10 +32,11 @@
     padding: 0 $tooltip-arrow-width;
     margin-left: $tooltip-margin;
 
-    .tooltip-arrow {
+    .tooltip-inner::before {
       top: 50%;
       left: 0;
       margin-top: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
@@ -44,10 +46,11 @@
     padding: $tooltip-arrow-width 0;
     margin-top: $tooltip-margin;
 
-    .tooltip-arrow {
+    .tooltip-inner::before {
       top: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
+      content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
@@ -57,10 +60,11 @@
     padding: 0 $tooltip-arrow-width;
     margin-left: -$tooltip-margin;
 
-    .tooltip-arrow {
+    .tooltip-inner::before {
       top: 50%;
       right: 0;
       margin-top: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
@@ -75,13 +79,12 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-}
 
-// Arrows
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
+  &::before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
 }
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
new file mode 100644
index 000000000..86c04a5f8
--- /dev/null
+++ b/scss/_transitions.scss
@@ -0,0 +1,34 @@
+.fade {
+  opacity: 0;
+  @include transition($transition-fade);
+
+  &.show {
+    opacity: 1;
+  }
+}
+
+.collapse {
+  display: none;
+  &.show {
+    display: block;
+  }
+}
+
+tr {
+  &.collapse.show {
+    display: table-row;
+  }
+}
+
+tbody {
+  &.collapse.show {
+    display: table-row-group;
+  }
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  @include transition($transition-collapse);
+}
diff --git a/scss/_type.scss b/scss/_type.scss
index ff7114074..cb4a035fc 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -61,7 +61,7 @@ hr {
 small,
 .small {
   font-size: $small-font-size;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 mark,
@@ -137,14 +137,3 @@ mark,
     content: "\00A0 \2014"; // nbsp, em dash
   }
 }
-
-@if not $enable-flex {
-  // Clean up some horizontal `<dl>`s built with grids
-  // scss-lint:disable QualifyingElement
-  dl.row {
-    > dd + dt {
-      clear: left;
-    }
-  }
-  // scss-lint:enable QualifyingElement
-}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 87b8ba6da..c63e50600 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,8 +1,10 @@
+@import "utilities/align";
 @import "utilities/background";
+@import "utilities/borders";
 @import "utilities/clearfix";
 @import "utilities/display";
 @import "utilities/flex";
-@import "utilities/pulls";
+@import "utilities/float";
 @import "utilities/screenreaders";
 @import "utilities/spacing";
 @import "utilities/text";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 05c008820..948ac0354 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -16,6 +16,30 @@
 // Grid columns
 // Fonts
 // Components
+// Tables
+// Buttons
+// Forms
+// Dropdowns
+// Z-index master list
+// Navbar
+// Navs
+// Pagination
+// Jumbotron
+// Form states and alerts
+// Cards
+// Tooltips
+// Popovers
+// Badges
+// Modals
+// Alerts
+// Progress bars
+// List group
+// Image thumbnails
+// Figures
+// Breadcrumbs
+// Carousel
+// Close
+// Code
 
 @mixin _assert-ascending($map, $map-name) {
   $prev-key: null;
@@ -33,6 +57,31 @@
   }
 }
 
+// Replace `$search` with `$replace` in `$string`
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@mixin _assert-starts-at-zero($map) {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+
 // General variable structure
 //
 // Variable format should follow the `$component-modifier-state-property` order.
@@ -42,17 +91,31 @@
 //
 // Grayscale and brand colors for use across Bootstrap.
 
-$gray-dark:                 #373a3c !default;
-$gray:                      #55595c !default;
-$gray-light:                #818a91 !default;
+// Start with assigning color names to specific hex values.
+$white:  #fff !default;
+$black:  #000 !default;
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+
+// Create grayscale
+$gray-dark:                 #292b2c !default;
+$gray:                      #464a4c !default;
+$gray-light:                #636c72 !default;
 $gray-lighter:              #eceeef !default;
 $gray-lightest:             #f7f7f9 !default;
 
-$brand-primary:             #0275d8 !default;
-$brand-success:             #5cb85c !default;
-$brand-info:                #5bc0de !default;
-$brand-warning:             #f0ad4e !default;
-$brand-danger:              #d9534f !default;
+// Reassign color vars to semantic color scheme
+$brand-primary:             $blue !default;
+$brand-success:             $green !default;
+$brand-info:                $teal !default;
+$brand-warning:             $orange !default;
+$brand-danger:              $red !default;
 $brand-inverse:             $gray-dark !default;
 
 
@@ -60,11 +123,10 @@ $brand-inverse:             $gray-dark !default;
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-flex:               false !default;
 $enable-rounded:            true !default;
 $enable-shadows:            false !default;
 $enable-gradients:          false !default;
-$enable-transitions:        false !default;
+$enable-transitions:        true !default;
 $enable-hover-media-query:  false !default;
 $enable-grid-classes:       true !default;
 $enable-print-styles:       true !default;
@@ -85,27 +147,44 @@ $spacers: (
     y: 0
   ),
   1: (
+    x: ($spacer-x * .25),
+    y: ($spacer-y * .25)
+  ),
+  2: (
+    x: ($spacer-x * .5),
+    y: ($spacer-y * .5)
+  ),
+  3: (
     x: $spacer-x,
     y: $spacer-y
   ),
-  2: (
+  4: (
     x: ($spacer-x * 1.5),
     y: ($spacer-y * 1.5)
   ),
-  3: (
+  5: (
     x: ($spacer-x * 3),
     y: ($spacer-y * 3)
   )
 ) !default;
 $border-width: 1px !default;
 
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+) !default;
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg:    #fff !default;
-$body-color: $gray-dark !default;
+$body-bg:       $white !default;
+$body-color:    $gray-dark !default;
+$inverse-bg:    $gray-dark !default;
+$inverse-color: $gray-lighter !default;
 
 
 // Links
@@ -125,12 +204,13 @@ $link-hover-decoration: underline !default;
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 544px,
+  sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px
 ) !default;
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
 
 
 // Grid containers
@@ -138,9 +218,9 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
   md: 720px,
-  lg: 940px,
+  lg: 960px,
   xl: 1140px
 ) !default;
 @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -150,15 +230,21 @@ $container-max-widths: (
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:      12 !default;
-$grid-gutter-width: 30px !default;
-
+$grid-columns:               12 !default;
+$grid-gutter-width-base:     30px !default;
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+) !default;
 
-// Typography
+// Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
@@ -171,6 +257,10 @@ $font-size-lg:   1.25rem !default;
 $font-size-sm:   .875rem !default;
 $font-size-xs:   .75rem !default;
 
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+
+$font-weight-base: $font-weight-normal !default;
 $line-height-base: 1.5 !default;
 
 $font-size-h1: 2.5rem !default;
@@ -210,15 +300,15 @@ $blockquote-font-size:    ($font-size-base * 1.25) !default;
 $blockquote-border-color: $gray-lighter !default;
 $blockquote-border-width: .25rem !default;
 
-$hr-border-color: rgba(0,0,0,.1) !default;
+$hr-border-color: rgba($black,.1) !default;
 $hr-border-width: $border-width !default;
 
 $mark-padding: .2em !default;
 
-$dt-font-weight: bold !default;
+$dt-font-weight: $font-weight-bold !default;
 
-$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
-$nested-kbd-font-weight: bold !default;
+$kbd-box-shadow:         inset 0 -.1rem 0 rgba($black,.25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
 
 $list-inline-padding: 5px !default;
 
@@ -234,12 +324,16 @@ $border-radius:          .25rem !default;
 $border-radius-lg:       .3rem !default;
 $border-radius-sm:       .2rem !default;
 
-$component-active-color: #fff !default;
+$component-active-color: $white !default;
 $component-active-bg:    $brand-primary !default;
 
 $caret-width:            .3em !default;
 $caret-width-lg:         $caret-width !default;
 
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
+
 
 // Tables
 //
@@ -249,10 +343,17 @@ $table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(0,0,0,.05) !default;
-$table-bg-hover:                rgba(0,0,0,.075) !default;
+
+$table-inverse-bg:              $gray-dark !default;
+$table-inverse-color:           $body-bg !default;
+
+$table-bg-accent:               rgba($black,.05) !default;
+$table-bg-hover:                rgba($black,.075) !default;
 $table-bg-active:               $table-bg-hover !default;
 
+$table-head-bg:                 $gray-lighter !default;
+$table-head-color:              $gray !default;
+
 $table-border-width:            $border-width !default;
 $table-border-color:            $gray-lighter !default;
 
@@ -264,31 +365,32 @@ $table-border-color:            $gray-lighter !default;
 $btn-padding-x:                  1rem !default;
 $btn-padding-y:                  .5rem !default;
 $btn-line-height:                1.25 !default;
-$btn-font-weight:                normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
+$btn-font-weight:                $font-weight-normal !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
+$btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
-$btn-primary-color:              #fff !default;
+$btn-primary-color:              $white !default;
 $btn-primary-bg:                 $brand-primary !default;
 $btn-primary-border:             $btn-primary-bg !default;
 
 $btn-secondary-color:            $gray-dark !default;
-$btn-secondary-bg:               #fff !default;
+$btn-secondary-bg:               $white !default;
 $btn-secondary-border:           #ccc !default;
 
-$btn-info-color:                 #fff !default;
+$btn-info-color:                 $white !default;
 $btn-info-bg:                    $brand-info !default;
 $btn-info-border:                $btn-info-bg !default;
 
-$btn-success-color:              #fff !default;
+$btn-success-color:              $white !default;
 $btn-success-bg:                 $brand-success !default;
 $btn-success-border:             $btn-success-bg !default;
 
-$btn-warning-color:              #fff !default;
+$btn-warning-color:              $white !default;
 $btn-warning-bg:                 $brand-warning !default;
 $btn-warning-border:             $btn-warning-bg !default;
 
-$btn-danger-color:               #fff !default;
+$btn-danger-color:               $white !default;
 $btn-danger-bg:                  $brand-danger !default;
 $btn-danger-border:              $btn-danger-bg !default;
 
@@ -308,6 +410,8 @@ $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
 $btn-border-radius-sm:           $border-radius-sm !default;
 
+$btn-transition:                 all .2s ease-in-out !default;
+
 
 // Forms
 
@@ -315,24 +419,24 @@ $input-padding-x:                .75rem !default;
 $input-padding-y:                .5rem !default;
 $input-line-height:              1.25 !default;
 
-$input-bg:                       #fff !default;
+$input-bg:                       $white !default;
 $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
-$input-border-color:             rgba(0,0,0,.15) !default;
+$input-border-color:             rgba($black,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
-$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
+$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
-$input-bg-focus:                 $input-bg;
-$input-border-focus:             #66afe9 !default;
-$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
-$input-color-focus:              $input-color;
+$input-bg-focus:                 $input-bg !default;
+$input-border-focus:             lighten($brand-primary, 25%) !default;
+$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6) !default;
+$input-color-focus:              $input-color !default;
 
-$input-color-placeholder:        #999 !default;
+$input-color-placeholder:        $gray-light !default;
 
 $input-padding-x-sm:             .5rem !default;
 $input-padding-y-sm:             .25rem !default;
@@ -340,10 +444,22 @@ $input-padding-y-sm:             .25rem !default;
 $input-padding-x-lg:             1.5rem !default;
 $input-padding-y-lg:             .75rem !default;
 
-$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
+$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
 $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
 
+$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+
+$form-text-margin-top:     .25rem !default;
+$form-feedback-margin-top: $form-text-margin-top !default;
+
+$form-check-margin-bottom:  .5rem !default;
+$form-check-input-gutter:   1.25rem !default;
+$form-check-input-margin-y: .25rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+
 $form-group-margin-bottom:       $spacer-y !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
@@ -356,67 +472,72 @@ $custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
 
 $custom-control-indicator-size:       1rem !default;
+$custom-control-indicator-margin-y:   (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
 $custom-control-indicator-bg:         #ddd !default;
 $custom-control-indicator-bg-size:    50% 50% !default;
-$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;
+$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
 
 $custom-control-disabled-cursor:             $cursor-disabled !default;
-$custom-control-disabled-indicator-bg:       #eee !default;
-$custom-control-disabled-description-color:  #767676 !default;
+$custom-control-disabled-indicator-bg:       $gray-lighter !default;
+$custom-control-disabled-description-color:  $gray-light !default;
 
-$custom-control-checked-indicator-color:      #fff !default;
-$custom-control-checked-indicator-bg:         #0074d9 !default;
+$custom-control-checked-indicator-color:      $white !default;
+$custom-control-checked-indicator-bg:         $brand-primary !default;
 $custom-control-checked-indicator-box-shadow: none !default;
 
-$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
 
-$custom-control-active-indicator-color:      #fff !default;
-$custom-control-active-indicator-bg:         #84c6ff !default;
+$custom-control-active-indicator-color:      $white !default;
+$custom-control-active-indicator-bg:         lighten($brand-primary, 35%) !default;
 $custom-control-active-indicator-box-shadow: none !default;
 
 $custom-checkbox-radius: $border-radius !default;
-$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
-$custom-checkbox-indeterminate-bg: #0074d9 !default;
-$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
+$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-checkbox-indeterminate-bg: $brand-primary !default;
+$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
+$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-checkbox-indeterminate-box-shadow: none !default;
 
 $custom-radio-radius: 50% !default;
-$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
+$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 $custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !default;
-$custom-select-indicator-padding:  1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-color:          $input-color !default;
-$custom-select-disabled-color: $gray-light !default;
-$custom-select-bg:            #fff !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height:         $input-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-light !default;
+$custom-select-bg:            $white !default;
 $custom-select-disabled-bg:   $gray-lighter !default;
 $custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
+$custom-select-indicator-color: #333 !default;
+$custom-select-indicator:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
 
-$custom-select-focus-border-color: #51a7e8 !default;
-$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
+$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
+$custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
-$custom-select-sm-padding-y: .2rem !default;
-$custom-select-sm-font-size: 75% !default;
+$custom-select-sm-padding-y:  .2rem !default;
+$custom-select-sm-font-size:  75% !default;
 
 $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
-$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
 
 $custom-file-padding-x:     .5rem !default;
 $custom-file-padding-y:     1rem !default;
 $custom-file-line-height:   1.5 !default;
-$custom-file-color:         #555 !default;
-$custom-file-bg:            #fff !default;
+$custom-file-color:         $gray !default;
+$custom-file-bg:            $white !default;
 $custom-file-border-width:  $border-width !default;
-$custom-file-border-color:  #ddd !default;
+$custom-file-border-color:  $input-border-color !default;
 $custom-file-border-radius: $border-radius !default;
-$custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
+$custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
 $custom-file-button-color:  $custom-file-color !default;
-$custom-file-button-bg:     #eee !default;
+$custom-file-button-bg:     $gray-lighter !default;
 $custom-file-text: (
   placeholder: (
     en: "Choose file..."
@@ -428,34 +549,39 @@ $custom-file-text: (
 
 
 // Form validation icons
-$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
-$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
-$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
+$form-icon-success-color: $brand-success !default;
+$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$form-icon-warning-color: $brand-warning !default;
+$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$form-icon-danger-color: $brand-danger !default;
+$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-$dropdown-min-width:             160px !default;
-$dropdown-padding-y:             5px !default;
-$dropdown-margin-top:            2px !default;
-$dropdown-bg:                    #fff !default;
-$dropdown-border-color:          rgba(0,0,0,.15) !default;
+$dropdown-min-width:             10rem !default;
+$dropdown-padding-y:             .5rem !default;
+$dropdown-margin-top:            .125rem !default;
+$dropdown-bg:                    $white !default;
+$dropdown-border-color:          rgba($black,.15) !default;
 $dropdown-border-width:          $border-width !default;
-$dropdown-divider-bg:            #e5e5e5 !default;
-$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
+$dropdown-divider-bg:            $gray-lighter !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
 
 $dropdown-link-color:            $gray-dark !default;
 $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
-$dropdown-link-hover-bg:         #f5f5f5 !default;
+$dropdown-link-hover-bg:         $gray-lightest !default;
 
 $dropdown-link-active-color:     $component-active-color !default;
 $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
-$dropdown-item-padding-x:        20px !default;
+$dropdown-item-padding-x:        1.5rem !default;
 
 $dropdown-header-color:          $gray-light !default;
 
@@ -468,12 +594,12 @@ $dropdown-header-color:          $gray-light !default;
 $zindex-dropdown-backdrop:  990 !default;
 $zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
-$zindex-popover:           1060 !default;
-$zindex-tooltip:           1070 !default;
 $zindex-navbar-fixed:      1030 !default;
 $zindex-navbar-sticky:     1030 !default;
-$zindex-modal-bg:          1040 !default;
+$zindex-modal-backdrop:    1040 !default;
 $zindex-modal:             1050 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
 
 
 // Navbar
@@ -481,18 +607,29 @@ $zindex-modal:             1050 !default;
 $navbar-border-radius:              $border-radius !default;
 $navbar-padding-x:                  $spacer !default;
 $navbar-padding-y:                  ($spacer / 2) !default;
+
 $navbar-brand-padding-y:            .25rem !default;
 
-$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-divider-padding-y:          .425rem !default;
 
-$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;
+$navbar-toggler-padding-x:           .75rem !default;
+$navbar-toggler-padding-y:           .25rem !default;
+$navbar-toggler-font-size:           $font-size-lg !default;
+$navbar-toggler-border-radius:       $btn-border-radius !default;
 
+$navbar-inverse-color:                 rgba($white,.5) !default;
+$navbar-inverse-hover-color:           rgba($white,.75) !default;
+$navbar-inverse-active-color:          rgba($white,1) !default;
+$navbar-inverse-disabled-color:        rgba($white,.25) !default;
+$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-inverse-toggler-border:        rgba($white,.1) !default;
+
+$navbar-light-color:                rgba($black,.5) !default;
+$navbar-light-hover-color:          rgba($black,.7) !default;
+$navbar-light-active-color:         rgba($black,.9) !default;
+$navbar-light-disabled-color:       rgba($black,.3) !default;
+$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border:       rgba($black,.1) !default;
 
 // Navs
 
@@ -501,8 +638,6 @@ $nav-item-inline-spacer:        1rem !default;
 $nav-link-padding:              .5em 1em !default;
 $nav-link-hover-bg:             $gray-lighter !default;
 $nav-disabled-link-color:       $gray-light !default;
-$nav-disabled-link-hover-color: $gray-light !default;
-$nav-disabled-link-hover-bg:    transparent !default;
 
 $nav-tabs-border-color:                       #ddd !default;
 $nav-tabs-border-width:                       $border-width !default;
@@ -523,14 +658,14 @@ $nav-pills-active-link-bg:    $component-active-bg !default;
 
 $pagination-padding-x:                .75rem !default;
 $pagination-padding-y:                .5rem !default;
-$pagination-padding-x-sm:             .75rem !default;
-$pagination-padding-y-sm:             .275rem !default;
+$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-y-sm:             .25rem !default;
 $pagination-padding-x-lg:             1.5rem !default;
 $pagination-padding-y-lg:             .75rem !default;
-
+$pagination-line-height:              1.25 !default;
 
 $pagination-color:                     $link-color !default;
-$pagination-bg:                        #fff !default;
+$pagination-bg:                        $white !default;
 $pagination-border-width:              $border-width !default;
 $pagination-border-color:              #ddd !default;
 
@@ -538,12 +673,12 @@ $pagination-hover-color:               $link-hover-color !default;
 $pagination-hover-bg:                  $gray-lighter !default;
 $pagination-hover-border:              #ddd !default;
 
-$pagination-active-color:              #fff !default;
+$pagination-active-color:              $white !default;
 $pagination-active-bg:                 $brand-primary !default;
 $pagination-active-border:             $brand-primary !default;
 
 $pagination-disabled-color:            $gray-light !default;
-$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-bg:               $white !default;
 $pagination-disabled-border:           #ddd !default;
 
 
@@ -576,29 +711,32 @@ $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 
 // Cards
+
 $card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
-$card-border-color:        rgba(0,0,0,.125) !default;
-$card-border-radius-inner: $card-border-radius !default;
-$card-cap-bg:              #f5f5f5 !default;
-$card-bg:                  #fff !default;
+$card-border-color:        rgba($black,.125) !default;
+$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg:              $gray-lightest !default;
+$card-bg:                  $white !default;
 
-$card-link-hover-color:    #fff !default;
+$card-link-hover-color:    $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-deck-margin:         .625rem !default;
+$card-deck-margin:          ($grid-gutter-width-base / 2) !default;
 
-$card-columns-sm-up-column-gap: 1.25rem !default;
+$card-columns-count:        3 !default;
+$card-columns-gap:          1.25rem !default;
+$card-columns-margin:       $card-spacer-y !default;
 
 
 // Tooltips
 
 $tooltip-max-width:           200px !default;
-$tooltip-color:               #fff !default;
-$tooltip-bg:                  #000 !default;
+$tooltip-color:               $white !default;
+$tooltip-bg:                  $black !default;
 $tooltip-opacity:             .9 !default;
 $tooltip-padding-y:           3px !default;
 $tooltip-padding-x:           8px !default;
@@ -611,11 +749,11 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 // Popovers
 
 $popover-inner-padding:               1px !default;
-$popover-bg:                          #fff !default;
+$popover-bg:                          $white !default;
 $popover-max-width:                   276px !default;
 $popover-border-width:                $border-width !default;
-$popover-border-color:                rgba(0,0,0,.2) !default;
-$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
+$popover-border-color:                rgba($black,.2) !default;
+$popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
 $popover-title-padding-x:             14px !default;
@@ -631,26 +769,27 @@ $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
 $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
 
 
-// Tags
+// Badges
 
-$tag-default-bg:            $gray-light !default;
-$tag-primary-bg:            $brand-primary !default;
-$tag-success-bg:            $brand-success !default;
-$tag-info-bg:               $brand-info !default;
-$tag-warning-bg:            $brand-warning !default;
-$tag-danger-bg:             $brand-danger !default;
+$badge-default-bg:            $gray-light !default;
+$badge-primary-bg:            $brand-primary !default;
+$badge-success-bg:            $brand-success !default;
+$badge-info-bg:               $brand-info !default;
+$badge-warning-bg:            $brand-warning !default;
+$badge-danger-bg:             $brand-danger !default;
 
-$tag-color:                 #fff !default;
-$tag-link-hover-color:      #fff !default;
-$tag-font-size:             75% !default;
-$tag-font-weight:           bold !default;
-$tag-padding-x:             .4em !default;
-$tag-padding-y:             .25em !default;
+$badge-color:                 $white !default;
+$badge-link-hover-color:      $white !default;
+$badge-font-size:             75% !default;
+$badge-font-weight:           $font-weight-bold !default;
+$badge-padding-x:             .4em !default;
+$badge-padding-y:             .25em !default;
 
-$tag-pill-padding-x:        .6em !default;
+$badge-pill-padding-x:        .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.
-$tag-pill-border-radius:    10rem !default;
+$badge-pill-border-radius:    10rem !default;
+
 
 // Modals
 
@@ -660,34 +799,38 @@ $modal-inner-padding:         15px !default;
 $modal-dialog-margin:         10px !default;
 $modal-dialog-sm-up-margin-y: 30px !default;
 
-$modal-title-padding:         15px !default;
 $modal-title-line-height:     $line-height-base !default;
 
-$modal-content-bg:               #fff !default;
-$modal-content-border-color:     rgba(0,0,0,.2) !default;
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black,.2) !default;
 $modal-content-border-width:     $border-width !default;
-$modal-content-xs-box-shadow:    0 3px 9px rgba(0,0,0,.5) !default;
-$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
+$modal-content-xs-box-shadow:    0 3px 9px rgba($black,.5) !default;
+$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default;
 
-$modal-backdrop-bg:           #000 !default;
+$modal-backdrop-bg:           $black !default;
 $modal-backdrop-opacity:      .5 !default;
-$modal-header-border-color:   #e5e5e5 !default;
+$modal-header-border-color:   $gray-lighter !default;
 $modal-footer-border-color:   $modal-header-border-color !default;
 $modal-header-border-width:   $modal-content-border-width !default;
 $modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        15px !default;
 
-$modal-lg:                    900px !default;
-$modal-md:                    600px !default;
+$modal-lg:                    800px !default;
+$modal-md:                    500px !default;
 $modal-sm:                    300px !default;
 
+$modal-transition:            transform .3s ease-out !default;
+
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding:               1rem !default;
+$alert-padding-x:             1.25rem !default;
+$alert-padding-y:             .75rem !default;
+$alert-margin-bottom:         $spacer-y !default;
 $alert-border-radius:         $border-radius !default;
-$alert-link-font-weight:      bold !default;
+$alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
 
 $alert-success-bg:            $state-success-bg !default;
@@ -709,10 +852,10 @@ $alert-danger-border:         $state-danger-border !default;
 
 // Progress bars
 
-$progress-bg:                 #eee !default;
-$progress-bar-color:          #0074d9 !default;
+$progress-bg:                 $gray-lighter !default;
+$progress-bar-color:          $brand-primary !default;
 $progress-border-radius:      $border-radius !default;
-$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
+$progress-box-shadow:         inset 0 .1rem .1rem rgba($black,.1) !default;
 
 $progress-bar-bg:             $brand-primary !default;
 $progress-bar-success-bg:     $brand-success !default;
@@ -723,28 +866,31 @@ $progress-bar-info-bg:        $brand-info !default;
 
 // List group
 
-$list-group-bg:                 #fff !default;
-$list-group-border-color:       #ddd !default;
-$list-group-border-width:       $border-width !default;
-$list-group-border-radius:      $border-radius !default;
+$list-group-color:               $body-color !default;
+$list-group-bg:                  $white !default;
+$list-group-border-color:        rgba($black,.125) !default;
+$list-group-border-width:        $border-width !default;
+$list-group-border-radius:       $border-radius !default;
+
+$list-group-item-padding-x:      1.25rem !default;
+$list-group-item-padding-y:      .75rem !default;
 
-$list-group-hover-bg:           #f5f5f5 !default;
-$list-group-active-color:       $component-active-color !default;
-$list-group-active-bg:          $component-active-bg !default;
-$list-group-active-border:      $list-group-active-bg !default;
-$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+$list-group-hover-bg:            $gray-lightest !default;
+$list-group-active-color:        $component-active-color !default;
+$list-group-active-bg:           $component-active-bg !default;
+$list-group-active-border:       $list-group-active-bg !default;
+$list-group-active-text-color:   lighten($list-group-active-bg, 50%) !default;
 
 $list-group-disabled-color:      $gray-light !default;
-$list-group-disabled-bg:         $gray-lighter !default;
+$list-group-disabled-bg:         $list-group-bg !default;
 $list-group-disabled-text-color: $list-group-disabled-color !default;
 
-$list-group-link-color:         #555 !default;
-$list-group-link-hover-color:   $list-group-link-color !default;
-$list-group-link-heading-color: #333 !default;
+$list-group-link-color:          $gray !default;
+$list-group-link-heading-color:  $gray-dark !default;
+$list-group-link-hover-color:    $list-group-link-color !default;
 
-$list-group-item-padding-x:             1.25rem !default;
-$list-group-item-padding-y:             .75rem !default;
-$list-group-item-heading-margin-bottom: 5px !default;
+$list-group-link-active-color:   $list-group-color !default;
+$list-group-link-active-bg:      $gray-lighter !default;
 
 
 // Image thumbnails
@@ -754,12 +900,14 @@ $thumbnail-bg:                $body-bg !default;
 $thumbnail-border-width:      $border-width !default;
 $thumbnail-border-color:      #ddd !default;
 $thumbnail-border-radius:     $border-radius !default;
-$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
+$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
+$thumbnail-transition:        all .2s ease-in-out !default;
 
 
 // Figures
 
 $figure-caption-font-size: 90% !default;
+$figure-caption-color:     $gray-light !default;
 
 
 // Breadcrumbs
@@ -774,42 +922,33 @@ $breadcrumb-active-color:       $gray-light !default;
 $breadcrumb-divider:            "/" !default;
 
 
-// Media objects
-
-$media-margin-top:            15px !default;
-$media-heading-margin-bottom:  5px !default;
-$media-alignment-padding-x:   10px !default;
-
-
 // Carousel
 
-$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
-
-$carousel-control-color:                      #fff !default;
+$carousel-control-color:                      $white !default;
 $carousel-control-width:                      15% !default;
-$carousel-control-sm-up-size:                 30px !default;
 $carousel-control-opacity:                    .5 !default;
-$carousel-control-font-size:                  20px !default;
-
-$carousel-indicators-width:                   60% !default;
 
-$carousel-indicator-size:                     10px !default;
-$carousel-indicator-active-size:              12px !default;
-$carousel-indicator-active-bg:                #fff !default;
-$carousel-indicator-border-color:             #fff !default;
+$carousel-indicator-width:                    30px !default;
+$carousel-indicator-height:                   3px !default;
+$carousel-indicator-spacer:                   3px !default;
+$carousel-indicator-active-bg:                $white !default;
 
 $carousel-caption-width:                      70% !default;
-$carousel-caption-sm-up-width:                60% !default;
-$carousel-caption-color:                      #fff !default;
+$carousel-caption-color:                      $white !default;
+
+$carousel-control-icon-width:                 20px !default;
+
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$carousel-icon-width:                         20px !default;
+$carousel-transition:           transform .6s ease-in-out !default;
 
 
 // Close
 
-$close-font-weight:           bold !default;
-$close-color:                 #000 !default;
-$close-text-shadow:           0 1px 0 #fff !default;
+$close-font-weight:           $font-weight-bold !default;
+$close-color:                 $black !default;
+$close-text-shadow:           0 1px 0 $white !default;
 
 
 // Code
@@ -818,12 +957,12 @@ $code-font-size:              90% !default;
 $code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
 $code-color:                  #bd4147 !default;
-$code-bg:                     #f7f7f9 !default;
+$code-bg:                     $gray-lightest !default;
 
-$kbd-color:                   #fff !default;
-$kbd-bg:                      #333 !default;
+$kbd-color:                   $white !default;
+$kbd-bg:                      $gray-dark !default;
 
-$pre-bg:                      #f7f7f9 !default;
+$pre-bg:                      $gray-lightest !default;
 $pre-color:                   $gray-dark !default;
 $pre-border-color:            #ccc !default;
 $pre-scrollable-max-height:   340px !default;
diff --git a/scss/bootstrap-flex.scss b/scss/bootstrap-flex.scss
deleted file mode 100644
index 60dd03a68..000000000
--- a/scss/bootstrap-flex.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Bootstrap with Flexbox enabled
-//
-// Includes all the imports from the standard Bootstrap project, but enables
-// the flexbox variable.
-
-$enable-flex: true;
-
-@import "bootstrap";
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 40680ca96..182b9626b 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -1,14 +1,32 @@
 // Bootstrap Grid only
 //
-// Includes relevant variables and mixins for the regular (non-flexbox) grid
-// system, as well as the generated predefined classes (e.g., `.col-4-sm`).
+// Includes relevant variables and mixins for the flexbox grid
+// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
+
+//
+// Box sizing, responsive, and more
+//
+
+@at-root {
+  @-ms-viewport { width: device-width; }
+}
+
+html {
+  box-sizing: border-box;
+  -ms-overflow-style: scrollbar;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 
 
 //
 // Variables
 //
 
-@import "custom";
 @import "variables";
 
 //
@@ -20,4 +38,6 @@
 @import "mixins/grid-framework";
 @import "mixins/grid";
 
+@import "custom";
+
 @import "grid";
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index eeff5166c..978b086a1 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -2,10 +2,9 @@
 //
 // Includes only Normalize and our custom Reboot reset.
 
-@import "custom";
 @import "variables";
-@import "mixins/hover";
-@import "mixins/tab-focus";
+@import "mixins";
+@import "custom";
 
 @import "normalize";
 @import "reboot";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 219eda217..97a9417d4 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,14 +1,14 @@
 /*!
- * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
  * Copyright 2011-2016 The Bootstrap Authors
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
 // Core variables and mixins
-@import "custom";
 @import "variables";
 @import "mixins";
+@import "custom";
 
 // Reset and dependencies
 @import "normalize";
@@ -25,7 +25,7 @@
 @import "buttons";
 
 // Components
-@import "animation";
+@import "transitions";
 @import "dropdown";
 @import "button-group";
 @import "input-group";
@@ -35,7 +35,7 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "tags";
+@import "badge";
 @import "jumbotron";
 @import "alert";
 @import "progress";
diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index ff21ad958..54a734dcc 100644
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -2,7 +2,6 @@
 
 @mixin bg-variant($parent, $color) {
   #{$parent} {
-    color: #fff !important;
     background-color: $color !important;
   }
   a#{$parent} {
diff --git a/scss/mixins/_tag.scss b/scss/mixins/_badge.scss
index 900c54e36..77206b9a5 100644
--- a/scss/mixins/_tag.scss
+++ b/scss/mixins/_badge.scss
@@ -1,6 +1,6 @@
 // Tags
 
-@mixin tag-variant($color) {
+@mixin badge-variant($color) {
   background-color: $color;
 
   &[href] {
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index a868833b4..6fd2e8e1e 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: 544px, md: 768px)
+//    (xs: 0, sm: 576px, 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, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, 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: 544px, md: 768px))
-//    544px
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,13 +31,24 @@
 // 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: 544px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
   @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@@ -64,17 +75,6 @@
   }
 }
 
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($name, $breakpoints) {
-    @include media-breakpoint-down($name, $breakpoints) {
-      @content;
-    }
-  }
-}
-
 // 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) {
@@ -84,3 +84,12 @@
     }
   }
 }
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-between($name, $name, $breakpoints) {
+    @content;
+  }
+}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 5196ab65e..f9981e326 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -12,96 +12,69 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
+  // Hover and focus styles are shared
   @include hover {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
   }
-
   &:focus,
   &.focus {
-    color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 2px rgba($border, .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
+    background-image: none; // Remove the gradient for the pressed/active state
+    border-color: $active-border;
     @include box-shadow($btn-active-box-shadow);
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      background-color: $background;
-          border-color: $border;
-    }
-    @include hover {
-      background-color: $background;
-          border-color: $border;
-    }
   }
 }
 
-@mixin button-outline-variant($color) {
+@mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
   background-image: none;
   background-color: transparent;
   border-color: $color;
 
   @include hover {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
   }
 
   &:focus,
   &.focus {
-    color: #fff;
-    background-color: $color;
-        border-color: $color;
+    box-shadow: 0 0 0 2px rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
-    color: #fff;
+  .show > &.dropdown-toggle {
+    color: $color-hover;
     background-color: $color;
-        border-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: #fff;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      border-color: lighten($color, 20%);
-    }
-    @include hover {
-      border-color: lighten($color, 20%);
-    }
+    border-color: $color;
   }
 }
 
diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
index 574349aba..4b1232d8b 100644
--- a/scss/mixins/_cards.scss
+++ b/scss/mixins/_cards.scss
@@ -20,8 +20,11 @@
 //
 
 @mixin card-inverse {
+  color: rgba(255,255,255,.65);
+
   .card-header,
   .card-footer {
+    background-color: transparent;
     border-color: rgba(255,255,255,.2);
   }
   .card-header,
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index d0ae125f3..b72cf2712 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
+    display: block;
     content: "";
-    display: table;
     clear: both;
   }
 }
diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss
new file mode 100644
index 000000000..b43116fa6
--- /dev/null
+++ b/scss/mixins/_float.scss
@@ -0,0 +1,9 @@
+@mixin float-left {
+  float: left !important;
+}
+@mixin float-right {
+  float: right !important;
+}
+@mixin float-none {
+  float: none !important;
+}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b281dd715..c8aea9669 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -7,20 +7,18 @@
   // Color the label and help text
   .form-control-feedback,
   .form-control-label,
+  .col-form-label,
   .form-check-label,
-  .form-check-inline,
   .custom-control {
     color: $color;
   }
+
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: $color;
-    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 
     &:focus {
-      // border-color: darken($border-color, 10%);
-      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
-      // @include box-shadow($shadow);
+      @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
     }
   }
 
@@ -30,10 +28,6 @@
     border-color: $color;
     background-color: lighten($color, 40%);
   }
-  // Optional feedback icon
-  .form-control-feedback {
-    color: $color;
-  }
 }
 
 // Form control focus state
@@ -54,8 +48,7 @@
     background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
-    @include box-shadow($shadow);
+    @include box-shadow($input-box-shadow-focus);
   }
 }
 
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index ac96efe2d..ebe797aa7 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -3,11 +3,9 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-// Color stops are not available in IE9.
 @mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
 }
 
 // Vertical gradient, from top to bottom
@@ -17,7 +15,6 @@
 @mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
@@ -27,12 +24,10 @@
 @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
 }
 @mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback
 }
 @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
@@ -40,4 +35,4 @@
 }
 @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-}
\ No newline at end of file
+}
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 8b17d7843..0aa814ab2 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -3,55 +3,50 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-
+@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-    // Inner gutter via padding
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    width: 100%;
+    min-height: 1px; // Prevent columns from collapsing when empty
 
-    @if $enable-flex {
-      width: 100%;
-    }
+    @include make-gutters($gutters);
   }
 
-  $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
-    $breakpoint-counter: ($breakpoint-counter + 1);
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
+    // Allow columns to stretch full width below their breakpoints
     @for $i from 1 through $columns {
-      .col-#{$breakpoint}-#{$i} {
+      .col#{$infix}-#{$i} {
         @extend %grid-column;
       }
     }
+    .col#{$infix} {
+      @extend %grid-column;
+    }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      @if $enable-flex {
-        .col-#{$breakpoint} {
-          position: relative;
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-          min-height: 1px;
-          padding-right: ($grid-gutter-width / 2);
-          padding-left:  ($grid-gutter-width / 2);
-        }
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
       }
 
       @for $i from 1 through $columns {
-        .col-#{$breakpoint}-#{$i} {
+        .col#{$infix}-#{$i} {
           @include make-col($i, $columns);
         }
       }
 
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .#{$modifier}-#{$breakpoint}-#{$i} {
+          .#{$modifier}#{$infix}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
@@ -59,8 +54,8 @@
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
-        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
-          .offset-#{$breakpoint}-#{$i} {
+        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
+          .offset#{$infix}-#{$i} {
             @include make-col-modifier(offset, $i, $columns)
           }
         }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index fa9b3995b..23b11dbed 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,13 +2,16 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutter: $grid-gutter-width) {
+@mixin make-container($gutters: $grid-gutter-widths) {
   margin-left: auto;
   margin-right: auto;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
-  @if not $enable-flex {
-    @include clearfix();
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
   }
 }
 
@@ -17,47 +20,59 @@
 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
+      width: $container-max-width;
+      max-width: 100%;
     }
   }
 }
 
-@mixin make-row($gutter: $grid-gutter-width) {
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: wrap;
-  } @else {
-    @include clearfix();
+@mixin make-gutters($gutters: $grid-gutter-widths) {
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
   }
-  margin-left:  ($gutter / -2);
-  margin-right: ($gutter / -2);
 }
 
-@mixin make-col-ready($gutter: $grid-gutter-width) {
-  position: relative;
-  min-height: 1px; // Prevent collapsing
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
+@mixin make-row($gutters: $grid-gutter-widths) {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      margin-right: ($gutter / -2);
+      margin-left:  ($gutter / -2);
+    }
+  }
+}
 
+@mixin make-col-ready($gutters: $grid-gutter-widths) {
+  position: relative;
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
-  @if $enable-flex {
-    width: 100%;
+  width: 100%;
+  min-height: 1px; // Prevent collapsing
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
   }
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  @if $enable-flex {
-    flex: 0 0 percentage($size / $columns);
-    // Add a `max-width` to ensure content within each column does not blow out
-    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-    // do not appear to require this.
-    max-width: percentage($size / $columns);
-  } @else {
-    float: left;
-    width: percentage($size / $columns);
-  }
+  flex: 0 0 percentage($size / $columns);
+  // width: percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 4a648a54d..6dd55e705 100644
--- a/scss/mixins/_hover.scss
+++ b/scss/mixins/_hover.scss
@@ -1,7 +1,7 @@
 @mixin hover {
   // TODO: re-enable along with mq4-hover-shim
 //  @if $enable-hover-media-query {
-//    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
 //    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
 //    @media (hover: hover) {
 //      &:hover { @content }
diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss
index 91d2f59ee..c2b45f2ce 100644
--- a/scss/mixins/_image.scss
+++ b/scss/mixins/_image.scss
@@ -7,10 +7,12 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@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
+@mixin img-fluid {
+  // Part 1: Set a maximum relative to the parent
+  max-width: 100%;
+  // Part 2: Override the height to auto, otherwise images will be stretched
+  // when setting a width and height attribute on the img element.
+  height: auto;
 }
 
 
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 81b0f1634..3db5b096a 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -20,11 +20,9 @@
     }
 
     &.active {
-      @include plain-hover-focus {
-        color: #fff;
-        background-color: $color;
-        border-color: $color;
-      }
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
     }
   }
 }
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
index 9622d790b..567467986 100644
--- a/scss/mixins/_progress.scss
+++ b/scss/mixins/_progress.scss
@@ -13,11 +13,4 @@
   &[value]::-ms-fill {
     background-color: $color;
   }
-
-  // IE9
-  @media screen and (min-width:0\0) {
-    .progress-bar {
-      background-color: $color;
-    }
-  }
 }
diff --git a/scss/mixins/_pulls.scss b/scss/mixins/_pulls.scss
deleted file mode 100644
index 6bdff025d..000000000
--- a/scss/mixins/_pulls.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@mixin pull-left {
-  float: left !important;
-}
-@mixin pull-right {
-  float: right !important;
-}
diff --git a/scss/mixins/_reset-filter.scss b/scss/mixins/_reset-filter.scss
deleted file mode 100644
index 044b349c0..000000000
--- a/scss/mixins/_reset-filter.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Reset filters for IE
-//
-// When you need to remove a gradient background, do not forget to use this to reset
-// the IE filter for IE9.
-
-@mixin reset-filter() {
-  filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
-}
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index bb882f2ac..b95273097 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -2,7 +2,7 @@
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   letter-spacing: normal;
   line-break: auto;
   line-height: $line-height-base;
diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index 6ae65516a..c20858324 100644
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -15,7 +15,7 @@
 
 // Use in conjunction with .sr-only to only display content when it's focused.
 //
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 //
 // Credit: HTML5 Boilerplate
 
diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
new file mode 100644
index 000000000..4005c9d02
--- /dev/null
+++ b/scss/mixins/_transforms.scss
@@ -0,0 +1,14 @@
+// Applies the given styles only when the browser support CSS3 3D transforms.
+@mixin if-supports-3d-transforms() {
+  @media (-webkit-transform-3d) {
+    // Old Safari, Old Android
+    // http://caniuse.com/#feat=css-featurequeries
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
+    @content;
+  }
+
+  @supports (transform: translate3d(0,0,0)) {
+    // The Proper Way: Using a CSS feature query
+    @content;
+  }
+}
diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss
new file mode 100644
index 000000000..88c50b05d
--- /dev/null
+++ b/scss/mixins/_visibility.scss
@@ -0,0 +1,5 @@
+// Visibility
+
+@mixin invisible {
+  visibility: hidden !important;
+}
diff --git a/scss/utilities/_align.scss b/scss/utilities/_align.scss
new file mode 100644
index 000000000..4dbbbc2db
--- /dev/null
+++ b/scss/utilities/_align.scss
@@ -0,0 +1,6 @@
+.align-baseline    { vertical-align: baseline !important; } // Browser default
+.align-top         { vertical-align: top !important; }
+.align-middle      { vertical-align: middle !important; }
+.align-bottom      { vertical-align: bottom !important; }
+.align-text-bottom { vertical-align: text-bottom !important; }
+.align-text-top    { vertical-align: text-top !important; }
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index a81dcff2c..b9ac29523 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -3,7 +3,7 @@
 //
 
 .bg-faded {
-  background-color: $gray-lightest;
+  background-color: darken($body-bg, 3%);
 }
 
 @include bg-variant('.bg-primary', $brand-primary);
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
new file mode 100644
index 000000000..b256881e5
--- /dev/null
+++ b/scss/utilities/_borders.scss
@@ -0,0 +1,37 @@
+//
+// Border
+//
+
+.border-0        { border: 0 !important; }
+.border-top-0    { border-top: 0 !important; }
+.border-right-0  { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0   { border-left: 0 !important; }
+
+//
+// Border-radius
+//
+
+.rounded {
+  @include border-radius($border-radius);
+}
+.rounded-top {
+  @include border-top-radius($border-radius);
+}
+.rounded-right {
+  @include border-right-radius($border-radius);
+}
+.rounded-bottom {
+  @include border-bottom-radius($border-radius);
+}
+.rounded-left {
+  @include border-left-radius($border-radius);
+}
+
+.rounded-circle {
+  border-radius: 50%;
+}
+
+.rounded-0 {
+  border-radius: 0;
+}
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index d74049be8..b2fc976c1 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -2,12 +2,18 @@
 // Display utilities
 //
 
-.d-block {
-  display: block !important;
-}
-.d-inline-block {
-  display: inline-block !important;
-}
-.d-inline {
-  display: inline !important;
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .d#{$infix}-none         { display: none !important; }
+    .d#{$infix}-inline       { display: inline !important; }
+    .d#{$infix}-inline-block { display: inline-block !important; }
+    .d#{$infix}-block        { display: block !important; }
+    .d#{$infix}-table        { display: table !important; }
+    .d#{$infix}-table-cell   { display: table-cell !important; }
+    .d#{$infix}-flex         { display: flex !important; }
+    .d#{$infix}-inline-flex  { display: inline-flex !important; }
+  }
 }
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 502885a81..1b98aaa3f 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -2,36 +2,47 @@
 //
 // Custom styles for additional flex alignment options.
 
-@if $enable-flex {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    // Flex column reordering
-    @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-first { order: -1; }
-      .flex-#{$breakpoint}-last { order: 1; }
-      .flex-#{$breakpoint}-unordered { order: 0; }
-    }
-
-    // Alignment for every item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
-      .flex-items-#{$breakpoint}-middle { align-items: center; }
-      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
-    }
-
-    // Alignment per item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-top   { align-self: flex-start; }
-      .flex-#{$breakpoint}-middle { align-self: center; }
-      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
-    }
-
-    // Horizontal alignment of item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
-      .flex-items-#{$breakpoint}-center { justify-content: center; }
-      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
-      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
-      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
-    }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .flex#{$infix}-first     { order: -1; }
+    .flex#{$infix}-last      { order: 1; }
+    .flex#{$infix}-unordered { order: 0; }
+
+    .flex#{$infix}-row            { flex-direction: row !important; }
+    .flex#{$infix}-column         { flex-direction: column !important; }
+    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
+    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
+
+    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
+    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
+    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+
+    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
+    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
+    .justify-content#{$infix}-center  { justify-content: center !important; }
+    .justify-content#{$infix}-between { justify-content: space-between !important; }
+    .justify-content#{$infix}-around  { justify-content: space-around !important; }
+
+    .align-items#{$infix}-start    { align-items: flex-start !important; }
+    .align-items#{$infix}-end      { align-items: flex-end !important; }
+    .align-items#{$infix}-center   { align-items: center !important; }
+    .align-items#{$infix}-baseline { align-items: baseline !important; }
+    .align-items#{$infix}-stretch  { align-items: stretch !important; }
+
+    .align-content#{$infix}-start   { align-content: flex-start !important; }
+    .align-content#{$infix}-end     { align-content: flex-end !important; }
+    .align-content#{$infix}-center  { align-content: center !important; }
+    .align-content#{$infix}-between { align-content: space-between !important; }
+    .align-content#{$infix}-around  { align-content: space-around !important; }
+    .align-content#{$infix}-stretch { align-content: stretch !important; }
+
+    .align-self#{$infix}-auto     { align-self: auto !important; }
+    .align-self#{$infix}-start    { align-self: flex-start !important; }
+    .align-self#{$infix}-end      { align-self: flex-end !important; }
+    .align-self#{$infix}-center   { align-self: center !important; }
+    .align-self#{$infix}-baseline { align-self: baseline !important; }
+    .align-self#{$infix}-stretch  { align-self: stretch !important; }
   }
 }
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
new file mode 100644
index 000000000..01655e9a5
--- /dev/null
+++ b/scss/utilities/_float.scss
@@ -0,0 +1,9 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .float#{$infix}-left  { @include float-left; }
+    .float#{$infix}-right { @include float-right; }
+    .float#{$infix}-none  { @include float-none; }
+  }
+}
diff --git a/scss/utilities/_pulls.scss b/scss/utilities/_pulls.scss
deleted file mode 100644
index 7fec56c9a..000000000
--- a/scss/utilities/_pulls.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@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;
-    }
-  }
-}
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index b7ff044b6..208212d52 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,33 +1,54 @@
-// Width
+// Width and height
 
-.w-100 { width: 100% !important; }
+@each $prop, $abbrev in (width: w, height: h) {
+  @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
+  }
+}
+
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
 
 // Margin and Padding
 
-.m-x-auto {
-  margin-right: auto !important;
-  margin-left:  auto !important;
-}
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $lengths in $spacers {
+        $length-x: map-get($lengths, x);
+        $length-y: map-get($lengths, y);
+
+        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
+        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
+        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
+        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
+        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length-x !important;
+          #{$prop}-left:  $length-x !important;
+        }
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top:    $length-y !important;
+          #{$prop}-bottom: $length-y !important;
+        }
+      }
+    }
 
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $lengths in $spacers {
-    $length-x:   map-get($lengths, x);
-    $length-y:   map-get($lengths, y);
-
-    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
-    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
-    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
-    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
-    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
-
-    // Axes
-    .#{$abbrev}-x-#{$size} {
-      #{$prop}-right:  $length-x !important;
-      #{$prop}-left:   $length-x !important;
+    // Some special margin utils
+    .m#{$infix}-auto  { margin:        auto !important; }
+    .mt#{$infix}-auto { margin-top:    auto !important; }
+    .mr#{$infix}-auto { margin-right:  auto !important; }
+    .mb#{$infix}-auto { margin-bottom: auto !important; }
+    .ml#{$infix}-auto { margin-left:   auto !important; }
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left:  auto !important;
     }
-    .#{$abbrev}-y-#{$size} {
-      #{$prop}-top:    $length-y !important;
-      #{$prop}-bottom: $length-y !important;
+    .my#{$infix}-auto {
+      margin-top:    auto !important;
+      margin-bottom: auto !important;
     }
   }
 }
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 901f77144..4ac90533a 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -4,34 +4,40 @@
 
 // Alignment
 
-.text-justify        { text-align: justify !important; }
-.text-nowrap         { white-space: nowrap !important; }
-.text-truncate       { @include text-truncate; }
+.text-justify  { text-align: justify !important; }
+.text-nowrap   { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
 
 // Responsive alignment
 
 @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; }
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
   }
 }
 
 // Transformation
 
-.text-lowercase      { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
+.text-lowercase  { text-transform: lowercase !important; }
+.text-uppercase  { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
 
 // Weight and italics
 
-.font-weight-normal  { font-weight: normal; }
-.font-weight-bold    { font-weight: bold; }
-.font-italic         { font-style: italic; }
+.font-weight-normal { font-weight: $font-weight-normal; }
+.font-weight-bold   { font-weight: $font-weight-bold; }
+.font-italic        { font-style: italic; }
 
 // Contextual colors
 
+.text-white {
+  color: #fff !important;
+}
+
 @include text-emphasis-variant('.text-muted', $text-muted);
 
 @include text-emphasis-variant('.text-primary', $brand-primary);
@@ -44,6 +50,10 @@
 
 @include text-emphasis-variant('.text-danger', $brand-danger);
 
+// Font color
+
+@include text-emphasis-variant('.text-gray-dark', $gray-dark);
+
 // Misc
 
 .text-hide {
diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss
index cdb142869..fcedc9cb9 100644
--- a/scss/utilities/_visibility.scss
+++ b/scss/utilities/_visibility.scss
@@ -3,7 +3,7 @@
 //
 
 .invisible {
-  visibility: hidden !important;
+  @include invisible();
 }
 
 // Responsive visibility utilities