Merge branch 'twbs/v4-dev' into dropdown-keyboard

# Conflicts:
#	js/src/dropdown.js

29 files changed, 227 insertions, 403 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 2a6914a07..9d6e7ec4e 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -161,6 +161,7 @@ linters:
       - flex-order
       - flex-pack
       - align-items
+      - align-self
       - justify-content
       - float
       - width
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 1d921a74a..584ed1513 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -4,7 +4,7 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  display: flex;
+  display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
@@ -128,22 +128,6 @@
 }
 
 
-// Reposition the caret
-.btn .caret {
-  margin-left: 0;
-}
-// Carets in other button sizes
-.btn-lg .caret {
-  border-width: $caret-width-lg $caret-width-lg 0;
-  border-bottom-width: 0;
-}
-// Upside down carets for .dropup
-.dropup .btn-lg .caret {
-  border-width: 0 $caret-width-lg $caret-width-lg;
-}
-
-
-
 //
 // Vertical button groups
 //
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index df1e300b5..54478e450 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -106,7 +106,7 @@
 
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
 
 .carousel-indicators {
@@ -117,7 +117,7 @@
   z-index: 15;
   display: flex;
   justify-content: center;
-  padding-left: 0; // override <ul> default
+  padding-left: 0; // override <ol> 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;
@@ -163,7 +163,7 @@
 
 // Optional captions
 //
-// Hidden by default for smaller viewports.
+//
 
 .carousel-caption {
   position: absolute;
diff --git a/scss/_close.scss b/scss/_close.scss
index 5a92430a4..859990e31 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,6 +1,6 @@
 .close {
   float: right;
-  font-size: ($font-size-base * 1.5);
+  font-size: $close-font-size;
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8c2ce328f..ef2aab354 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -206,6 +206,7 @@
 .custom-file-input {
   min-width: $custom-file-width;
   max-width: 100%;
+  height: $custom-file-height;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
@@ -225,6 +226,7 @@
   padding: $custom-file-padding-x $custom-file-padding-y;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
+  pointer-events: none;
   user-select: none;
   background-color: $custom-file-bg;
   border: $custom-file-border-width solid $custom-file-border-color;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 46251031f..1c2741a2e 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -44,7 +44,7 @@
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y 0;
   margin: $dropdown-margin-top 0 0; // override default ul
-  font-size: $font-size-base;
+  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
   color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
@@ -150,17 +150,8 @@
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 //
 // Just add .dropup after the standard .dropdown class and you're set.
-// TODO: abstract this so that the navbar fixed styles are not placed here?
-
-.dropup,
-.navbar-fixed-bottom .dropdown {
-  // Reverse the caret
-  .caret {
-    content: "";
-    border-top: 0;
-    border-bottom: $caret-width solid;
-  }
 
+.dropup {
   // Different positioning for bottom up menu
   .dropdown-menu {
     top: auto;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7b750f030..7be62bde6 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -298,6 +298,7 @@ select.form-control-lg {
 .form-inline {
   display: flex;
   flex-flow: row wrap;
+  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
 
   // 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),
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 29831ab96..ab44883bd 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -69,7 +69,7 @@
 .input-group-addon {
   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-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-color;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 19bf4d41f..da4738297 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -26,7 +26,6 @@
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/size";
-@import "mixins/tab-focus";
 @import "mixins/reset-text";
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
@@ -43,7 +42,6 @@
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
-@import "mixins/progress";
 @import "mixins/table-row";
 
 // // Skins
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 4c603c1db..e90b0e0c6 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -1,4 +1,16 @@
-// Wrapper and base class
+// Contents
+//
+// Navbar
+// Navbar brand
+// Navbar nav
+// Navbar text
+// Navbar divider
+// Responsive navbar
+// Navbar position
+// Navbar themes
+
+
+// Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
@@ -6,52 +18,14 @@
 .navbar {
   position: relative;
   display: flex;
+  flex-direction: column;
   padding: $navbar-padding-y $navbar-padding-x;
 }
 
-.navbar-toggler-left {
-  position: absolute;
-  left: $navbar-padding-x;
-}
 
-.navbar-toggler-right {
-  position: absolute;
-  right: $navbar-padding-x;
-}
-
-
-// Navbar alignment options
-//
-// Display the navbar across the entirety of the page or fixed it to the top or
-// bottom of the page.
-
-// Fix the top/bottom navbars when screen real estate supports it
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-}
-
-.navbar-fixed-top {
-  top: 0;
-}
-
-.navbar-fixed-bottom {
-  bottom: 0;
-}
-
-.navbar-sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: $zindex-navbar-sticky;
-}
-
-
-//
-// Brand/project name
+// Navbar brand
 //
+// Used for brand, project, or site names.
 
 .navbar-brand {
   display: inline-block;
@@ -67,17 +41,21 @@
   }
 }
 
-.navbar-divider {
-  float: left;
-  width: $border-width;
-  padding-top: $navbar-divider-padding-y;
-  padding-bottom: $navbar-divider-padding-y;
-  margin-right: $navbar-padding-x;
-  margin-left:  $navbar-padding-x;
-  overflow: hidden;
 
-  &::before {
-    content: "\00a0";
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 
@@ -93,12 +71,14 @@
 }
 
 
-// Navbar toggle
+// Responsive navbar
 //
-// Custom button for toggling the `.navbar-collapse`, powered by the collapse
-// Bootstrap JavaScript plugin.
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
 
+// Button for toggling the navbar when in it's collapsed state
 .navbar-toggler {
+  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
@@ -123,21 +103,80 @@
   background-size: 100% 100%;
 }
 
-// Navigation
-//
-// Custom navbar navigation built on the base `.nav` styles.
+// Use `position` on the toggler to prevent it from being auto placed as a flex
+// item and allow easy placement.
+.navbar-toggler-left {
+  position: absolute;
+  left: $navbar-padding-x;
+}
+.navbar-toggler-right {
+  position: absolute;
+  right: $navbar-padding-x;
+}
 
-.navbar-nav {
-  flex-grow: 10; // high number to force alignment
+// Generate series of `.navbar-toggleable-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-toggleable {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-  .nav-link {
-    display: block;
-    padding-top: .425rem;
-    padding-bottom: .425rem;
+    &#{$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($next) {
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+
+        .navbar-nav {
+          flex-direction: row;
+
+          .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+          }
+        }
+
+        // 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
+
+        .navbar-toggler {
+          display: none;
+        }
+      }
+    }
   }
 }
 
 
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
 // Dark links against a light background
 .navbar-light {
   .navbar-brand,
@@ -178,10 +217,6 @@
     background-image: $navbar-light-toggler-bg;
   }
 
-  .navbar-divider {
-    background-color: rgba(0,0,0,.075);
-  }
-
   .navbar-text {
     color: $navbar-light-color;
   }
@@ -227,71 +262,7 @@
     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 {
-  @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($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;
-        }
-      }
-    }
-  }
-}
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 86b489a48..1b6363405 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -130,12 +130,12 @@
 // Offset the popover to account for the popover arrow
 .popover-title {
   padding: $popover-title-padding-y $popover-title-padding-x;
-  margin: 0; // reset heading margin
+  margin-bottom: 0; // Reset the default from Reboot
   font-size: $font-size-base;
   background-color: $popover-title-bg;
   border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
-  $offset-border-width: ($border-width / $font-size-root);
-  @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
+  $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
+  @include border-top-radius($offset-border-width);
 
   &:empty {
     display: none;
diff --git a/scss/_print.scss b/scss/_print.scss
index e77ac1dba..e20219a38 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -95,12 +95,6 @@
     .navbar {
       display: none;
     }
-    .btn,
-    .dropup > .btn {
-      > .caret {
-        border-top-color: #000 !important;
-      }
-    }
     .badge {
       border: $border-width solid #000;
     }
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 800138cdc..02e4c3bd2 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,103 +1,32 @@
-//
 // Progress animations
-//
-
 @keyframes progress-bar-stripes {
-  from { background-position: $spacer-y 0; }
+  from { background-position: $progress-height 0; }
   to { background-position: 0 0; }
 }
 
-
-//
 // Basic progress bar
-//
-
 .progress {
-  display: block;
-  width: 100%;
-  height: $spacer-y; // todo: make a new var for this
-  margin-bottom: $spacer-y;
+  display: flex;
   overflow: hidden; // force rounded corners by cropping it
-}
-.progress[value] {
-  // Set overall background
+  font-size: $progress-font-size;
+  line-height: $progress-height;
+  text-align: center;
   background-color: $progress-bg;
-  // Remove Firefox and Opera border
-  border: 0;
-  // Reset the default appearance
-  appearance: none;
-  // Set overall border radius
   @include border-radius($progress-border-radius);
 }
-
-// Filled-in portion of the bar
-.progress[value]::-ms-fill {
-  background-color: $progress-bar-color;
-  // Remove right-hand border of value bar from IE10+/Edge
-  border: 0;
-}
-.progress[value]::-moz-progress-bar {
-  background-color: $progress-bar-color;
-}
-.progress[value]::-webkit-progress-value {
-  background-color: $progress-bar-color;
+.progress-bar {
+  height: $progress-height;
+  color: $progress-bar-color;
+  background-color: $progress-bar-bg;
 }
 
-// Unfilled portion of the bar
-.progress[value]::-webkit-progress-bar {
-  background-color: $progress-bg;
-  @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 box-shadow($progress-box-shadow);
-}
-
-
-//
 // Striped
-//
-
-.progress-striped[value]::-webkit-progress-value {
+.progress-bar-striped {
   @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-moz-progress-bar {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-ms-fill {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
+  background-size: $progress-height $progress-height;
 }
 
-
-//
 // Animated
-//
-
-.progress-animated[value]::-webkit-progress-value {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-.progress-animated[value]::-moz-progress-bar {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-
-//
-// Variations
-//
-
-.progress-success {
-  @include progress-variant($progress-bar-success-bg);
-}
-.progress-info {
-  @include progress-variant($progress-bar-info-bg);
-}
-.progress-warning {
-  @include progress-variant($progress-bar-warning-bg);
-}
-.progress-danger {
-  @include progress-variant($progress-bar-danger-bg);
+.progress-bar-animated {
+  animation: progress-bar-stripes $progress-bar-animation-timing;
 }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index e90d7cd3b..557829f25 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -55,8 +55,10 @@ html {
 //
 
 html {
-  // Sets a specific default `font-size` for user with `rem` type scales.
-  font-size: $font-size-root;
+  // We assume no initial pixel `font-size` for accessibility reasons. This
+  // allows web visitors to customize their browser default font-size, making
+  // your project more inclusive and accessible to everyone.
+
   // As a side-effect of setting the @viewport above,
   // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
   // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
@@ -65,12 +67,12 @@ html {
   // 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);
 }
 
 body {
-  // Make the `body` use the `font-size-root`
   font-family: $font-family-base;
   font-size: $font-size-base;
   font-weight: $font-weight-base;
@@ -166,10 +168,6 @@ a {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
-
-  &:focus {
-    @include tab-focus();
-  }
 }
 
 // And undo these styles for placeholder links/named anchors (without href)
@@ -188,7 +186,7 @@ a:not([href]):not([tabindex]) {
   }
 
   &:focus {
-    outline: none;
+    outline: 0;
   }
 }
 
diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index 244321959..d3362b6fd 100644
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -3,10 +3,15 @@
 .embed-responsive {
   position: relative;
   display: block;
-  height: 0;
+  width: 100%;
   padding: 0;
   overflow: hidden;
 
+  &::before {
+    display: block;
+    content: "";
+  }
+
   .embed-responsive-item,
   iframe,
   embed,
@@ -23,17 +28,25 @@
 }
 
 .embed-responsive-21by9 {
-  padding-bottom: percentage(9 / 21);
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
 }
 
 .embed-responsive-16by9 {
-  padding-bottom: percentage(9 / 16);
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
 }
 
 .embed-responsive-4by3 {
-  padding-bottom: percentage(3 / 4);
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
 }
 
 .embed-responsive-1by1 {
-  padding-bottom: percentage(1 / 1);
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index e6894cfed..47be2c508 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -151,46 +151,3 @@
     border: 0;
   }
 }
-
-
-.table-reflow {
-  thead {
-    float: left;
-  }
-
-  tbody {
-    display: block;
-    white-space: nowrap;
-  }
-
-  th,
-  td {
-    border-top: $table-border-width solid $table-border-color;
-    border-left: $table-border-width solid $table-border-color;
-
-    &:last-child {
-      border-right: $table-border-width solid $table-border-color;
-    }
-  }
-
-  thead,
-  tbody,
-  tfoot {
-    &:last-child {
-      tr:last-child th,
-      tr:last-child td {
-        border-bottom: $table-border-width solid $table-border-color;
-      }
-    }
-  }
-
-  tr {
-    float: left;
-
-    th,
-    td {
-      display: block !important;
-      border: $table-border-width solid $table-border-color;
-    }
-  }
-}
diff --git a/scss/_type.scss b/scss/_type.scss
index cb4a035fc..13a64b06f 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -27,18 +27,22 @@ h6, .h6 { font-size: $font-size-h6; }
 .display-1 {
   font-size: $display1-size;
   font-weight: $display1-weight;
+  line-height: $display-line-height;
 }
 .display-2 {
   font-size: $display2-size;
   font-weight: $display2-weight;
+  line-height: $display-line-height;
 }
 .display-3 {
   font-size: $display3-size;
   font-weight: $display3-weight;
+  line-height: $display-line-height;
 }
 .display-4 {
   font-size: $display4-size;
   font-weight: $display4-weight;
+  line-height: $display-line-height;
 }
 
 
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c63e50600..7d08ff2f8 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -5,7 +5,9 @@
 @import "utilities/display";
 @import "utilities/flex";
 @import "utilities/float";
+@import "utilities/position";
 @import "utilities/screenreaders";
+@import "utilities/sizing";
 @import "utilities/spacing";
 @import "utilities/text";
 @import "utilities/visibility";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 948ac0354..36dc429c8 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -249,10 +249,7 @@ $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;
 
-// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
-$font-size-root: 16px !default;
-
-$font-size-base: 1rem !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:   1.25rem !default;
 $font-size-sm:   .875rem !default;
 $font-size-xs:   .75rem !default;
@@ -270,22 +267,23 @@ $font-size-h4: 1.5rem !default;
 $font-size-h5: 1.25rem !default;
 $font-size-h6: 1rem !default;
 
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
-
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-
 $headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family:   inherit !default;
 $headings-font-weight:   500 !default;
 $headings-line-height:   1.1 !default;
 $headings-color:         inherit !default;
 
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight:     300 !default;
+$display2-weight:     300 !default;
+$display3-weight:     300 !default;
+$display4-weight:     300 !default;
+$display-line-height: $headings-line-height !default;
+
 $lead-font-size:   1.25rem !default;
 $lead-font-weight: 300 !default;
 
@@ -328,7 +326,6 @@ $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;
@@ -592,14 +589,14 @@ $dropdown-header-color:          $gray-light !default;
 // of components dependent on the z-axis and are designed to all work together.
 
 $zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:            1000 !default;
-$zindex-dropdown:          1000 !default;
-$zindex-navbar-fixed:      1030 !default;
-$zindex-navbar-sticky:     1030 !default;
-$zindex-modal-backdrop:    1040 !default;
-$zindex-modal:             1050 !default;
-$zindex-popover:           1060 !default;
-$zindex-tooltip:           1070 !default;
+$zindex-navbar:             1000 !default;
+$zindex-dropdown:           1000 !default;
+$zindex-fixed:              1030 !default;
+$zindex-sticky:             1030 !default;
+$zindex-modal-backdrop:     1040 !default;
+$zindex-modal:              1050 !default;
+$zindex-popover:            1060 !default;
+$zindex-tooltip:            1070 !default;
 
 
 // Navbar
@@ -610,8 +607,6 @@ $navbar-padding-y:                  ($spacer / 2) !default;
 
 $navbar-brand-padding-y:            .25rem !default;
 
-$navbar-divider-padding-y:          .425rem !default;
-
 $navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-padding-y:           .25rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
@@ -852,17 +847,14 @@ $alert-danger-border:         $state-danger-border !default;
 
 // Progress bars
 
-$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($black,.1) !default;
-
-$progress-bar-bg:             $brand-primary !default;
-$progress-bar-success-bg:     $brand-success !default;
-$progress-bar-warning-bg:     $brand-warning !default;
-$progress-bar-danger-bg:      $brand-danger !default;
-$progress-bar-info-bg:        $brand-info !default;
-
+$progress-height:               1rem !default;
+$progress-font-size:            .75rem !default;
+$progress-bg:                   $gray-lighter !default;
+$progress-border-radius:        $border-radius !default;
+$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
+$progress-bar-color:            $white !default;
+$progress-bar-bg:               $brand-primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
 
 // List group
 
@@ -946,6 +938,7 @@ $carousel-transition:           transform .6s ease-in-out !default;
 
 // Close
 
+$close-font-size:             $font-size-base * 1.5 !default;
 $close-font-weight:           $font-weight-bold !default;
 $close-color:                 $black !default;
 $close-text-shadow:           0 1px 0 $white !default;
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 97a9417d4..8cce876de 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,7 +1,7 @@
 /*!
  * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
- * Copyright 2011-2016 The Bootstrap Authors
- * Copyright 2011-2016 Twitter, Inc.
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 77206b9a5..9fa44b647 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,4 +1,4 @@
-// Tags
+// Badges
 
 @mixin badge-variant($color) {
   background-color: $color;
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index ebe797aa7..8bfd97c4d 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -11,7 +11,6 @@
 // Vertical gradient, from top to bottom
 //
 // 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-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;
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 23b11dbed..9cd8c7bbb 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,6 +3,7 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-container($gutters: $grid-gutter-widths) {
+  position: relative;
   margin-left: auto;
   margin-right: auto;
 
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
deleted file mode 100644
index 567467986..000000000
--- a/scss/mixins/_progress.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Progress bars
-
-@mixin progress-variant($color) {
-  &[value]::-webkit-progress-value {
-    background-color: $color;
-  }
-
-  &[value]::-moz-progress-bar {
-    background-color: $color;
-  }
-
-  // IE10+, Microsoft Edge
-  &[value]::-ms-fill {
-    background-color: $color;
-  }
-}
diff --git a/scss/mixins/_tab-focus.scss b/scss/mixins/_tab-focus.scss
deleted file mode 100644
index f16ed6428..000000000
--- a/scss/mixins/_tab-focus.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// WebKit-style focus
-
-@mixin tab-focus() {
-  // WebKit-specific. Other browsers will keep their default outline style.
-  // (Initially tried to also force default via `outline: initial`,
-  // but that seems to erroneously remove the outline in Firefox altogether.)
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index b2fc976c1..ae942a6fb 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -2,7 +2,6 @@
 // Display utilities
 //
 
-
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss
new file mode 100644
index 000000000..2cf08bfa0
--- /dev/null
+++ b/scss/utilities/_position.scss
@@ -0,0 +1,23 @@
+// Positioning
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: $zindex-sticky;
+}
diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss
new file mode 100644
index 000000000..a7dc3e49b
--- /dev/null
+++ b/scss/utilities/_sizing.scss
@@ -0,0 +1,10 @@
+// Width and height
+
+@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; }
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 208212d52..6056e2b7e 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,14 +1,3 @@
-// Width and height
-
-@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
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -52,13 +41,3 @@
     }
   }
 }
-
-// Positioning
-
-.pos-f-t {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-}