Merge pull request #1 from twbs/v4-dev

updating fork of BS to v4-beta1

77 files changed, 2185 insertions, 3976 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
deleted file mode 100644
index 2f5dc20e1..000000000
--- a/scss/.scss-lint.yml
+++ /dev/null
@@ -1,545 +0,0 @@
-# Default application configuration that all configurations inherit from.
-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
-# installed)
-plugin_gems: []
-
-# Default severity of all linters.
-severity: warning
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BemDepth:
-    enabled: false
-    max_elements: 1
-
-  BorderZero:
-    enabled: true
-    convention: zero # or `none`
-    exclude:
-      - _normalize.scss
-
-  ChainedClasses:
-    enabled: false
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    exclude:
-      - _normalize.scss
-      - bootstrap.scss
-    style: silent
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DisableLinterReason:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-
-  ElsePlacement:
-    enabled: true
-    style: same_line # or 'new_line'
-
-  EmptyLineBetweenBlocks:
-    enabled: false
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  ExtendDirective:
-    enabled: false
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short # or 'long'
-
-  HexNotation:
-    enabled: true
-    style: lowercase # or 'uppercase'
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: true
-
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    allow_non_nested_indentation: false
-    character: space # or 'tab'
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero # or 'include_zero'
-    exclude:
-      - _normalize.scss
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: true
-    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
-
-  NestingDepth:
-    enabled: true
-    max_depth: 4
-    ignore_parent_selectors: false
-
-  PlaceholderInExtend:
-    enabled: false
-
-  PropertyCount:
-    enabled: false
-    include_nested: false
-    max_properties: 10
-
-  PropertySortOrder:
-    enabled: true
-    ignore_unspecified: false
-    min_properties: 2
-    separate_groups: false
-    exclude:
-      - _normalize.scss
-    order:
-      - position
-      - top
-      - right
-      - bottom
-      - left
-      - z-index
-      - -webkit-box-sizing
-      - -moz-box-sizing
-      - box-sizing
-      - display
-      - flex
-      - flex-align
-      - flex-basis
-      - flex-direction
-      - flex-wrap
-      - flex-flow
-      - flex-grow
-      - flex-order
-      - flex-pack
-      - float
-      - width
-      - min-width
-      - max-width
-      - height
-      - min-height
-      - max-height
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
-      - overflow
-      - overflow-x
-      - overflow-y
-      - -webkit-overflow-scrolling
-      - -ms-overflow-x
-      - -ms-overflow-y
-      - -ms-overflow-style
-      - clip
-      - clear
-      - font
-      - font-family
-      - font-size
-      - font-style
-      - font-weight
-      - font-variant
-      - font-size-adjust
-      - font-stretch
-      - font-effect
-      - font-emphasize
-      - font-emphasize-position
-      - font-emphasize-style
-      - font-smooth
-      - -webkit-hyphens
-      - -moz-hyphens
-      - hyphens
-      - line-height
-      - color
-      - text-align
-      - -webkit-text-align-last
-      - -moz-text-align-last
-      - -ms-text-align-last
-      - text-align-last
-      - text-emphasis
-      - text-emphasis-color
-      - text-emphasis-style
-      - text-emphasis-position
-      - text-decoration
-      - text-indent
-      - text-justify
-      - text-outline
-      - -ms-text-overflow
-      - text-overflow
-      - text-overflow-ellipsis
-      - text-overflow-mode
-      - text-shadow
-      - text-transform
-      - text-wrap
-      - -webkit-text-size-adjust
-      - -ms-text-size-adjust
-      - letter-spacing
-      - -ms-word-break
-      - word-break
-      - word-spacing
-      - -ms-word-wrap
-      - word-wrap
-      - overflow-wrap
-      - -moz-tab-size
-      - -o-tab-size
-      - tab-size
-      - white-space
-      - vertical-align
-      - list-style
-      - list-style-position
-      - list-style-type
-      - list-style-image
-      - pointer-events
-      - -ms-touch-action
-      - touch-action
-      - cursor
-      - visibility
-      - zoom
-      - table-layout
-      - empty-cells
-      - caption-side
-      - border-spacing
-      - border-collapse
-      - content
-      - quotes
-      - counter-reset
-      - counter-increment
-      - resize
-      - -webkit-user-select
-      - -moz-user-select
-      - -ms-user-select
-      - -o-user-select
-      - user-select
-      - nav-index
-      - nav-up
-      - nav-right
-      - nav-down
-      - nav-left
-      - background
-      - background-color
-      - background-image
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
-      - filter
-      - background-repeat
-      - background-attachment
-      - background-position
-      - background-position-x
-      - background-position-y
-      - -webkit-background-clip
-      - -moz-background-clip
-      - background-clip
-      - background-origin
-      - -webkit-background-size
-      - -moz-background-size
-      - -o-background-size
-      - background-size
-      - border
-      - border-color
-      - border-style
-      - border-width
-      - border-top
-      - border-top-color
-      - border-top-style
-      - border-top-width
-      - border-right
-      - border-right-color
-      - border-right-style
-      - border-right-width
-      - border-bottom
-      - border-bottom-color
-      - border-bottom-style
-      - border-bottom-width
-      - border-left
-      - border-left-color
-      - border-left-style
-      - border-left-width
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-right-radius
-      - border-bottom-left-radius
-      - -webkit-border-image
-      - -moz-border-image
-      - -o-border-image
-      - border-image
-      - -webkit-border-image-source
-      - -moz-border-image-source
-      - -o-border-image-source
-      - border-image-source
-      - -webkit-border-image-slice
-      - -moz-border-image-slice
-      - -o-border-image-slice
-      - border-image-slice
-      - -webkit-border-image-width
-      - -moz-border-image-width
-      - -o-border-image-width
-      - border-image-width
-      - -webkit-border-image-outset
-      - -moz-border-image-outset
-      - -o-border-image-outset
-      - border-image-outset
-      - -webkit-border-image-repeat
-      - -moz-border-image-repeat
-      - -o-border-image-repeat
-      - border-image-repeat
-      - outline
-      - outline-width
-      - outline-style
-      - outline-color
-      - outline-offset
-      - -webkit-box-shadow
-      - -moz-box-shadow
-      - box-shadow
-      - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
-      - opacity
-      - -ms-interpolation-mode
-      - -webkit-transition
-      - -moz-transition
-      - -ms-transition
-      - -o-transition
-      - transition
-      - -webkit-transition-delay
-      - -moz-transition-delay
-      - -ms-transition-delay
-      - -o-transition-delay
-      - transition-delay
-      - -webkit-transition-timing-function
-      - -moz-transition-timing-function
-      - -ms-transition-timing-function
-      - -o-transition-timing-function
-      - transition-timing-function
-      - -webkit-transition-duration
-      - -moz-transition-duration
-      - -ms-transition-duration
-      - -o-transition-duration
-      - transition-duration
-      - -webkit-transition-property
-      - -moz-transition-property
-      - -ms-transition-property
-      - -o-transition-property
-      - transition-property
-      - -webkit-transform
-      - -moz-transform
-      - -ms-transform
-      - -o-transform
-      - transform
-      - -webkit-transform-origin
-      - -moz-transform-origin
-      - -ms-transform-origin
-      - -o-transform-origin
-      - transform-origin
-      - -webkit-animation
-      - -moz-animation
-      - -ms-animation
-      - -o-animation
-      - animation
-      - -webkit-animation-name
-      - -moz-animation-name
-      - -ms-animation-name
-      - -o-animation-name
-      - animation-name
-      - -webkit-animation-duration
-      - -moz-animation-duration
-      - -ms-animation-duration
-      - -o-animation-duration
-      - animation-duration
-      - -webkit-animation-play-state
-      - -moz-animation-play-state
-      - -ms-animation-play-state
-      - -o-animation-play-state
-      - animation-play-state
-      - -webkit-animation-timing-function
-      - -moz-animation-timing-function
-      - -ms-animation-timing-function
-      - -o-animation-timing-function
-      - animation-timing-function
-      - -webkit-animation-delay
-      - -moz-animation-delay
-      - -ms-animation-delay
-      - -o-animation-delay
-      - animation-delay
-      - -webkit-animation-iteration-count
-      - -moz-animation-iteration-count
-      - -ms-animation-iteration-count
-      - -o-animation-iteration-count
-      - animation-iteration-count
-      - -webkit-animation-direction
-      - -moz-animation-direction
-      - -ms-animation-direction
-      - -o-animation-direction
-
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-    disabled_properties: []
-
-  PropertyUnits:
-    enabled: true
-    global: [
-      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
-      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
-      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
-      'deg', 'grad', 'rad', 'turn',            # Angle
-      'ms', 's',                               # Duration
-      'Hz', 'kHz',                             # Frequency
-      'dpi', 'dpcm', 'dppx',                   # Resolution
-      '%']                                     # Other
-    properties: {}
-
-  PseudoElement:
-    enabled: true
-
-  QualifyingElement:
-    enabled: true
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  SelectorDepth:
-    enabled: true
-    max_depth: 4
-
-  SelectorFormat:
-    enabled: false
-    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
-
-  Shorthand:
-    enabled: true
-    allowed_shorthands: [1, 2, 3, 4]
-
-  SingleLinePerProperty:
-    enabled: false
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: false
-
-  SpaceAfterComma:
-    enabled: false
-    style: one_space # or 'no_space', or 'at_least_one_space'
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-    style: one_space # or 'at_least_one_space', or 'no_space'
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space # or 'new_line'
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes # or double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  TransitionAll:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VariableForProperty:
-    enabled: false
-    properties: []
-
-  VendorPrefix:
-    enabled: true
-    identifier_list: base
-    additional_identifiers: []
-    excluded_identifiers: []
-    exclude:
-      - _normalize.scss
-
-  ZeroUnit:
-    enabled: true
-
-  Compass::*:
-    enabled: false
diff --git a/scss/_alert.scss b/scss/_alert.scss
index d9b4e9b27..3dfd13f56 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -41,15 +41,8 @@
 //
 // Generate contextual modifier classes for colorizing the alert.
 
-.alert-success {
-  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
-}
-.alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
-}
-.alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
-}
-.alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
+  }
 }
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 39635fcc7..8a7626344 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -15,30 +15,19 @@
   vertical-align: baseline;
   @include border-radius();
 
-  // Empty tags collapse automatically
+  // Empty badges collapse automatically
   &:empty {
     display: none;
   }
 }
 
-// Quick fix for tags in buttons
+// 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 tags
+// Pill badges
 //
 // Make them extra rounded with a modifier to replace v3's badges.
 
@@ -50,28 +39,10 @@ a.badge {
 
 // Colors
 //
-// Contextual variations (linked tags get darker on :hover).
-
-.badge-default {
-  @include badge-variant($badge-default-bg);
-}
-
-.badge-primary {
-  @include badge-variant($badge-primary-bg);
-}
+// Contextual variations (linked badges get darker on :hover).
 
-.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);
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
 }
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 1a09bba20..52fadec69 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,6 +1,6 @@
 .breadcrumb {
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $spacer-y;
+  margin-bottom: $breadcrumb-margin-bottom;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 0e63ecc54..406350682 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -4,28 +4,26 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
-    float: left;
-    margin-bottom: 0;
+    flex: 0 1 auto;
 
-    // Bring the "active" button to the front
+    // Bring the hover, focused, and "active" buttons to the front 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,
@@ -36,18 +34,12 @@
 
 // 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;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 
-  .btn-group,
   .input-group {
-    float: left;
-  }
-
-  > .btn,
-  > .btn-group,
-  > .input-group {
-    margin-left: $btn-toolbar-margin;
+    width: auto;
   }
 }
 
@@ -73,25 +65,22 @@
 .btn-group > .btn-group {
   float: left;
 }
+
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     @include border-right-radius(0);
   }
 }
+
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-left-radius(0);
 }
 
-// On active and open, don't show outline
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
 
 // Sizing
 //
@@ -106,8 +95,8 @@
 //
 
 .btn + .dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
+  padding-right: $input-btn-padding-x * .75;
+  padding-left: $input-btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
@@ -115,19 +104,19 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $input-btn-padding-x-sm * .75;
+  padding-left: $input-btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $input-btn-padding-x-lg * .75;
+  padding-left: $input-btn-padding-x-lg * .75;
 }
 
 
 // The clickable button for toggling the menu
-// Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle {
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
   @include box-shadow($btn-active-box-shadow);
 
   // Show no shadow for `.btn-link` since it has no other button styles.
@@ -137,43 +126,18 @@
 }
 
 
-// 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
 //
 
 .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();
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 
-    > .btn {
-      float: none;
-    }
+  .btn,
+  .btn-group {
+    width: 100%;
   }
 
   > .btn + .btn,
@@ -183,30 +147,35 @@
     margin-top: -$input-btn-border-width;
     margin-left: 0;
   }
-}
 
-.btn-group-vertical > .btn {
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
+  > .btn {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
   }
+
   &:first-child:not(:last-child) {
     @include border-bottom-radius(0);
   }
+
   &:last-child:not(:first-child) {
     @include border-top-radius(0);
   }
-}
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-.btn-group-vertical > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
-    @include border-bottom-radius(0);
+
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
+    border-radius: 0;
+  }
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-bottom-radius(0);
+    }
+  }
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+    @include border-top-radius(0);
   }
-}
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-top-radius(0);
 }
 
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 3d5089c4f..b4c28896b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -7,45 +7,36 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
   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 button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
+  @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
@@ -59,43 +50,20 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-.btn-primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-}
-.btn-secondary {
-  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
-}
-.btn-info {
-  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-}
-.btn-success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-}
-.btn-warning {
-  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-}
-.btn-danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
 }
 
-// Remove all backgrounds
-.btn-outline-primary {
-  @include button-outline-variant($btn-primary-bg);
-}
-.btn-outline-secondary {
-  @include button-outline-variant($btn-secondary-border);
-}
-.btn-outline-info {
-  @include button-outline-variant($btn-info-bg);
-}
-.btn-outline-success {
-  @include button-outline-variant($btn-success-bg);
-}
-.btn-outline-warning {
-  @include button-outline-variant($btn-warning-bg);
-}
-.btn-outline-danger {
-  @include button-outline-variant($btn-danger-bg);
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @if $color == "light" {
+      @include button-outline-variant($value, $gray-900);
+    } @else {
+      @include button-outline-variant($value, $white);
+    }
+  }
 }
 
 
@@ -107,34 +75,28 @@ fieldset[disabled] a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
+  background-color: transparent;
   border-radius: 0;
 
-  &,
-  &:active,
-  &.active,
-  &:disabled {
-    background-color: transparent;
-    @include box-shadow(none);
-  }
-  &,
-  &:focus,
-  &:active {
-    border-color: transparent;
-  }
   @include hover {
-    border-color: transparent;
-  }
-  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
     background-color: transparent;
+    border-color: transparent;
   }
-  &:disabled {
-    @include hover-focus {
-      color: $btn-link-disabled-color;
-      text-decoration: none;
-    }
+
+  &:focus,
+  &.focus {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
   }
+
+  // No need for an active state here
 }
 
 
@@ -143,12 +105,11 @@ fieldset[disabled] a.btn {
 //
 
 .btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
+  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
 }
+
 .btn-sm {
-  // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
+  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
 }
 
 
diff --git a/scss/_card.scss b/scss/_card.scss
index c3b931518..b5bc26b15 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -4,17 +4,20 @@
 
 .card {
   position: relative;
-  display: block;
-  margin-bottom: $card-spacer-y;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
   background-color: $card-bg;
+  background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
 
-.card-block {
-  @if (not $enable-flex) {
-    @include clearfix;
-  }
+.card-body {
+  // 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;
 }
 
@@ -31,14 +34,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;
@@ -69,29 +64,23 @@
 //
 
 .card-header {
-  @if (not $enable-flex) {
-    @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;
 
   &:first-child {
-    @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
 }
 
 .card-footer {
-  @if (not $enable-flex) {
-    @include clearfix;
-  }
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
   }
 }
 
@@ -112,70 +101,7 @@
   margin-left: -($card-spacer-x / 2);
 }
 
-
-//
-// Background variations
-//
-
-.card-primary {
-  @include card-variant($brand-primary, $brand-primary);
-}
-.card-success {
-  @include card-variant($brand-success, $brand-success);
-}
-.card-info {
-  @include card-variant($brand-info, $brand-info);
-}
-.card-warning {
-  @include card-variant($brand-warning, $brand-warning);
-}
-.card-danger {
-  @include card-variant($brand-danger, $brand-danger);
-}
-
-// Remove all backgrounds
-.card-outline-primary {
-  @include card-outline-variant($btn-primary-bg);
-}
-.card-outline-secondary {
-  @include card-outline-variant($btn-secondary-border);
-}
-.card-outline-info {
-  @include card-outline-variant($btn-info-bg);
-}
-.card-outline-success {
-  @include card-outline-variant($btn-success-bg);
-}
-.card-outline-warning {
-  @include card-outline-variant($btn-warning-bg);
-}
-.card-outline-danger {
-  @include card-outline-variant($btn-danger-bg);
-}
-
-//
-// Inverse text within a card for use with dark backgrounds
-//
-
-.card-inverse {
-  @include card-inverse;
-}
-
-//
-// Blockquote
-//
-
-.card-blockquote {
-  padding: 0;
-  margin-bottom: 0;
-  border-left: 0;
-}
-
 // Card image
-.card-img {
-  // margin: -1.325rem;
-  @include border-radius($card-border-radius-inner);
-}
 .card-img-overlay {
   position: absolute;
   top: 0;
@@ -185,90 +111,70 @@
   padding: $card-img-overlay-padding;
 }
 
-
+.card-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($card-inner-border-radius);
+}
 
 // Card image caps
 .card-img-top {
-  @include border-top-radius($card-border-radius-inner);
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-top-radius($card-inner-border-radius);
 }
+
 .card-img-bottom {
-  @include border-bottom-radius($card-border-radius-inner);
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-bottom-radius($card-inner-border-radius);
 }
 
 
-// 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 {
-      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;
-      }
-    }
+.card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $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-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
+
+    .card {
+      display: flex;
+      flex: 1 0 0%;
+      flex-direction: column;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $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;
-    }
+.card-group {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    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-bottom: 0;
         margin-left: 0;
         border-left: 0;
       }
@@ -285,6 +191,7 @@
             border-bottom-right-radius: 0;
           }
         }
+
         &:last-child {
           @include border-left-radius(0);
 
@@ -311,17 +218,21 @@
 
 
 //
-// Card
+// Columns
 //
 
-@include media-breakpoint-up(sm) {
-  .card-columns {
-    column-count: 3;
-    column-gap: $card-columns-sm-up-column-gap;
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
 
     .card {
       display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let them exceed the column width
+      width: 100%; // Don't let their width change
     }
   }
 }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 09f6ea73e..8aa14ace7 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -7,77 +7,55 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+}
 
-  > .carousel-item {
-    position: relative;
-    display: none;
-    @include transition(left .6s ease-in-out);
-
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @extend .img-fluid;
-      line-height: 1;
-    }
+.carousel-item {
+  position: relative;
+  display: none;
+  align-items: center;
+  width: 100%;
+  @include transition($carousel-transition);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
 
-    // CSS3 transforms when supported by the browser
-    @include if-supports-3d-transforms() {
-      @include 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);
-      }
-    }
-  }
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
 
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
 
-  > .active {
-    left: 0;
-  }
+// CSS3 transforms when supported by the browser
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translateX(0);
 
-  > .next,
-  > .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
+  @supports (transform-style: preserve-3d) {
+    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: translateX(100%);
 
-  > .active.left {
-    left: -100%;
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(100%, 0, 0);
   }
-  > .active.right {
-    left: 100%;
+}
+
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translateX(-100%);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(-100%, 0, 0);
   }
 }
 
@@ -86,30 +64,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,79 +87,82 @@
     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;
 }
 
 
 // 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 {
   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 <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;
   list-style: none;
 
   li {
-    display: inline-block;
-    width: $carousel-indicator-size;
-    height: $carousel-indicator-size;
-    margin: 1px;
+    position: relative;
+    flex: 0 1 auto;
+    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;
   }
 }
@@ -197,7 +170,7 @@
 
 // Optional captions
 //
-// Hidden by default for smaller viewports.
+//
 
 .carousel-caption {
   position: absolute;
@@ -209,45 +182,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 5a92430a4..f18149051 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;
@@ -10,7 +10,6 @@
   @include hover-focus {
     color: $close-color;
     text-decoration: none;
-    cursor: pointer;
     opacity: .75;
   }
 }
@@ -23,7 +22,6 @@
 // scss-lint:disable QualifyingElement
 button.close {
   padding: 0;
-  cursor: pointer;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
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 7c58a0cb9..1bf268b83 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable PropertyCount
+// scss-lint:disable PropertyCount, VendorPrefix
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
@@ -11,14 +11,10 @@
 
 .custom-control {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
-  cursor: pointer;
-
-  + .custom-control {
-    margin-left: $custom-control-spacer-x;
-  }
+  margin-right: $custom-control-spacer-x;
 }
 
 .custom-control-input {
@@ -27,31 +23,29 @@
   opacity: 0;
 
   &:checked ~ .custom-control-indicator {
-    color: $custom-control-checked-indicator-color;
-    background-color: $custom-control-checked-indicator-bg;
-    @include box-shadow($custom-control-checked-indicator-box-shadow);
+    color: $custom-control-indicator-checked-color;
+    background-color: $custom-control-indicator-checked-bg;
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
   &:focus ~ .custom-control-indicator {
     // the mixin is not used here to make sure there is feedback
-    box-shadow: $custom-control-focus-indicator-box-shadow;
+    box-shadow: $custom-control-indicator-focus-box-shadow;
   }
 
   &:active ~ .custom-control-indicator {
-    color: $custom-control-active-indicator-color;
-    background-color: $custom-control-active-indicator-bg;
-    @include box-shadow($custom-control-active-indicator-box-shadow);
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
   &:disabled {
     ~ .custom-control-indicator {
-      cursor: $custom-control-disabled-cursor;
-      background-color: $custom-control-disabled-indicator-bg;
+      background-color: $custom-control-indicator-disabled-bg;
     }
 
     ~ .custom-control-description {
-      color: $custom-control-disabled-description-color;
-      cursor: $custom-control-disabled-cursor;
+      color: $custom-control-description-disabled-color;
     }
   }
 }
@@ -82,17 +76,17 @@
 
 .custom-checkbox {
   .custom-control-indicator {
-    @include border-radius($custom-checkbox-radius);
+    @include border-radius($custom-checkbox-indicator-border-radius);
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-checked-icon;
+    background-image: $custom-checkbox-indicator-icon-checked;
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: $custom-checkbox-indeterminate-bg;
-    background-image: $custom-checkbox-indeterminate-icon;
-    @include box-shadow($custom-checkbox-indeterminate-box-shadow);
+    background-color: $custom-checkbox-indicator-indeterminate-bg;
+    background-image: $custom-checkbox-indicator-icon-indeterminate;
+    @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
   }
 }
 
@@ -102,11 +96,11 @@
 
 .custom-radio {
   .custom-control-indicator {
-    border-radius: $custom-radio-radius;
+    border-radius: $custom-radio-indicator-border-radius;
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-checked-icon;
+    background-image: $custom-radio-indicator-icon-checked;
   }
 }
 
@@ -117,9 +111,11 @@
 // set. Use these optional classes to tweak the layout.
 
 .custom-controls-stacked {
+  display: flex;
+  flex-direction: column;
+
   .custom-control {
-    float: left;
-    clear: left;
+    margin-bottom: $custom-control-spacer-y;
 
     + .custom-control {
       margin-left: 0;
@@ -133,26 +129,25 @@
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
 //
-// Includes hacks for IE9 (noted by ` \9`), which may apply to other versions of
-// IE, but not with any adverse affects.
 
 .custom-select {
   display: inline-block;
   max-width: 100%;
-  $select-border-width: ($border-width * 2);
-  height: calc(#{$input-height} - #{$select-border-width});
+  height: $input-height;
   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-clip: padding-box;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
-  @include border-radius($custom-select-border-radius);
-  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  @if $enable-rounded {
+    border-radius: $custom-select-border-radius;
+  } @else {
+    border-radius: 0;
+  }
+  appearance: none;
 
   &:focus {
     border-color: $custom-select-focus-border-color;
@@ -172,7 +167,6 @@
 
   &:disabled {
     color: $custom-select-disabled-color;
-    cursor: $cursor-disabled;
     background-color: $custom-select-disabled-bg;
   }
 
@@ -183,14 +177,10 @@
 }
 
 .custom-select-sm {
+  height: $custom-select-height-sm;
   padding-top: $custom-select-padding-y;
   padding-bottom: $custom-select-padding-y;
-  font-size: $custom-select-sm-font-size;
-
-  // &:not([multiple]) {
-  //   height: 26px;
-  //   min-height: 26px;
-  // }
+  font-size: $custom-select-font-size-sm;
 }
 
 
@@ -204,18 +194,17 @@
   max-width: 100%;
   height: $custom-file-height;
   margin-bottom: 0;
-  cursor: pointer;
 }
 
 .custom-file-input {
   min-width: $custom-file-width;
   max-width: 100%;
+  height: $custom-file-height;
   margin: 0;
-  filter: alpha(opacity = 0);
   opacity: 0;
 
   &:focus ~ .custom-file-control {
-    @include box-shadow($custom-file-focus-box-shadow);
+    box-shadow: $custom-file-focus-box-shadow;
   }
 }
 
@@ -226,35 +215,36 @@
   left: 0;
   z-index: 5;
   height: $custom-file-height;
-  padding: $custom-file-padding-x $custom-file-padding-y;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  overflow: hidden;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
+  pointer-events: none;
   user-select: none;
   background-color: $custom-file-bg;
+  background-clip: padding-box;
   border: $custom-file-border-width solid $custom-file-border-color;
   @include border-radius($custom-file-border-radius);
   @include box-shadow($custom-file-box-shadow);
 
   @each $lang, $text in map-get($custom-file-text, placeholder) {
-    &:lang(#{$lang})::after {
+    &:lang(#{$lang}):empty::after {
       content: $text;
     }
   }
 
   &::before {
     position: absolute;
-    top: -$custom-file-border-width;
-    right: -$custom-file-border-width;
-    bottom: -$custom-file-border-width;
+    top: 0;
+    right: 0;
     z-index: 6;
     display: block;
     height: $custom-file-height;
-    padding: $custom-file-padding-x $custom-file-padding-y;
+    padding: $custom-file-padding-y $custom-file-padding-x;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
     background-color: $custom-file-button-bg;
-    border: $custom-file-border-width solid $custom-file-border-color;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+    border-left: $custom-file-border-width solid $custom-file-border-color;
   }
 
   @each $lang, $text in map-get($custom-file-text, button-label) {
diff --git a/scss/_custom.scss b/scss/_custom.scss
deleted file mode 100644
index 88ccf202e..000000000
--- a/scss/_custom.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Bootstrap overrides
-//
-// Copy variables from `_variables.scss` to this file to override default values
-// without modifying source files.
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b287e2037..05e8b1652 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -10,21 +10,27 @@
     display: inline-block;
     width: 0;
     height: 0;
-    margin-left: $caret-width;
-    vertical-align: middle;
+    margin-left: $caret-width * .85;
+    vertical-align: $caret-width * .85;
     content: "";
     border-top: $caret-width solid;
     border-right: $caret-width solid transparent;
     border-left: $caret-width solid transparent;
   }
 
-  // Prevent the focus on the dropdown toggle when closing dropdowns
-  &:focus {
-    outline: 0;
+  &:empty::after {
+    margin-left: 0;
   }
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
   .dropdown-toggle {
     &::after {
       border-top: 0;
@@ -43,8 +49,8 @@
   float: left;
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y 0;
-  margin: $dropdown-margin-top 0 0; // override default ul
-  font-size: $font-size-base;
+  margin: $dropdown-spacer 0 0; // override default ul
+  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;
@@ -66,7 +72,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: 3px $dropdown-item-padding-x;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   clear: both;
   font-weight: $font-weight-normal;
   color: $dropdown-link-color;
@@ -81,60 +87,34 @@
     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;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
     }
   }
 }
 
 // Open state for the dropdown
-.active {
-  // Show the menu
-  > .dropdown-menu {
-    display: block;
-  }
-
+.show {
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;
   }
 }
 
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
+.dropdown-menu.show {
+  display: block;
 }
 
 // Dropdown section headers
@@ -146,35 +126,3 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
-
-// Backdrop to catch body clicks on mobile, etc.
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-dropdown-backdrop;
-}
-
-// 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;
-  }
-
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: $dropdown-margin-top;
-  }
-}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 87e549121..83d879737 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// scss-lint:disable QualifyingElement, VendorPrefix
 
 //
 // Textual form controls
@@ -9,9 +9,9 @@
   width: 100%;
   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   // height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $font-size-base;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@@ -29,7 +29,7 @@
   }
 
   @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 {
@@ -42,7 +42,7 @@
 
   // Placeholder
   &::placeholder {
-    color: $input-color-placeholder;
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -54,20 +54,15 @@
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
   &[readonly] {
-    background-color: $input-bg-disabled;
+    background-color: $input-disabled-bg;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
-
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
 }
 
 select.form-control {
   &:not([size]):not([multiple]) {
-    $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height} + #{$select-border-width});
+    height: $input-height;
   }
 
   &:focus::-ms-value {
@@ -95,20 +90,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-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-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-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-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-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -120,24 +115,25 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the legend text to
 // be the same size as regular labels, and to align with the form controls.
 .col-form-legend {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }
 
 
-// Static form control text
+// Readonly controls as plain text
 //
-// Apply class to an element to make any string of text align with labels in a
-// horizontal form layout.
-
-.form-control-static {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
-  line-height: $input-line-height;
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  line-height: $input-btn-line-height;
   border: solid transparent;
-  border-width: 1px 0;
+  border-width: $input-btn-border-width 0;
 
   &.form-control-sm,
   &.form-control-lg {
@@ -156,8 +152,9 @@ select.form-control {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  padding: $input-padding-y-sm $input-padding-x-sm;
+  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
@@ -168,8 +165,9 @@ select.form-control-sm {
 }
 
 .form-control-lg {
-  padding: $input-padding-y-lg $input-padding-x-lg;
+  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
@@ -191,7 +189,25 @@ select.form-control-lg {
 
 .form-text {
   display: block;
-  margin-top: ($spacer * .25);
+  margin-top: $form-text-margin-top;
+}
+
+
+// Form grid
+//
+// Special replacement for our grid system's `.row` for tighter form layouts.
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -5px;
+  margin-left: -5px;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: 5px;
+    padding-left: 5px;
+  }
 }
 
 
@@ -202,93 +218,68 @@ 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 {
       color: $text-muted;
-      cursor: $cursor-disabled;
     }
   }
 }
 
 .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;
-
-  &:only-child {
-    position: static;
-  }
+  margin-top: $form-check-input-margin-y;
+  margin-left: -$form-check-input-gutter;
 }
 
 // Radios and checkboxes on same line
 .form-check-inline {
   display: inline-block;
+  margin-right: $form-check-inline-margin-x;
 
   .form-check-label {
     vertical-align: middle;
   }
-
-  + .form-check-inline {
-    margin-left: .75rem;
-  }
 }
 
 
-// Form control feedback states
+// Form validation
 //
-// Apply contextual and semantic states to individual form controls.
-
-.form-control-feedback {
-  margin-top: ($spacer * .25);
-}
-
-.form-control-success,
-.form-control-warning,
-.form-control-danger {
-  padding-right: ($input-padding-x * 3);
-  background-repeat: no-repeat;
-  background-position: center right ($input-height / 4);
-  background-size: ($input-height / 2) ($input-height / 2);
-}
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server side validation.
 
-// Form validation states
-.has-success {
-  @include form-control-validation($brand-success);
-
-  .form-control-success {
-    background-image: $form-icon-success;
-  }
-}
-
-.has-warning {
-  @include form-control-validation($brand-warning);
-
-  .form-control-warning {
-    background-image: $form-icon-warning;
-  }
+.invalid-feedback {
+  display: none;
+  margin-top: .25rem;
+  font-size: .875rem;
+  color: $form-feedback-invalid-color;
 }
 
-.has-danger {
-  @include form-control-validation($brand-danger);
-
-  .form-control-danger {
-    background-image: $form-icon-danger;
-  }
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  width: 250px;
+  padding: .5rem;
+  margin-top: .1rem;
+  font-size: .875rem;
+  line-height: 1;
+  color: #fff;
+  background-color: rgba($form-feedback-invalid-color,.8);
+  border-radius: .2rem;
 }
 
+@include form-validation-state("valid", $form-feedback-valid-color);
+@include form-validation-state("invalid", $form-feedback-invalid-color);
 
 // Inline forms
 //
@@ -300,39 +291,32 @@ select.form-control-lg {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
-  @if $enable-flex {
-    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%;
-    }
+  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),
+  // so we force that here.
+  .form-check {
+    width: 100%;
   }
 
   // Kick in the inline
   @include media-breakpoint-up(sm) {
     label {
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+      display: flex;
+      align-items: center;
+      justify-content: center;
       margin-bottom: 0;
     }
 
     // Inline-block all the things for "inline"
     .form-group {
-      @if $enable-flex {
-        display: flex;
-        flex: 0 0 auto;
-        flex-flow: row wrap;
-      } @else {
-        display: inline-block;
-        vertical-align: middle;
-      }
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
       margin-bottom: 0;
     }
 
@@ -344,30 +328,12 @@ select.form-control-lg {
     }
 
     // Make static controls behave like regular ones
-    .form-control-static {
+    .form-control-plaintext {
       display: inline-block;
     }
 
     .input-group {
       width: auto;
-
-      @if not $enable-flex {
-        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 {
-      @if not $enable-flex {
-        width: 100%;
-      }
     }
 
     .form-control-label {
@@ -378,14 +344,9 @@ 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 {
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      } @else {
-        display: inline-block;
-        vertical-align: middle;
-      }
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: auto;
       margin-top: 0;
       margin-bottom: 0;
@@ -395,27 +356,22 @@ select.form-control-lg {
     }
     .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;
-
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      } @else {
-        vertical-align: middle;
-      }
     }
     .custom-control-indicator {
       position: static;
       display: inline-block;
-      @if $enable-flex {
-        margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
-      }
+      margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
       vertical-align: text-bottom;
     }
 
diff --git a/scss/_functions.scss b/scss/_functions.scss
new file mode 100644
index 000000000..6c0601c50
--- /dev/null
+++ b/scss/_functions.scss
@@ -0,0 +1,90 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
+@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}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @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;
+}
+
+// Color contrast
+@mixin color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    color: #111;
+  } @else {
+    color: #fff;
+  }
+}
+
+// Retreive color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function grayscale($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, #000, #fff);
+
+  @if $level < 0 {
+    // Lighter values need a quick double negative for the Sass math to work
+    @return mix($color-base, $color, $level * -1 * $theme-color-interval);
+  } @else {
+    @return mix($color-base, $color, $level * $theme-color-interval);
+  }
+}
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 8c7a9ee31..a22751537 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -11,8 +11,8 @@
 
 // Fluid container
 //
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
 
 @if $enable-grid-classes {
   .container-fluid {
diff --git a/scss/_images.scss b/scss/_images.scss
index c7b95dec9..50c56108a 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -16,7 +16,7 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  @include transition(all .2s ease-in-out);
+  @include transition($thumbnail-transition);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }
 
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 17b9c8402..95b17be47 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -4,55 +4,31 @@
 
 .input-group {
   position: relative;
+  display: flex;
+  align-items: center;
   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 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 do not require this.
-      width: 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 $enable-flex {
-    // Vertically centers the content of the addons within the input group
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  } @else {
-    display: table-cell;
-  }
-
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
   }
@@ -60,11 +36,7 @@
 
 .input-group-addon,
 .input-group-btn {
-  @if not $enable-flex {
-    width: 1%;
-  }
   white-space: nowrap;
-  vertical-align: middle; // Match the inputs
 }
 
 
@@ -90,25 +62,27 @@
 //
 
 .input-group-addon {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-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;
+  line-height: $input-btn-line-height;
+  color: $input-group-addon-color;
   text-align: center;
   background-color: $input-group-addon-bg;
+  background-clip: padding-box;
   border: $input-btn-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
 
   // Sizing
   &.form-control-sm {
-    padding: $input-padding-y-sm $input-padding-x-sm;
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($input-border-radius-sm);
   }
+
   &.form-control-lg {
-    padding: $input-padding-y-lg $input-padding-x-lg;
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($input-border-radius-lg);
   }
@@ -167,11 +141,8 @@
   // element above the siblings.
   > .btn {
     position: relative;
-
-    @if $enable-flex {
-      // Vertically stretch the button and center its content
-      flex: 1;
-    }
+    background-clip: padding-box;
+    border: $input-btn-border-width solid $input-group-btn-border-color;
 
     + .btn {
       margin-left: (-$input-btn-border-width);
diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index b12d465d9..7966bba1e 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -9,10 +9,6 @@
   }
 }
 
-.jumbotron-hr {
-  border-top-color: darken($jumbotron-bg, 10%);
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index bc949af30..7e0b19e01 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -3,10 +3,8 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
-  @if $enable-flex {
-    display: flex;
-    flex-direction: column;
-  }
+  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
@@ -14,20 +12,37 @@
 }
 
 
+// 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-action-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  @include hover-focus {
+    color: $list-group-action-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
+  }
+}
+
+
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
-  @if $enable-flex {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-  } @else {
-    display: block;
-  }
-
   position: relative;
+  display: block;
   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;
@@ -43,43 +58,31 @@
     @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;
+    background-color: $list-group-disabled-bg;
+  }
+
+  // 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-color;
   }
 }
 
+
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
 .list-group-flush {
   .list-group-item {
     border-right: 0;
@@ -101,49 +104,11 @@
 }
 
 
-// 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;
-  }
-}
-
-
 // Contextual variants
 //
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@include list-group-item-variant(success, $state-success-bg, $state-success-text);
-@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;
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
 }
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 6d613b9a3..09035bf10 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,51 +2,36 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    box-shadow: $shadow;
-  }
-}
-
-@mixin transition($transition...) {
-  @if $enable-transitions {
-    transition: $transition;
-  }
-}
-
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
 @import "mixins/badge";
-@import "mixins/reset-filter";
 @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";
 @import "mixins/text-truncate";
-@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components
 @import "mixins/alert";
 @import "mixins/buttons";
-@import "mixins/cards";
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
-@import "mixins/progress";
 @import "mixins/table-row";
 
 // // Skins
 @import "mixins/background-variant";
 @import "mixins/border-radius";
+@import "mixins/box-shadow";
 @import "mixins/gradients";
+@import "mixins/transition";
 
 // // Layout
 @import "mixins/clearfix";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 85aef719b..1f290557a 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -28,10 +28,10 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    @include transition(transform .3s ease-out);
+    @include transition($modal-transition);
     transform: translate(0, -25%);
   }
-  &.active .modal-dialog { transform: translate(0, 0); }
+  &.show .modal-dialog { transform: translate(0, 0); }
 }
 .modal-open .modal {
   overflow-x: hidden;
@@ -48,11 +48,13 @@
 // 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;
   @include border-radius($border-radius-lg);
-  @include box-shadow($modal-content-xs-box-shadow);
+  @include box-shadow($modal-content-box-shadow-xs);
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -69,24 +71,26 @@
 
   // Fade for backdrop
   &.fade { opacity: 0; }
-  &.active { opacity: $modal-backdrop-opacity; }
+  &.show { opacity: $modal-backdrop-opacity; }
 }
 
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
+  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;
+
+  .close {
+    margin-left: auto; // Force icon to the right even when there's no .modal-title
+  }
 }
 
 // Title text within header
 .modal-title {
-  margin: 0;
+  margin-bottom: 0;
   line-height: $modal-title-line-height;
 }
 
@@ -94,15 +98,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
@@ -119,11 +131,11 @@
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
-    margin: $modal-dialog-sm-up-margin-y auto;
+    margin: $modal-dialog-margin-y-sm-up auto;
   }
 
   .modal-content {
-    @include box-shadow($modal-content-sm-up-box-shadow);
+    @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 0f635e794..ed5d76b0c 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -4,66 +4,39 @@
 // `<nav>`s or `<ul>`s.
 
 .nav {
+  display: flex;
+  flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
 
 .nav-link {
-  display: inline-block;
+  display: block;
+  padding: $nav-link-padding-y $nav-link-padding-x;
 
   @include hover-focus {
     text-decoration: none;
   }
 
-  // Disabled state lightens text and removes hover/tab effects
+  // Disabled state lightens text
   &.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;
+    color: $nav-link-disabled-color;
   }
 }
 
-
 //
 // Tabs
 //
 
 .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 +45,17 @@
     }
 
     &.disabled {
-      @include plain-hover-focus {
-        color: $nav-disabled-link-color;
-        background-color: transparent;
-        border-color: transparent;
-      }
+      color: $nav-link-disabled-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-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
   }
 
   .dropdown-menu {
@@ -103,50 +72,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;
+    &.active,
+    .show > & {
+      color: $nav-pills-link-active-color;
+      background-color: $nav-pills-link-active-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-basis: 0;
+    flex-grow: 1;
+    text-align: center;
   }
 }
 
 
-//
 // Tabbable tabs
 //
-
 // Hide tabbable panes to start, show them when `.active`
+
 .tab-content {
   > .tab-pane {
     display: none;
@@ -155,25 +116,3 @@
     display: block;
   }
 }
-
-
-// Justified navigation (flexbox only)
-//
-// Justified nav components are only built for flexbox mode in Bootstrap 4. In
-// previous versions, this component variation was limited to anchor-based nav
-// implementations--meaning it couldn't be used on button elements. This is due
-// to a longstanding Safari bug in responsive table styles.
-//
-// Using flexbox, we avoid that problem altogether at the cost of no default
-// justified navigation for default Bootstrap. Sorry, y'all <3.
-
-@if $enable-flex {
-  .nav-justified {
-    display: flex;
-
-    .nav-item {
-      flex: 1;
-      text-align: center;
-    }
-  }
-}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2715f1d09..ed49b76b9 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -1,79 +1,52 @@
-// 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.
 
 .navbar {
   position: relative;
+  display: flex;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;
-  @include clearfix;
 
-  @include media-breakpoint-up(sm) {
-    @include border-radius($navbar-border-radius);
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properities so that content nested within behave properly.
+  > .container,
+  > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 
 
-// Navbar alignment options
-//
-// 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 {
-  position: fixed;
-  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 {
-  top: 0;
-}
-
-.navbar-fixed-bottom {
-  bottom: 0;
-}
-
-.navbar-sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: $zindex-navbar-sticky;
-  width: 100%;
-
-  // Undo the rounded corners
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
-}
-
-
-//
-// Brand/project name
+// Navbar brand
 //
+// Used for brand, project, or site names.
 
 .navbar-brand {
-  float: left;
+  display: inline-block;
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
-  margin-right: 1rem;
-  font-size: $font-size-lg;
+  margin-right: $navbar-padding-x;
+  font-size: $navbar-brand-font-size;
   line-height: inherit;
+  white-space: nowrap;
 
   @include hover-focus {
     text-decoration: none;
@@ -81,17 +54,25 @@
 }
 
 
-.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;
+// 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;
+  }
 
-  &::before {
-    content: "\00a0";
+  .dropdown-menu {
+    position: static;
+    float: none;
   }
 }
 
@@ -102,25 +83,33 @@
 
 .navbar-text {
   display: inline-block;
-  padding-top:    .425rem;
-  padding-bottom: .425rem;
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
 }
 
 
-// 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.
+
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-basis: 100%;
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
 
+// Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  width: 2.5em;
-  height: 2em;
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: transparent no-repeat center center;
-  background-size: 24px 24px;
-  border: $border-width solid transparent;
+  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 {
@@ -128,34 +117,85 @@
   }
 }
 
-// Navigation
-//
-// Custom navbar navigation built on the base `.nav` styles.
+// 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%;
+}
 
-.navbar-nav {
-  .nav-item {
-    float: left;
-  }
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
-  .nav-link {
-    display: block;
-    padding-top:    .425rem;
-    padding-bottom: .425rem;
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        > .container,
+        > .container-fluid {
+          padding-right: 0;
+          padding-left: 0;
+        }
+      }
 
-    + .nav-link {
-      margin-left: 1rem;
-    }
-  }
+      @include media-breakpoint-up($next) {
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+
+        .navbar-nav {
+          flex-direction: row;
 
-  .nav-item + .nav-item {
-    margin-left: 1rem;
+          .dropdown-menu {
+            position: absolute;
+          }
+
+          .dropdown-menu-right {
+            right: 0;
+            left: auto; // Reset the default from `.dropdown-menu`
+          }
+
+          .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+          }
+        }
+
+        // For nesting containers, have to redeclare for alignment purposes
+        > .container,
+        > .container-fluid {
+          flex-wrap: nowrap;
+        }
+
+        // scss-lint:disable ImportantRule
+        .navbar-collapse {
+          display: flex !important;
+        }
+        // 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,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-light-active-color;
 
     @include hover-focus {
@@ -176,23 +216,21 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-light-active-color;
-      }
+      color: $navbar-light-active-color;
     }
   }
 
   .navbar-toggler {
-    background-image: $navbar-light-toggler-bg;
-    border-color: $navbar-light-toggler-border;
+    color: $navbar-light-color;
+    border-color: $navbar-light-toggler-border-color;
   }
 
-  .navbar-divider {
-    background-color: rgba(0,0,0,.075);
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-icon-bg;
   }
 
   .navbar-text {
@@ -202,8 +240,7 @@
 
 // White links against a dark background
 .navbar-dark {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-dark-active-color;
 
     @include hover-focus {
@@ -224,71 +261,24 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-dark-active-color;
-      }
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-toggler {
-    background-image: $navbar-dark-toggler-bg;
-    border-color: $navbar-dark-toggler-border;
+    color: $navbar-dark-color;
+    border-color: $navbar-dark-toggler-border-color;
   }
 
-  .navbar-divider {
-    background-color: rgba(255,255,255,.075);
+  .navbar-toggler-icon {
+    background-image: $navbar-dark-toggler-icon-bg;
   }
 
   .navbar-text {
     color: $navbar-dark-color;
   }
 }
-
-// Navbar toggleable
-//
-// Custom override for collapse plugin in navbar.
-
-// Placed at the end of the file so it can override some CSS properties
-// scss-lint:disable ImportantRule
-.navbar-toggleable {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-    &#{$infix} {
-      @include clearfix;
-
-      @include media-breakpoint-down($breakpoint) {
-        .navbar-brand {
-          display: block;
-          float: none;
-          margin-top: .5rem;
-          margin-right: 0;
-        }
-
-        .navbar-nav {
-          margin-top: .5rem;
-          margin-bottom: .5rem;
-
-          .dropdown-menu {
-            position: static;
-            float: none;
-          }
-
-          .nav-item {
-            float: none;
-            margin-left: 0;
-          }
-        }
-      }
-
-      @include media-breakpoint-up($next) {
-        display: block !important;
-      }
-    }
-  }
-}
-// scss-lint:enable ImportantRule
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
deleted file mode 100644
index 6bafd53f6..000000000
--- a/scss/_normalize.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
-
-//
-// 1. Change the default font family in all browsers (opinionated).
-// 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
-  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).
-//
-
-body {
-  margin: 0;
-}
-
-//
-// Add the correct display in IE 9-.
-//
-
-article,
-aside,
-footer,
-header,
-nav,
-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.
-//
-
-figcaption,
-figure,
-main { // 1
-  display: block;
-}
-
-//
-// Add the correct margin in IE 8.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
-//
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
-//
-
-hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
-}
-
-//
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-//
-
-pre {
-  font-family: monospace, monospace; // 1
-  font-size: 1em; // 2
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// 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; // 1
-  -webkit-text-decoration-skip: objects; // 2
-}
-
-//
-// Remove the outline on focused links when they are also active or hovered
-// in all browsers (opinionated).
-//
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-//
-// 1. Remove the bottom border in Firefox 39-.
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-//
-
-abbr[title] {
-  border-bottom: none; // 1
-  text-decoration: underline; // 2
-  text-decoration: underline dotted; // 2
-}
-
-//
-// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
-//
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-//
-// Add the correct font weight in Chrome, Edge, and Safari.
-//
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-//
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-//
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; // 1
-  font-size: 1em; // 2
-}
-
-//
-// Add the correct font style in Android 4.3-.
-//
-
-dfn {
-  font-style: italic;
-}
-
-//
-// Add the correct background and color in IE 9-.
-//
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-//
-// Add the correct font size in all browsers.
-//
-
-small {
-  font-size: 80%;
-}
-
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-//
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-// Embedded content
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-//
-
-audio,
-video {
-  display: inline-block;
-}
-
-//
-// Add the correct display in iOS 4-7.
-//
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-//
-// Remove the border on images inside links in IE 10-.
-//
-
-img {
-  border-style: none;
-}
-
-//
-// Hide the overflow in IE.
-//
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// 1. Change the font styles in all browsers (opinionated).
-// 2. Remove the margin in Firefox and Safari.
-//
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  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.
-//
-
-button,
-input { // 1
-  overflow: visible;
-}
-
-//
-// Remove the inheritance of text transform in Edge, Firefox, and IE.
-// 1. Remove the inheritance of text transform in Firefox.
-//
-
-button,
-select { // 1
-  text-transform: none;
-}
-
-//
-// 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 and Safari.
-//
-
-button,
-html [type="button"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-}
-
-//
-// Remove the inner border and padding in Firefox.
-//
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-//
-// Restore the focus styles unset by the previous rule.
-//
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-//
-// Change the border, margin, and padding in all browsers (opinionated).
-//
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-//
-// 1. Correct the text wrapping in Edge and IE.
-// 2. Correct the color inheritance from `fieldset` elements in IE.
-// 3. Remove the padding so developers are not caught out when they zero out
-//    `fieldset` elements in all browsers.
-//
-
-legend {
-  box-sizing: border-box; // 1
-  color: inherit; // 2
-  display: table; // 1
-  max-width: 100%; // 1
-  padding: 0; // 3
-  white-space: normal; // 1
-}
-
-//
-// 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.
-//
-
-textarea {
-  overflow: auto;
-}
-
-//
-// 1. Add the correct box sizing in IE 10-.
-// 2. Remove the padding in IE 10-.
-//
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Correct the cursor style of increment and decrement buttons in Chrome.
-//
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// 1. Correct the odd appearance in Chrome and Safari.
-// 2. Correct the outline style in Safari.
-//
-
-[type="search"] {
-  -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 2
-}
-
-//
-// 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 fd70f1d35..4ef144204 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,31 +20,25 @@
   }
 
   &.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-color;
   }
 
   &.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;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
   }
 }
 
 .page-link {
   position: relative;
-  float: left; // Collapse white-space
+  display: block;
   padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -1px;
+  margin-left: -$pagination-border-width;
   line-height: $pagination-line-height;
   color: $pagination-color;
   background-color: $pagination-bg;
@@ -56,7 +48,7 @@
     color: $pagination-hover-color;
     text-decoration: none;
     background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border;
+    border-color: $pagination-hover-border-color;
   }
 }
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 86b489a48..950d6ca39 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -18,79 +18,110 @@
   @include border-radius($border-radius-lg);
   @include box-shadow($popover-box-shadow);
 
+  // Arrows
+  //
+  // .arrow is outer, .arrow::after is inner
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  }
+
+  .arrow::before,
+  .arrow::after {
+    position: absolute;
+    display: block;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .arrow::before {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
+  .arrow::after {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
 
   // Popover directions
 
-  &.popover-top,
-  &.bs-tether-element-attached-bottom {
-    margin-top: -$popover-arrow-width;
+  &.bs-popover-top {
+    margin-bottom: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      bottom: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
       border-bottom-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       bottom: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-color;
     }
   }
 
-  &.popover-right,
-  &.bs-tether-element-attached-left {
+  &.bs-popover-right {
     margin-left: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      left: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-left-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       left: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       left: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
   }
 
-  &.popover-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-popover-bottom {
     margin-top: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      top: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-left: -($popover-arrow-width - 3);
       border-top-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       top: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       top: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
-      border-bottom-color: $popover-title-bg;
+      border-bottom-color: $popover-arrow-color;
     }
 
-    // This will remove the popover-title's border just below the arrow
-    .popover-title::before {
+    // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
       position: absolute;
       top: 0;
       left: 50%;
@@ -98,74 +129,67 @@
       width: 20px;
       margin-left: -10px;
       content: "";
-      border-bottom: 1px solid $popover-title-bg;
+      border-bottom: 1px solid $popover-header-bg;
     }
   }
 
-  &.popover-left,
-  &.bs-tether-element-attached-right {
-    margin-left: -$popover-arrow-width;
+  &.bs-popover-left {
+    margin-right: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      right: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-right-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       right: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       right: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
     }
   }
+  &.bs-popover-auto {
+    &[x-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-popover-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-popover-left;
+    }
+  }
 }
 
 
 // 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
+.popover-header {
+  padding: $popover-header-padding-y $popover-header-padding-x;
+  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);
+  color: $popover-header-color;
+  background-color: $popover-header-bg;
+  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
+  $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
+  @include border-top-radius($offset-border-width);
 
   &:empty {
     display: none;
   }
 }
 
-.popover-content {
-  padding: $popover-content-padding-y $popover-content-padding-x;
-}
-
-
-// Arrows
-//
-// .popover-arrow is outer, .popover-arrow::after is inner
-
-.popover::before,
-.popover::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.popover::before {
-  content: "";
-  border-width: $popover-arrow-outer-width;
-}
-.popover::after {
-  content: "";
-  border-width: $popover-arrow-width;
+.popover-body {
+  padding: $popover-body-padding-y $popover-body-padding-x;
+  color: $popover-body-color;
 }
diff --git a/scss/_print.scss b/scss/_print.scss
index e77ac1dba..7f8d9900a 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -12,15 +12,7 @@
   @media print {
     *,
     *::before,
-    *::after,
-    p::first-letter,
-    div::first-letter,
-    blockquote::first-letter,
-    li::first-letter,
-    p::first-line,
-    div::first-line,
-    blockquote::first-line,
-    li::first-line {
+    *::after {
       // Bootstrap specific; comment out `color` and `background`
       //color: #000 !important; // Black prints faster:
                                 //   http://www.sanbeiji.com/archives/953
@@ -95,12 +87,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 8b0225e9a..efbb44034 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,131 +1,30 @@
-//
-// 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;
+  height: $progress-height;
   overflow: hidden; // force rounded corners by cropping it
-}
-.progress[value] {
-  // Set overall background
+  font-size: $progress-font-size;
   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;
-}
-
-// 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);
-}
-
-// 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;
-  }
+.progress-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $progress-bar-color;
+  background-color: $progress-bar-bg;
 }
 
-
-//
-// 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;
-}
-// IE9
-@media screen and (min-width:0\0) {
-  .progress-bar-striped {
-    @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;
-}
-// IE9
-@media screen and (min-width:0\0) {
-  .progress-animated .progress-bar-striped {
-    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 2fc6409d0..1d09ce89a 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,84 +1,64 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty
+// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
 
 // Reboot
 //
-// Global resets to common HTML elements and more for easier usage by Bootstrap.
-// Adds additional rules on top of Normalize.css, including several overrides.
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
 
-// Reset the box-sizing
-//
-// Change from `box-sizing: content-box` to `border-box` so that when you add
-// `padding` or `border`s to an element, the overall declared `width` does not
-// change. For example, `width: 100px;` will always be `100px` despite the
-// `border: 10px solid red;` and `padding: 20px;`.
-//
-// Heads up! This reset may cause conflicts with some third-party widgets. For
-// recommendations on resolving such conflicts, see
-// https://getbootstrap.com/getting-started/#third-box-sizing.
+// Document
 //
-// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
-
-html {
-  box-sizing: border-box;
-}
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
 
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+  box-sizing: border-box; // 1
 }
 
+html {
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
+  -ms-overflow-style: scrollbar; // 5
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
+}
 
-// Make viewport responsive
-//
-// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
-// 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 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 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"; }`).
+// IE10+ doesn't honor `<meta name="viewport">` in some cases.
 @at-root {
   @-ms-viewport { width: device-width; }
 }
 
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
 
+// Body
 //
-// Reset HTML, body, and more
-//
-
-html {
-  // Sets a specific default `font-size` for user with `rem` type scales.
-  font-size: $font-size-root;
-  // 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,
-  // 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);
-}
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Set an explicit initial text-align value so that we can later use the
+//    the `inherit` value on things like `<th>` elements.
 
 body {
-  // Make the `body` use the `font-size-root`
+  margin: 0; // 1
   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;
-  // By default, `<body>` has no `background-color` so we set one as a best practice.
-  background-color: $body-bg;
+  text-align: left; // 3
+  background-color: $body-bg; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
@@ -91,6 +71,18 @@ body {
 }
 
 
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+}
+
+
 //
 // Typography
 //
@@ -110,14 +102,22 @@ h1, h2, h3, h4, h5, h6 {
 // bottom margin to use `rem` units instead of `em`.
 p {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: $paragraph-margin-bottom;
 }
 
 // Abbreviations
+//
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
 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;
+abbr[data-original-title] { // 4
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 1
 }
 
 address {
@@ -153,6 +153,35 @@ blockquote {
   margin: 0 0 1rem;
 }
 
+dfn {
+  font-style: italic; // Add the correct font style in Android 4.3-
+}
+
+b,
+strong {
+  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  font-size: 80%; // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
 
 //
 // Links
@@ -161,15 +190,13 @@ blockquote {
 a {
   color: $link-color;
   text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
 
-  @include hover-focus {
+  @include hover {
     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 +215,7 @@ a:not([href]):not([tabindex]) {
   }
 
   &:focus {
-    outline: none;
+    outline: 0;
   }
 }
 
@@ -197,12 +224,20 @@ a:not([href]):not([tabindex]) {
 // Code
 //
 
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
 pre {
   // Remove browser default top margin
   margin-top: 0;
   // Reset browser default of `1em` to use `rem`s
   margin-bottom: 1rem;
-  // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
+  // Don't allow content to break outside
   overflow: auto;
 }
 
@@ -212,33 +247,22 @@ pre {
 //
 
 figure {
-  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
-  // We reset that to create a better flow in-page.
+  // Apply a consistent margin strategy (matches our type styles).
   margin: 0 0 1rem;
 }
 
 
 //
-// Images
+// Images and content
 //
 
 img {
-  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
-  // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
-  // Note: `<img>`s are deliberately not made responsive by default.
-  // For the rationale behind this, see the comments on the `.img-fluid` class.
+  border-style: none; // Remove the border on images inside links in IE 10-.
 }
 
-
-// iOS "clickable elements" fix for role="button"
-//
-// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
-// for traditionally non-focusable elements with role="button"
-// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-[role="button"] {
-  cursor: pointer;
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
 }
 
 
@@ -248,7 +272,7 @@ 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:
-// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
 // * http://caniuse.com/#feat=css-touch-action
 // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 
@@ -270,10 +294,7 @@ textarea {
 //
 
 table {
-  // No longer part of Normalize since v4
-  border-collapse: collapse;
-  // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  border-collapse: collapse; // Prevent double borders
 }
 
 caption {
@@ -285,8 +306,9 @@ caption {
 }
 
 th {
-  // Centered by default, but left-align-ed to match the `td`s below.
-  text-align: left;
+  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
+  // closest parent with a set `text-align`.
+  text-align: inherit;
 }
 
 
@@ -312,20 +334,47 @@ button:focus {
 input,
 button,
 select,
+optgroup,
 textarea {
-  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
-  // properly inherited. However, `line-height` isn't inherited there.
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
   line-height: inherit;
 }
 
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// 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 and Safari.
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
 input[type="radio"],
 input[type="checkbox"] {
-  // Apply a disabled cursor for radios and checkboxes.
-  //
-  // Note: Neither radios nor checkboxes can be readonly.
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
 }
 
 
@@ -342,14 +391,17 @@ input[type="month"] {
 }
 
 textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
 }
 
 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;
@@ -357,33 +409,76 @@ fieldset {
   border: 0;
 }
 
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
 legend {
-  // Reset the entire legend element to match the `fieldset`
   display: block;
   width: 100%;
+  max-width: 100%; // 1
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
 }
 
-input[type="search"] {
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
   // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// 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;
 }
 
-// todo: needed?
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
 output {
   display: inline-block;
-//  font-size: $font-size-base;
-//  line-height: $line-height;
-//  color: $input-color;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
 }
 
 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
 [hidden] {
   display: none !important;
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 3d8000045..a652d17c5 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -6,6 +6,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: $spacer;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 
   th,
   td {
@@ -36,7 +37,7 @@
 .table-sm {
   th,
   td {
-    padding: $table-sm-cell-padding;
+    padding: $table-cell-padding-sm;
   }
 }
 
@@ -68,7 +69,7 @@
 
 .table-striped {
   tbody tr:nth-of-type(odd) {
-    background-color: $table-bg-accent;
+    background-color: $table-accent-bg;
   }
 }
 
@@ -80,7 +81,7 @@
 .table-hover {
   tbody tr {
     @include hover {
-      background-color: $table-bg-hover;
+      background-color: $table-hover-bg;
     }
   }
 }
@@ -91,12 +92,11 @@
 // Exact selectors below required to override `.table-striped` and prevent
 // inheritance to nested tables.
 
-// Generate the contextual variants
-@include table-row-variant(active, $table-bg-active);
-@include table-row-variant(success, $state-success-bg);
-@include table-row-variant(info, $state-info-bg);
-@include table-row-variant(warning, $state-warning-bg);
-@include table-row-variant(danger, $state-danger-bg);
+@each $color, $value in $theme-colors {
+  @include table-row-variant($color, theme-color-level($color, -9));
+}
+
+@include table-row-variant(active, $table-active-bg);
 
 
 // Inverse styles
@@ -105,8 +105,8 @@
 
 .thead-inverse {
   th {
-    color: #fff;
-    background-color: $table-bg-inverse;
+    color: $table-inverse-color;
+    background-color: $table-inverse-bg;
   }
 }
 
@@ -118,20 +118,33 @@
 }
 
 .table-inverse {
-  color: $body-bg;
-  background-color: $table-bg-inverse;
+  color: $table-inverse-color;
+  background-color: $table-inverse-bg;
 
   th,
   td,
   thead th {
-    border-color: $body-bg;
+    border-color: $table-inverse-border-color;
   }
 
   &.table-bordered {
     border: 0;
   }
-}
 
+  &.table-striped {
+    tbody tr:nth-of-type(odd) {
+      background-color: $table-inverse-accent-bg;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover {
+        background-color: $table-inverse-hover-bg;
+      }
+    }
+  }
+}
 
 
 // Responsive tables
@@ -141,57 +154,15 @@
 // will display normally.
 
 .table-responsive {
-  display: block;
-  width: 100%;
-  min-height: 0%; // 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
-
-  // Prevent double border on horizontal scroll due to use of `display: block;`
-  &.table-bordered {
-    border: 0;
-  }
-}
-
-
-.table-reflow {
-  thead {
-    float: left;
-  }
-
-  tbody {
+  @include media-breakpoint-down(md) {
     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;
-    }
-  }
+    width: 100%;
+    overflow-x: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 
-  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;
+    // Prevent double border on horizontal scroll due to use of `display: block;`
+    &.table-bordered {
+      border: 0;
     }
   }
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index abfa9bdb5..fe97fbbbd 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -3,6 +3,7 @@
   position: absolute;
   z-index: $zindex-tooltip;
   display: block;
+  margin: $tooltip-margin;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -11,64 +12,88 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.active { opacity: $tooltip-opacity; }
+  &.show { opacity: $tooltip-opacity; }
 
-  &.tooltip-top,
-  &.bs-tether-element-attached-bottom {
-    padding: $tooltip-arrow-width 0;
-    margin-top: -$tooltip-margin;
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+  }
 
-    .tooltip-inner::before {
+  &.bs-tooltip-top {
+    padding: $tooltip-arrow-width 0;
+    .arrow {
       bottom: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-right,
-  &.bs-tether-element-attached-left {
+  &.bs-tooltip-right {
     padding: 0 $tooltip-arrow-width;
-    margin-left: $tooltip-margin;
-
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow {
       left: 0;
-      margin-top: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-tooltip-bottom {
     padding: $tooltip-arrow-width 0;
-    margin-top: $tooltip-margin;
-
-    .tooltip-inner::before {
+    .arrow {
       top: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-left,
-  &.bs-tether-element-attached-right {
+  &.bs-tooltip-left {
     padding: 0 $tooltip-arrow-width;
-    margin-left: -$tooltip-margin;
+    .arrow {
+      right: 0;
+    }
 
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow::before {
       right: 0;
-      margin-top: -$tooltip-arrow-width;
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
   }
+  &.bs-tooltip-auto {
+    &[x-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-tooltip-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-tooltip-left;
+    }
+  }
+
+  .arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -79,12 +104,4 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-
-  &::before {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
 }
diff --git a/scss/_animation.scss b/scss/_transitions.scss
index 2586bf2d1..86c04a5f8 100644
--- a/scss/_animation.scss
+++ b/scss/_transitions.scss
@@ -1,28 +1,27 @@
 .fade {
   opacity: 0;
+  @include transition($transition-fade);
 
-  @include transition(opacity .15s linear);
-
-  &.active {
+  &.show {
     opacity: 1;
   }
 }
 
 .collapse {
   display: none;
-  &.active {
+  &.show {
     display: block;
   }
 }
 
 tr {
-  &.collapse.active {
+  &.collapse.show {
     display: table-row;
   }
 }
 
 tbody {
-  &.collapse.active {
+  &.collapse.show {
     display: table-row-group;
   }
 }
@@ -31,6 +30,5 @@ tbody {
   position: relative;
   height: 0;
   overflow: hidden;
-
-  @include transition(height .35s ease);
+  @include transition($transition-collapse);
 }
diff --git a/scss/_type.scss b/scss/_type.scss
index 0880145e0..8928341da 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6,
   color: $headings-color;
 }
 
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
 
 .lead {
   font-size: $lead-font-size;
@@ -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;
 }
 
 
@@ -47,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
 //
 
 hr {
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   border: 0;
   border-top: $hr-border-width solid $hr-border-color;
 }
@@ -104,10 +108,8 @@ mark,
 
 // Blockquotes
 .blockquote {
-  padding: ($spacer / 2) $spacer;
   margin-bottom: $spacer;
   font-size: $blockquote-font-size;
-  border-left: $blockquote-border-width solid $blockquote-border-color;
 }
 
 .blockquote-footer {
@@ -119,32 +121,3 @@ mark,
     content: "\2014 \00A0"; // em dash, nbsp
   }
 }
-
-// Opposite alignment of blockquote
-.blockquote-reverse {
-  padding-right: $spacer;
-  padding-left: 0;
-  text-align: right;
-  border-right: $blockquote-border-width solid $blockquote-border-color;
-  border-left: 0;
-}
-
-.blockquote-reverse .blockquote-footer {
-  &::before {
-    content: "";
-  }
-  &::after {
-    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 c63e50600..7b2a1ebe9 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -3,9 +3,12 @@
 @import "utilities/borders";
 @import "utilities/clearfix";
 @import "utilities/display";
+@import "utilities/embed";
 @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 d57e59575..fe48af523 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,116 +1,124 @@
 // Variables
 //
-// Copy settings from this file into the provided `_custom.scss` to override
-// the Bootstrap defaults without modifying key, versioned files.
-
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // Table of Contents
 //
-//  1. Colors
-//  2. Options
-//  3. Spacing
-//  4. Body
-//  5. Links
-//  6. Grid breakpoints
-//  7. Grid containers
-//  8. Grid columns
-//  9. Fonts
-// 10. Components
-// 11. Tables
-// 12. Buttons
-// 13. Forms
-// 14. Dropdowns
-// 15. Z-index master list
-// 16. Navbar
-// 17. Navs
-// 18. Pagination
-// 19. Jumbotron
-// 20. Form states and alerts
-// 21. Cards
-// 22. Tooltips
-// 23. Popovers
-// 24. Tags
-// 25. Modals
-// 26. Alerts
-// 27. Progress bars
-// 28. List group
-// 29. Image thumbnails
-// 30. Figures
-// 31. Breadcrumbs
-// 32. Media objects
-// 33. Carousel
-// 34. Close
-// 35. Code
-
-@mixin _assert-ascending($map, $map-name) {
-  $prev-key: null;
-  $prev-num: null;
-  @each $key, $num in $map {
-    @if $prev-num == null {
-      // Do nothing
-    } @else if not comparable($prev-num, $num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
-      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    }
-    $prev-key: $key;
-    $prev-num: $num;
-  }
-}
-
-// 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.
+// Color system
+// Options
+// Spacing
+// Body
+// Links
+// Paragraphs
+// Grid breakpoints
+// Grid containers
+// Grid columns
+// Fonts
+// Components
+// Tables
+// Buttons
+// Forms
+// Dropdowns
+// Z-index master list
+// Navs
+// Navbar
+// Pagination
+// Jumbotron
+// Form states and alerts
+// Cards
+// Tooltips
+// Popovers
+// Badges
+// Modals
+// Alerts
+// Progress bars
+// List group
+// Image thumbnails
+// Figures
+// Breadcrumbs
+// Carousel
+// Close
+// Code
 
 
-// 1. Colors
 //
-// Grayscale and brand colors for use across Bootstrap.
-
-$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;
-$brand-inverse:             $gray-dark !default;
-
+// Color system
+//
 
-// 2. Options
+$white:  #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:  #000 !default;
+
+$grays: () !default;
+$grays: map-merge((
+  100: $gray-100,
+  200: $gray-200,
+  300: $gray-300,
+  400: $gray-400,
+  500: $gray-500,
+  600: $gray-600,
+  700: $gray-700,
+  800: $gray-800,
+  900: $gray-900
+), $grays);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+$colors: map-merge((
+  blue: $blue,
+  indigo: $indigo,
+  purple: $purple,
+  pink: $pink,
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  cyan: $cyan,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-800
+), $colors);
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  primary: $blue,
+  secondary: $gray-600,
+  success: $green,
+  info: $cyan,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $gray-800
+), $theme-colors);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+
+// Options
 //
 // 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;
@@ -120,65 +128,54 @@ $enable-grid-classes:       true !default;
 $enable-print-styles:       true !default;
 
 
-// 3. Spacing
+// Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
-$spacer:   1rem !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
+$spacer: 1rem !default;
 $spacers: (
-  0: (
-    x: 0,
-    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
-  ),
-  4: (
-    x: ($spacer-x * 1.5),
-    y: ($spacer-y * 1.5)
-  ),
-  5: (
-    x: ($spacer-x * 3),
-    y: ($spacer-y * 3)
-  )
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3)
 ) !default;
-$border-width: 1px !default;
 
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+) !default;
 
-// 4. Body
+// Body
 //
 // Settings for the `<body>` element.
 
-$body-bg:       #fff !default;
-$body-color:    $gray-dark !default;
-$inverse-bg:    $gray-dark !default;
-$inverse-color: $gray-lighter !default;
-
+$body-bg:       $white !default;
+$body-color:    $gray-900 !default;
 
-// 5. Links
+// Links
 //
 // Style anchor elements.
 
-$link-color:            $brand-primary !default;
+$link-color:            theme-color("primary") !default;
 $link-decoration:       none !default;
 $link-hover-color:      darken($link-color, 15%) !default;
 $link-hover-decoration: underline !default;
 
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
 
-// 6. Grid breakpoints
+
+// Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
@@ -194,7 +191,7 @@ $grid-breakpoints: (
 @include _assert-starts-at-zero($grid-breakpoints);
 
 
-// 7. Grid containers
+// Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
@@ -207,59 +204,62 @@ $container-max-widths: (
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
-// 8. Grid columns
+// Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
-$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;
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         1.5 !default;
+$line-height-sm:         1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-200 !default;
+
+$border-radius:          .25rem !default;
+$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .2rem !default;
+
+$component-active-color: $white !default;
+$component-active-bg:    theme-color("primary") !default;
+
+$caret-width:            .3em !default;
+
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
 
-// 9. Fonts
+
+// 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-serif:      Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace:  "SFMono-Regular", 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;
 
+$font-weight-light: 300 !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;
-$font-size-h2: 2rem !default;
-$font-size-h3: 1.75rem !default;
-$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;
+$h1-font-size: 2.5rem !default;
+$h2-font-size: 2rem !default;
+$h3-font-size: 1.75rem !default;
+$h4-font-size: 1.5rem !default;
+$h5-font-size: 1.25rem !default;
+$h6-font-size: 1rem !default;
 
 $headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family:   inherit !default;
@@ -267,207 +267,192 @@ $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;
 
 $small-font-size: 80% !default;
 
-$text-muted: $gray-light !default;
-
-$abbr-border-color: $gray-light !default;
+$text-muted: $gray-600 !default;
 
-$blockquote-small-color:  $gray-light !default;
+$blockquote-small-color:  $gray-600 !default;
 $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: $font-weight-bold !default;
 
-$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !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;
 
+$mark-bg: #fcf8e3 !default;
 
-// 10. Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg:         (4 / 3) !default;
-$line-height-sm:         1.5 !default;
-
-$border-radius:          .25rem !default;
-$border-radius-lg:       .3rem !default;
-$border-radius-sm:       .2rem !default;
-
-$component-active-color: #fff !default;
-$component-active-bg:    $brand-primary !default;
-
-$caret-width:            .3em !default;
-$caret-width-lg:         $caret-width !default;
 
-
-// 11. Tables
+// Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 $table-cell-padding:            .75rem !default;
-$table-sm-cell-padding:         .3rem !default;
+$table-cell-padding-sm:         .3rem !default;
 
 $table-bg:                      transparent !default;
-$table-bg-inverse:              $gray-dark !default;
+$table-accent-bg:               rgba($black,.05) !default;
+$table-hover-bg:                rgba($black,.075) !default;
+$table-active-bg:               $table-hover-bg !default;
 
-$table-bg-accent:               rgba(0,0,0,.05) !default;
-$table-bg-hover:                rgba(0,0,0,.075) !default;
-$table-bg-active:               $table-bg-hover !default;
+$table-border-width:            $border-width !default;
+$table-border-color:            $gray-200 !default;
 
-$table-head-bg:                 $gray-lighter !default;
-$table-head-color:              $gray !default;
+$table-head-bg:                 $gray-200 !default;
+$table-head-color:              $gray-700 !default;
 
-$table-border-width:            $border-width !default;
-$table-border-color:            $gray-lighter !default;
+$table-inverse-bg:              $gray-900 !default;
+$table-inverse-accent-bg:       rgba($white, .05) !default;
+$table-inverse-hover-bg:        rgba($white, .075) !default;
+$table-inverse-border-color:    lighten($gray-900, 7.5%) !default;
+$table-inverse-color:           $body-bg !default;
 
 
-// 12. Buttons
+// Buttons
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-padding-x:                  1rem !default;
-$btn-padding-y:                  .5rem !default;
-$btn-line-height:                1.25 !default;
-$btn-font-weight:                $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-primary-color:              #fff !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-border:           #ccc !default;
-
-$btn-info-color:                 #fff !default;
-$btn-info-bg:                    $brand-info !default;
-$btn-info-border:                $btn-info-bg !default;
-
-$btn-success-color:              #fff !default;
-$btn-success-bg:                 $brand-success !default;
-$btn-success-border:             $btn-success-bg !default;
+$input-btn-padding-y:       .5rem !default;
+$input-btn-padding-x:       .75rem !default;
+$input-btn-line-height:     1.25 !default;
 
-$btn-warning-color:              #fff !default;
-$btn-warning-bg:                 $brand-warning !default;
-$btn-warning-border:             $btn-warning-bg !default;
+$input-btn-padding-y-sm:    .25rem !default;
+$input-btn-padding-x-sm:    .5rem !default;
+$input-btn-line-height-sm:  1.5 !default;
 
-$btn-danger-color:               #fff !default;
-$btn-danger-bg:                  $brand-danger !default;
-$btn-danger-border:              $btn-danger-bg !default;
+$input-btn-padding-y-lg:    .5rem !default;
+$input-btn-padding-x-lg:    1rem !default;
+$input-btn-line-height-lg:  1.5 !default;
 
-$btn-link-disabled-color:        $gray-light !default;
-
-$btn-padding-x-sm:               .5rem !default;
-$btn-padding-y-sm:               .25rem !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 3px rgba(theme-color("primary"), .25) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
-$btn-padding-x-lg:               1.5rem !default;
-$btn-padding-y-lg:               .75rem !default;
+$btn-link-disabled-color:        $gray-600 !default;
 
 $btn-block-spacing-y:            .5rem !default;
-$btn-toolbar-margin:             .5rem !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
 $btn-border-radius-sm:           $border-radius-sm !default;
 
+$btn-transition:                 background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-// 13. Forms
 
-$input-padding-x:                .75rem !default;
-$input-padding-y:                .5rem !default;
-$input-line-height:              1.25 !default;
+// Forms
 
-$input-bg:                       #fff !default;
-$input-bg-disabled:              $gray-lighter !default;
+$input-bg:                       $white !default;
+$input-disabled-bg:              $gray-200 !default;
 
-$input-color:                    $gray !default;
-$input-border-color:             rgba(0,0,0,.15) !default;
+$input-color:                    $gray-700 !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 !default;
-$input-border-focus:             #66afe9 !default;
-$input-box-shadow-focus:         $input-box-shadow, 0 0 8px rgba($input-border-focus,.6) !default;
-$input-color-focus:              $input-color !default;
+$input-focus-bg:                 $input-bg !default;
+$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
+$input-focus-box-shadow:         $input-box-shadow, $btn-focus-box-shadow !default;
+$input-focus-color:              $input-color !default;
 
-$input-color-placeholder:        #999 !default;
+$input-placeholder-color:        $gray-600 !default;
 
-$input-padding-x-sm:             .5rem !default;
-$input-padding-y-sm:             .25rem !default;
+$input-height-border:           $input-btn-border-width * 2 !default;
 
-$input-padding-x-lg:             1.5rem !default;
-$input-padding-y-lg:             .75rem !default;
+$input-height-inner:            ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height:                  calc(#{$input-height-inner} + #{$input-height-border}) !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-height-inner-sm:         ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm:               calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
 
-$form-group-margin-bottom:       $spacer-y !default;
+$input-height-inner-lg:         ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-group-addon-bg:           $gray-lighter !default;
-$input-group-addon-border-color: $input-border-color !default;
+$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+
+$form-text-margin-top:     .25rem !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;
 
-$cursor-disabled:                not-allowed !default;
+$form-check-inline-margin-x: .75rem !default;
+
+$form-group-margin-bottom:       1rem !default;
+
+$input-group-addon-color:        $input-color !default;
+$input-group-addon-bg:           $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+$input-group-btn-border-color:   $input-border-color !default;
 
 $custom-control-gutter:   1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
+$custom-control-spacer-x: 1rem !default;
 
 $custom-control-indicator-size:       1rem !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-indicator-disabled-bg:       $gray-200 !default;
+$custom-control-description-disabled-color:  $gray-600 !default;
 
-$custom-control-checked-indicator-color:      #fff !default;
-$custom-control-checked-indicator-bg:         #0074d9 !default;
-$custom-control-checked-indicator-box-shadow: none !default;
+$custom-control-indicator-checked-color:      $white !default;
+$custom-control-indicator-checked-bg:         theme-color("primary") !default;
+$custom-control-indicator-checked-box-shadow: none !default;
 
-$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
 
-$custom-control-active-indicator-color:      #fff !default;
-$custom-control-active-indicator-bg:         #84c6ff !default;
-$custom-control-active-indicator-box-shadow: none !default;
+$custom-control-indicator-active-color:      $white !default;
+$custom-control-indicator-active-bg:         lighten(theme-color("primary"), 35%) !default;
+$custom-control-indicator-active-box-shadow: none !default;
 
-$custom-checkbox-radius: $border-radius !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-indicator-border-radius: $border-radius !default;
+$custom-checkbox-indicator-icon-checked: 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-indicator-checked-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: #0074d9 !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-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: 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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
 
-$custom-radio-radius: 50% !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-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: 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-indicator-checked-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-disabled-bg:   $gray-lighter !default;
+$custom-select-padding-x:          .75rem  !default;
+$custom-select-height:              $input-height  !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-btn-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$custom-select-bg:            $white !default;
+$custom-select-disabled-bg:   $gray-200 !default;
 $custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
 $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;
@@ -475,27 +460,27 @@ $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($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-border-color: lighten(theme-color("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-font-size-sm:  75% !default;
+$custom-select-height-sm: $input-height-sm !default;
 
-$custom-file-height:           2.5rem !default;
+$custom-file-height:           $input-height !default;
 $custom-file-width:            14rem !default;
-$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !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-border-width:  $border-width !default;
-$custom-file-border-color:  #ddd !default;
-$custom-file-border-radius: $border-radius !default;
-$custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+
+$custom-file-padding-y:     $input-btn-padding-y !default;
+$custom-file-padding-x:     $input-btn-padding-x !default;
+$custom-file-line-height:   $input-btn-line-height !default;
+$custom-file-color:         $input-color !default;
+$custom-file-bg:            $input-bg !default;
+$custom-file-border-width:  $input-btn-border-width !default;
+$custom-file-border-color:  $input-border-color !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow:    $input-box-shadow !default;
 $custom-file-button-color:  $custom-file-color !default;
-$custom-file-button-bg:     #eee !default;
+$custom-file-button-bg:     $input-group-addon-bg !default;
 $custom-file-text: (
   placeholder: (
     en: "Choose file..."
@@ -506,241 +491,204 @@ $custom-file-text: (
 ) !default;
 
 
-// Form validation icons
-$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 validation
+$form-feedback-valid-color:   theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !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;
 
-
-// 14. Dropdowns
+// Dropdowns
 //
 // Dropdown menu container and contents.
 
 $dropdown-min-width:             10rem !default;
 $dropdown-padding-y:             .5rem !default;
-$dropdown-margin-top:            .125rem !default;
-$dropdown-bg:                    #fff !default;
-$dropdown-border-color:          rgba(0,0,0,.15) !default;
+$dropdown-spacer:                .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 .5rem 1rem rgba(0,0,0,.175) !default;
+$dropdown-divider-bg:            $gray-200 !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:         $gray-lightest !default;
+$dropdown-link-color:            $gray-900 !default;
+$dropdown-link-hover-color:      darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:         $gray-100 !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-link-disabled-color:   $gray-600 !default;
 
+$dropdown-item-padding-y:        .25rem !default;
 $dropdown-item-padding-x:        1.5rem !default;
 
-$dropdown-header-color:          $gray-light !default;
+$dropdown-header-color:          $gray-600 !default;
 
 
-// 15. Z-index master list
+// Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // 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-dropdown:           1000 !default;
+$zindex-sticky:             1020 !default;
+$zindex-fixed:              1030 !default;
+$zindex-modal-backdrop:     1040 !default;
+$zindex-modal:              1050 !default;
+$zindex-popover:            1060 !default;
+$zindex-tooltip:            1070 !default;
 
+// Navs
 
-// 16. Navbar
+$nav-link-padding-y:            .5rem !default;
+$nav-link-padding-x:            1rem !default;
+$nav-link-disabled-color:       $gray-600 !default;
 
-$navbar-border-radius:              $border-radius !default;
-$navbar-padding-x:                  $spacer !default;
-$navbar-padding-y:                  ($spacer / 2) !default;
+$nav-tabs-border-color:                       #ddd !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-border-radius:                      $border-radius !default;
+$nav-tabs-link-hover-border-color:            $gray-200 !default;
+$nav-tabs-link-active-color:                  $gray-700 !default;
+$nav-tabs-link-active-bg:                     $body-bg !default;
+$nav-tabs-link-active-border-color:           #ddd !default;
 
-$navbar-brand-padding-y:            .25rem !default;
+$nav-pills-border-radius:     $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg:    $component-active-bg !default;
 
-$navbar-divider-padding-y:          .425rem !default;
+// Navbar
 
+$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
+
+$navbar-toggler-padding-y:           .25rem !default;
 $navbar-toggler-padding-x:           .75rem !default;
-$navbar-toggler-padding-y:           .5rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !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-dark-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-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-dark-toggler-border:        rgba(255,255,255,.1) !default;
-
-$navbar-light-color:                rgba(0,0,0,.5) !default;
-$navbar-light-hover-color:          rgba(0,0,0,.7) !default;
-$navbar-light-active-color:         rgba(0,0,0,.9) !default;
-$navbar-light-disabled-color:       rgba(0,0,0,.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(0,0,0,.1) !default;
-
-// 17. Navs
-
-$nav-item-margin:               .2rem !default;
-$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;
-$nav-tabs-border-radius:                      $border-radius !default;
-$nav-tabs-link-hover-border-color:            $gray-lighter !default;
-$nav-tabs-active-link-hover-color:            $gray !default;
-$nav-tabs-active-link-hover-bg:               $body-bg !default;
-$nav-tabs-active-link-hover-border-color:     #ddd !default;
-$nav-tabs-justified-link-border-color:        #ddd !default;
-$nav-tabs-justified-active-link-border-color: $body-bg !default;
-
-$nav-pills-border-radius:     $border-radius !default;
-$nav-pills-active-link-color: $component-active-color !default;
-$nav-pills-active-link-bg:    $component-active-bg !default;
+$navbar-dark-color:                 rgba($white,.5) !default;
+$navbar-dark-hover-color:           rgba($white,.75) !default;
+$navbar-dark-active-color:          rgba($white,1) !default;
+$navbar-dark-disabled-color:        rgba($white,.25) !default;
+$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  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-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black,.1) !default;
 
-// 18. Pagination
+// Pagination
 
-$pagination-padding-x:                .75rem !default;
 $pagination-padding-y:                .5rem !default;
-$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-x:                .75rem !default;
 $pagination-padding-y-sm:             .25rem !default;
-$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-x-sm:             .5rem !default;
 $pagination-padding-y-lg:             .75rem !default;
+$pagination-padding-x-lg:             1.5rem !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;
 
 $pagination-hover-color:               $link-hover-color !default;
-$pagination-hover-bg:                  $gray-lighter !default;
-$pagination-hover-border:              #ddd !default;
+$pagination-hover-bg:                  $gray-200 !default;
+$pagination-hover-border-color:        #ddd !default;
 
-$pagination-active-color:              #fff !default;
-$pagination-active-bg:                 $brand-primary !default;
-$pagination-active-border:             $brand-primary !default;
+$pagination-active-color:              $white !default;
+$pagination-active-bg:                 theme-color("primary") !default;
+$pagination-active-border-color:       theme-color("primary") !default;
 
-$pagination-disabled-color:            $gray-light !default;
-$pagination-disabled-bg:               #fff !default;
-$pagination-disabled-border:           #ddd !default;
+$pagination-disabled-color:            $gray-600 !default;
+$pagination-disabled-bg:               $white !default;
+$pagination-disabled-border-color:     #ddd !default;
 
 
-// 19. Jumbotron
+// Jumbotron
 
 $jumbotron-padding:              2rem !default;
-$jumbotron-bg:                   $gray-lighter !default;
-
-
-// 20. Form states and alerts
-//
-// Define colors for form feedback states and, by default, alerts.
+$jumbotron-bg:                   $gray-200 !default;
 
-$state-success-text:             #3c763d !default;
-$state-success-bg:               #dff0d8 !default;
-$state-success-border:           darken($state-success-bg, 5%) !default;
 
-$state-info-text:                #31708f !default;
-$state-info-bg:                  #d9edf7 !default;
-$state-info-border:              darken($state-info-bg, 7%) !default;
+// Cards
 
-$state-warning-text:             #8a6d3b !default;
-$state-warning-bg:               #fcf8e3 !default;
-$mark-bg:                        $state-warning-bg !default;
-$state-warning-border:           darken($state-warning-bg, 5%) !default;
-
-$state-danger-text:              #a94442 !default;
-$state-danger-bg:                #f2dede !default;
-$state-danger-border:            darken($state-danger-bg, 5%) !default;
-
-
-// 21. Cards
-$card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
-$card-border-width:        1px !default;
+$card-spacer-x:            1.25rem !default;
+$card-border-width:        $border-width !default;
 $card-border-radius:       $border-radius !default;
-$card-border-color:        rgba(0,0,0,.125) !default;
-$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-$card-cap-bg:              $gray-lightest !default;
-$card-bg:                  #fff !default;
-
-$card-link-hover-color:    #fff !default;
+$card-border-color:        rgba($black,.125) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg:              rgba($black, .03) !default;
+$card-bg:                  $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-deck-margin:         .625rem !default;
+$card-group-margin:         ($grid-gutter-width / 2) !default;
+$card-deck-margin:          $card-group-margin !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;
 
 
-// 22. Tooltips
+// 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;
-$tooltip-margin:              3px !default;
+$tooltip-margin:              0 !default;
+
 
 $tooltip-arrow-width:         5px !default;
+$tooltip-arrow-height:        5px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
-// 23. Popovers
+// 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;
-$popover-title-padding-y:             8px !default;
+$popover-header-bg:                    darken($popover-bg, 3%) !default;
+$popover-header-color:                 $headings-color !default;
+$popover-header-padding-y:             8px !default;
+$popover-header-padding-x:             14px !default;
 
-$popover-content-padding-x:           14px !default;
-$popover-content-padding-y:           9px !default;
+$popover-body-color:               $body-color !default;
+$popover-body-padding-y:           9px !default;
+$popover-body-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
+$popover-arrow-height:                5px !default;
 $popover-arrow-color:                 $popover-bg !default;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
 $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
 
 
-// 24. Tags
-
-$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;
+// Badges
 
-$badge-color:                 #fff !default;
-$badge-link-hover-color:      #fff !default;
+$badge-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;
+$badge-padding-x:             .4em !default;
 
 $badge-pill-padding-x:        .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
@@ -748,25 +696,25 @@ $badge-pill-padding-x:        .6em !default;
 $badge-pill-border-radius:    10rem !default;
 
 
-// 25. Modals
+// Modals
 
 // Padding applied to the modal body
 $modal-inner-padding:         15px !default;
 
 $modal-dialog-margin:         10px !default;
-$modal-dialog-sm-up-margin-y: 30px !default;
+$modal-dialog-margin-y-sm-up: 30px !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-box-shadow-xs:    0 3px 9px rgba($black,.5) !default;
+$modal-content-box-shadow-sm-up: 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-200 !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;
@@ -776,153 +724,128 @@ $modal-lg:                    800px !default;
 $modal-md:                    500px !default;
 $modal-sm:                    300px !default;
 
+$modal-transition:            transform .3s ease-out !default;
 
-// 26. Alerts
+
+// Alerts
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
-$alert-margin-bottom:         $spacer-y !default;
+$alert-padding-x:             1.25rem !default;
+$alert-margin-bottom:         1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
 
-$alert-success-bg:            $state-success-bg !default;
-$alert-success-text:          $state-success-text !default;
-$alert-success-border:        $state-success-border !default;
-
-$alert-info-bg:               $state-info-bg !default;
-$alert-info-text:             $state-info-text !default;
-$alert-info-border:           $state-info-border !default;
-
-$alert-warning-bg:            $state-warning-bg !default;
-$alert-warning-text:          $state-warning-text !default;
-$alert-warning-border:        $state-warning-border !default;
-
-$alert-danger-bg:             $state-danger-bg !default;
-$alert-danger-text:           $state-danger-text !default;
-$alert-danger-border:         $state-danger-border !default;
-
 
-// 27. Progress bars
+// Progress bars
 
-$progress-bg:                 #eee !default;
-$progress-bar-color:          #0074d9 !default;
-$progress-border-radius:      $border-radius !default;
-$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
+$progress-height:               1rem !default;
+$progress-font-size:            .75rem !default;
+$progress-bg:                   $gray-200 !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:               theme-color("primary") !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition:       width .6s ease !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;
+// List group
 
+$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;
 
-// 28. List group
+$list-group-item-padding-y:      .75rem !default;
+$list-group-item-padding-x:      1.25rem !default;
 
-$list-group-bg:                 #fff !default;
-$list-group-border-color:       rgba(0,0,0,.125) !default;
-$list-group-border-width:       $border-width !default;
-$list-group-border-radius:      $border-radius !default;
+$list-group-hover-bg:                 $gray-100 !default;
+$list-group-active-color:             $component-active-color !default;
+$list-group-active-bg:                $component-active-bg !default;
+$list-group-active-border-color:      $list-group-active-bg !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-600 !default;
+$list-group-disabled-bg:         $list-group-bg !default;
 
-$list-group-disabled-color:      $gray-light !default;
-$list-group-disabled-bg:         $gray-lighter !default;
-$list-group-disabled-text-color: $list-group-disabled-color !default;
+$list-group-action-color:             $gray-700 !default;
+$list-group-action-hover-color:       $list-group-action-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-action-active-color:      $body-color !default;
+$list-group-action-active-bg:         $gray-200 !default;
 
-$list-group-item-padding-x:             1.25rem !default;
-$list-group-item-padding-y:             .75rem !default;
-$list-group-item-heading-margin-bottom: 5px !default;
 
-
-// 29. Image thumbnails
+// Image thumbnails
 
 $thumbnail-padding:           .25rem !default;
 $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;
 
 
-// 30. Figures
+// Figures
 
 $figure-caption-font-size: 90% !default;
-$figure-caption-color:     $gray-light !default;
+$figure-caption-color:     $gray-600 !default;
 
 
-// 31. Breadcrumbs
+// Breadcrumbs
 
 $breadcrumb-padding-y:          .75rem !default;
 $breadcrumb-padding-x:          1rem !default;
 $breadcrumb-item-padding:       .5rem !default;
 
-$breadcrumb-bg:                 $gray-lighter !default;
-$breadcrumb-divider-color:      $gray-light !default;
-$breadcrumb-active-color:       $gray-light !default;
-$breadcrumb-divider:            "/" !default;
-
-
-// 32. Media objects
-
-$media-margin-top:            15px !default;
-$media-heading-margin-bottom:  5px !default;
-$media-alignment-padding-x:   10px !default;
+$breadcrumb-margin-bottom:      1rem !default;
 
+$breadcrumb-bg:                 $gray-200 !default;
+$breadcrumb-divider-color:      $gray-600 !default;
+$breadcrumb-active-color:       $gray-600 !default;
+$breadcrumb-divider:            "/" !default;
 
-// 33. Carousel
 
-$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+// Carousel
 
-$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-icon-width:                         20px !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;
 
-// 34. Close
+$carousel-transition:           transform .6s ease !default;
 
-$close-font-weight:           $font-weight-bold !default;
-$close-color:                 #000 !default;
-$close-text-shadow:           0 1px 0 #fff !default;
 
+// Close
 
-// 35. Code
+$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;
+
+// Code
 
 $code-font-size:              90% !default;
-$code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
+$code-padding-x:              .4rem !default;
 $code-color:                  #bd4147 !default;
-$code-bg:                     $gray-lightest !default;
+$code-bg:                     $gray-100 !default;
 
-$kbd-color:                   #fff !default;
-$kbd-bg:                      #333 !default;
+$kbd-color:                   $white !default;
+$kbd-bg:                      $gray-900 !default;
 
-$pre-bg:                      $gray-lightest !default;
-$pre-color:                   $gray-dark !default;
-$pre-border-color:            #ccc !default;
+$pre-color:                   $gray-900 !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 1df8ea3b6..4b2bddd5d 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -1,7 +1,7 @@
 // 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
@@ -22,21 +22,16 @@ html {
   box-sizing: inherit;
 }
 
-
-//
-// Variables
-//
-
-@import "custom";
+@import "functions";
 @import "variables";
 
 //
 // Grid mixins
 //
 
-@import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 
 @import "grid";
+@import "utilities/flex";
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index eeff5166c..2700a5705 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -2,10 +2,8 @@
 //
 // Includes only Normalize and our custom Reboot reset.
 
-@import "custom";
+@import "functions";
 @import "variables";
-@import "mixins/hover";
-@import "mixins/tab-focus";
+@import "mixins";
 
-@import "normalize";
 @import "reboot";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index afcfb3268..648f446b6 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,20 +1,14 @@
 /*!
- * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
- * Copyright 2011-2016 The Bootstrap Authors
- * Copyright 2011-2016 Twitter, Inc.
+ * Bootstrap v4.0.0-beta (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
-// Core variables and mixins
-@import "custom";
+@import "functions";
 @import "variables";
 @import "mixins";
-
-// Reset and dependencies
-@import "normalize";
 @import "print";
-
-// Core CSS
 @import "reboot";
 @import "type";
 @import "images";
@@ -23,9 +17,7 @@
 @import "tables";
 @import "forms";
 @import "buttons";
-
-// Components
-@import "animation";
+@import "transitions";
 @import "dropdown";
 @import "button-group";
 @import "input-group";
@@ -41,14 +33,9 @@
 @import "progress";
 @import "media";
 @import "list-group";
-@import "responsive-embed";
 @import "close";
-
-// Components w/ JavaScript
 @import "modal";
 @import "tooltip";
 @import "popover";
 @import "carousel";
-
-// Utility classes
 @import "utilities";
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index 6ed3a81ab..d938e8972 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,14 +1,13 @@
-// Alerts
-
-@mixin alert-variant($background, $border, $body-color) {
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
   background-color: $background;
   border-color: $border;
-  color: $body-color;
 
   hr {
     border-top-color: darken($border, 5%);
   }
+
   .alert-link {
-    color: darken($body-color, 10%);
+    color: darken($color, 10%);
   }
 }
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 77206b9a5..257a6abb7 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,11 +1,12 @@
-// Tags
-
-@mixin badge-variant($color) {
-  background-color: $color;
+@mixin badge-variant($bg) {
+  @include color-yiq($bg);
+  background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      @include color-yiq($bg);
+      text-decoration: none;
+      background-color: darken($bg, 10%);
     }
   }
 }
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 54f29f41d..2024febcf 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -8,15 +8,15 @@
 
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
-    border-top-right-radius: $radius;
     border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 }
 
 @mixin border-right-radius($radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 }
 
@@ -29,7 +29,7 @@
 
 @mixin border-left-radius($radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }
diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
new file mode 100644
index 000000000..b2410e53a
--- /dev/null
+++ b/scss/mixins/_box-shadow.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    box-shadow: $shadow;
+  }
+}
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 178cfd503..8d7378d36 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, lg: 992px, xl: 1200px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -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, lg: 992px, xl: 1200px))
+//    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,7 +31,7 @@
 // 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, lg: 992px, xl: 1200px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
@@ -41,9 +41,9 @@
 // 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: 544px, md: 768px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -78,10 +78,11 @@
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($lower, $breakpoints) {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
   }
 }
 
@@ -89,7 +90,16 @@
 // 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;
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name)
+  } @else if $min == null {
+    @include media-breakpoint-down($name)
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 853a46bfc..312a18f1d 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,111 +3,81 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
-
-  color: $color;
+@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+  @include color-yiq($background);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    color: $color;
+    @include color-yiq($background);
     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 3px rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 3px rgba($border, .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
-    color: $color;
+  .show > &.dropdown-toggle {
     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, $color-hover: #fff) {
   color: $color;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: $color;
 
   @include hover {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
   }
 
   &:focus,
   &.focus {
-    color: $color-hover;
-    background-color: $color;
-        border-color: $color;
+    box-shadow: 0 0 0 3px rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color-hover;
-      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;
   }
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
+  line-height: $line-height;
   @include border-radius($border-radius);
 }
diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
deleted file mode 100644
index 4b1232d8b..000000000
--- a/scss/mixins/_cards.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-// Card variants
-
-@mixin card-variant($background, $border) {
-  background-color: $background;
-  border-color: $border;
-
-  .card-header,
-  .card-footer {
-    background-color: transparent;
-  }
-}
-
-@mixin card-outline-variant($color) {
-  background-color: transparent;
-  border-color: $color;
-}
-
-//
-// Inverse text within a card for use with dark backgrounds
-//
-
-@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,
-  .card-footer,
-  .card-title,
-  .card-blockquote {
-    color: #fff;
-  }
-  .card-link,
-  .card-text,
-  .card-subtitle,
-  .card-blockquote .blockquote-footer {
-    color: rgba(255,255,255,.65);
-  }
-  .card-link {
-    @include hover-focus {
-      color: $card-link-hover-color;
-    }
-  }
-}
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index b72cf2712..11a977b73 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
     display: block;
-    content: "";
     clear: both;
+    content: "";
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index c8aea9669..67e198c26 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,39 +1,7 @@
-// Form validation states
-//
-// Used in _forms.scss to generate the form validation CSS for warnings, errors,
-// and successes.
-
-@mixin form-control-validation($color) {
-  // Color the label and help text
-  .form-control-feedback,
-  .form-control-label,
-  .col-form-label,
-  .form-check-label,
-  .custom-control {
-    color: $color;
-  }
-
-  // Set the border and box shadow on specific inputs to match
-  .form-control {
-    border-color: $color;
-
-    &:focus {
-      @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
-    }
-  }
-
-  // Set validation states also for addons
-  .input-group-addon {
-    color: $color;
-    border-color: $color;
-    background-color: lighten($color, 40%);
-  }
-}
-
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-border-focus` variable.
+// which defaults to the `@input-border-color-focus` variable.
 //
 // We highly encourage you to not customize the default value, but instead use
 // this to tweak colors on an as-needed basis. This aesthetic change is based on
@@ -44,36 +12,70 @@
 // contrast against a dark gray background.
 @mixin form-control-focus() {
   &:focus {
-    color: $input-color-focus;
-    background-color: $input-bg-focus;
-    border-color: $input-border-focus;
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
     outline: none;
-    @include box-shadow($input-box-shadow-focus);
+    @include box-shadow($input-focus-box-shadow);
   }
 }
 
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
 
-@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  #{$parent} {
-    height: $input-height;
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    @include border-radius($border-radius);
+@mixin form-validation-state($state, $color) {
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        box-shadow: 0 0 0 .2rem rgba($color,.25);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
   }
 
-  select#{$parent} {
-    height: $input-height;
-    line-height: $input-height;
+
+  // TODO: redo check markup lol crap
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      + .form-check-label {
+        color: $color;
+      }
+    }
   }
 
-  textarea#{$parent},
-  select[multiple]#{$parent} {
-    height: auto;
+  // custom radios and checks
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-indicator {
+        background-color: rgba($color, .25);
+      }
+      ~ .custom-control-description {
+        color: $color;
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-control {
+        border-color: $color;
+
+        &::before { border-color: inherit; }
+      }
+      &:focus {
+        box-shadow: 0 0 0 .2rem rgba($color,.25);
+      }
+    }
   }
 }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index ac96efe2d..bad79f961 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -3,36 +3,30 @@
 // 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
 //
 // 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;
-  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) {
-  background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
 }
 @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 +34,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 2df7b988e..d8195ddfa 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -3,18 +3,14 @@
 // 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, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-
-    @if $enable-flex {
-      width: 100%;
-    }
-
-    @include make-gutters($gutters);
+    width: 100%;
+    min-height: 1px; // Prevent columns from collapsing when empty
+    padding-right: ($gutter / 2);
+    padding-left:  ($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
@@ -26,24 +22,22 @@
         @extend %grid-column;
       }
     }
-    @if $enable-flex {
-      .col#{$infix} {
-        @extend %grid-column;
-      }
+    .col#{$infix},
+    .col#{$infix}-auto {
+      @extend %grid-column;
     }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      @if $enable-flex {
-        .col#{$infix} {
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-        }
-        .col#{$infix}-auto {
-          flex: 0 0 auto;
-          width: auto;
-        }
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none; // Reset earlier grid tiers
       }
 
       @for $i from 1 through $columns {
@@ -52,20 +46,9 @@
         }
       }
 
-      @each $modifier in (pull, push) {
-        @for $i from 0 through $columns {
-          .#{$modifier}#{$infix}-#{$i} {
-            @include make-col-modifier($modifier, $i, $columns)
-          }
-        }
-      }
-
-      // `$columns - 1` because offsetting by the width of an entire row isn't possible
-      @for $i from 0 through ($columns - 1) {
-        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
-          .offset#{$infix}-#{$i} {
-            @include make-col-modifier(offset, $i, $columns)
-          }
+      @for $i from 1 through $columns {
+        .order#{$infix}-#{$i} {
+          order: $i;
         }
       }
     }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 402a99e92..b694b4d01 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,20 +2,12 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutters: $grid-gutter-widths) {
-  margin-left: auto;
+@mixin make-container() {
+  width: 100%;
   margin-right: auto;
-  @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);
-    }
-  }
+  margin-left: auto;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
 }
 
 
@@ -23,91 +15,33 @@
 @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) {
-      width: $container-max-width;
-      max-width: 100%;
-    }
-  }
-}
-
-@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);
+      max-width: $container-max-width;
     }
   }
 }
 
-@mixin make-row($gutters: $grid-gutter-widths) {
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: wrap;
-  } @else {
-    @include clearfix();
-  }
-
-  @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-row() {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: ($grid-gutter-width / -2);
+  margin-left:  ($grid-gutter-width / -2);
 }
 
-@mixin make-col-ready($gutters: $grid-gutter-widths) {
+@mixin make-col-ready() {
   position: relative;
-  min-height: 1px; // Prevent collapsing
-
   // 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%;
-  }
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
+  width: 100%;
+  min-height: 1px; // Prevent collapsing
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 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);
-  }
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: percentage($size / $columns);
-}
-
-@mixin make-col-push($size, $columns: $grid-columns) {
-  left: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-pull($size, $columns: $grid-columns) {
-  right: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-modifier($type, $size, $columns) {
-  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
-  @if $type == push {
-    @include make-col-push($size, $columns);
-  } @else if $type == pull {
-    @include make-col-pull($size, $columns);
-  } @else if $type == offset {
-    @include make-col-offset($size, $columns);
-  }
+  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);
 }
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 6dd55e705..4aa4b1d5d 100644
--- a/scss/mixins/_hover.scss
+++ b/scss/mixins/_hover.scss
@@ -8,16 +8,18 @@
 //    }
 //  }
 //  @else {
+// scss-lint:disable Indentation
     &:hover { @content }
+// scss-lint:enable Indentation
 //  }
 }
 
+
 @mixin hover-focus {
   @if $enable-hover-media-query {
     &:focus { @content }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:hover {
       @content
@@ -32,8 +34,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &,
     &:focus,
     &:hover {
@@ -49,8 +50,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:active,
     &:hover {
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 81b0f1634..ba27b5041 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -6,25 +6,21 @@
     background-color: $background;
   }
 
+  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
 
-    .list-group-item-heading {
-      color: inherit;
-    }
-
     @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);
     }
 
     &.active {
-      @include plain-hover-focus {
-        color: #fff;
-        background-color: $color;
-        border-color: $color;
-      }
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
     }
   }
+  // scss-lint:enable QualifyingElement
 }
diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss
index fb3d12e9f..493de03a3 100644
--- a/scss/mixins/_nav-divider.scss
+++ b/scss/mixins/_nav-divider.scss
@@ -3,8 +3,8 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 
 @mixin nav-divider($color: #e5e5e5) {
-  height: 1px;
-  margin: ($spacer-y / 2) 0;
+  height: 0;
+  margin: ($spacer / 2) 0;
   overflow: hidden;
-  background-color: $color;
+  border-top: 1px solid $color;
 }
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 8cd9317cf..ff36eb6b4 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -4,6 +4,7 @@
   .page-link {
     padding: $padding-y $padding-x;
     font-size: $font-size;
+    line-height: $line-height;
   }
 
   .page-item {
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
deleted file mode 100644
index 9622d790b..000000000
--- a/scss/mixins/_progress.scss
+++ /dev/null
@@ -1,23 +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;
-  }
-
-  // IE9
-  @media screen and (min-width:0\0) {
-    .progress-bar {
-      background-color: $color;
-    }
-  }
-}
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 b95273097..4cf9e79c7 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,17 +1,18 @@
+// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
-  letter-spacing: normal;
-  line-break: auto;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  white-space: normal;
+  letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
 }
diff --git a/scss/mixins/_resize.scss b/scss/mixins/_resize.scss
index 83fa63791..66f233a63 100644
--- a/scss/mixins/_resize.scss
+++ b/scss/mixins/_resize.scss
@@ -1,6 +1,6 @@
 // Resize anything
 
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
 }
diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index c20858324..a5fa51c5c 100644
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -1,15 +1,17 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -25,8 +27,9 @@
     position: static;
     width: auto;
     height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    white-space: normal;
+    clip-path: none;
   }
 }
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/mixins/_text-truncate.scss b/scss/mixins/_text-truncate.scss
index 5a40bf533..3504bb1aa 100644
--- a/scss/mixins/_text-truncate.scss
+++ b/scss/mixins/_text-truncate.scss
@@ -5,4 +5,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
deleted file mode 100644
index 4005c9d02..000000000
--- a/scss/mixins/_transforms.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// 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/_transition.scss b/scss/mixins/_transition.scss
new file mode 100644
index 000000000..7e33dee31
--- /dev/null
+++ b/scss/mixins/_transition.scss
@@ -0,0 +1,9 @@
+@mixin transition($transition...) {
+  @if $enable-transitions {
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
+  }
+}
diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss
index 88c50b05d..f67fc1c52 100644
--- a/scss/mixins/_visibility.scss
+++ b/scss/mixins/_visibility.scss
@@ -1,5 +1,5 @@
 // Visibility
 
-@mixin invisible {
-  visibility: hidden !important;
+@mixin invisible($visibility) {
+  visibility: $visibility !important;
 }
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index b9ac29523..1ef34fd8e 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -1,19 +1,6 @@
-//
-// Contextual backgrounds
-//
-
-.bg-faded {
-  background-color: darken($body-bg, 3%);
+@each $color, $value in $theme-colors {
+  @include bg-variant('.bg-#{$color}', $value);
 }
 
-@include bg-variant('.bg-primary', $brand-primary);
-
-@include bg-variant('.bg-success', $brand-success);
-
-@include bg-variant('.bg-info', $brand-info);
-
-@include bg-variant('.bg-warning', $brand-warning);
-
-@include bg-variant('.bg-danger', $brand-danger);
-
-@include bg-variant('.bg-inverse', $brand-inverse);
+.bg-white { background-color: $white !important; }
+.bg-transparent { background-color: transparent !important; }
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index b256881e5..b7e91c260 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -2,30 +2,45 @@
 // Border
 //
 
+.border          { border: $border-width solid $border-color !important; }
 .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; }
 
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+.border-white {
+  border-color: $white !important;
+}
+
 //
 // Border-radius
 //
 
 .rounded {
-  @include border-radius($border-radius);
+  border-radius: $border-radius !important;
 }
 .rounded-top {
-  @include border-top-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-top-right-radius: $border-radius !important;
 }
 .rounded-right {
-  @include border-right-radius($border-radius);
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
 }
 .rounded-bottom {
-  @include border-bottom-radius($border-radius);
+  border-bottom-right-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 .rounded-left {
-  @include border-left-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 
 .rounded-circle {
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 395e41c39..45353620a 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -1,8 +1,7 @@
 //
-// Display utilities
+// Utilities for common `display` values
 //
 
-
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -14,5 +13,41 @@
     .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; }
+  }
+}
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+.d-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.d-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+.d-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
   }
 }
diff --git a/scss/_responsive-embed.scss b/scss/utilities/_embed.scss
index 244321959..d3362b6fd 100644
--- a/scss/_responsive-embed.scss
+++ b/scss/utilities/_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/utilities/_flex.scss b/scss/utilities/_flex.scss
index c3efb9d71..b28c0b97d 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -2,32 +2,43 @@
 //
 // Custom styles for additional flex alignment options.
 
-@if $enable-flex {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-      // Flex column reordering
-      .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; }
 
-      // Alignment for every item
-      .flex-items#{$infix}-top    { align-items: flex-start; }
-      .flex-items#{$infix}-middle { align-items: center; }
-      .flex-items#{$infix}-bottom { align-items: flex-end; }
+    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
+    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
+    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
 
-      // Alignment per item
-      .flex#{$infix}-top    { align-self: flex-start; }
-      .flex#{$infix}-middle { align-self: center; }
-      .flex#{$infix}-bottom { align-self: flex-end; }
+    .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; }
 
-      // Horizontal alignment of item
-      .flex-items#{$infix}-left    { justify-content: flex-start; }
-      .flex-items#{$infix}-center  { justify-content: center; }
-      .flex-items#{$infix}-right   { justify-content: flex-end; }
-      .flex-items#{$infix}-around  { justify-content: space-around; }
-      .flex-items#{$infix}-between { justify-content: space-between; }
-    }
+    .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/_position.scss b/scss/utilities/_position.scss
new file mode 100644
index 000000000..bddae2151
--- /dev/null
+++ b/scss/utilities/_position.scss
@@ -0,0 +1,34 @@
+// Common values
+
+// Sass list not in variables since it's not intended for customization.
+$positions: static, relative, absolute, fixed, sticky;
+
+@each $position in $positions {
+  .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
+
+.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 {
+  @supports (position: sticky) {
+    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 a8d8e0afb..150d31631 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,51 +1,49 @@
-// Width and height
-
-.w-100 { width: 100% !important; }
-.h-100 { height: 100% !important; }
-
-.mw-100 { max-width: 100% !important; }
-.mh-100 { max-height: 100% !important; }
-
 // Margin and Padding
 
-.mx-auto {
-  margin-right: auto !important;
-  margin-left:  auto !important;
-}
-
 @each $breakpoint in map-keys($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);
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-      @include media-breakpoint-up($breakpoint) {
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
 
-        .#{$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}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
         .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right:  $length-x !important;
-          #{$prop}-left:   $length-x !important;
+          #{$prop}-right: $length !important;
         }
+        .#{$abbrev}b#{$infix}-#{$size},
         .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length-y !important;
-          #{$prop}-bottom: $length-y !important;
+          #{$prop}-bottom: $length !important;
+        }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
         }
       }
     }
-  }
-}
 
-// Positioning
-
-.pos-f-t {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
+    // Some special margin utils
+    .m#{$infix}-auto { margin: auto !important; }
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+    .mr#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+    }
+    .mb#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+    }
+  }
 }
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 4ac90533a..7573f2987 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -28,31 +28,20 @@
 
 // Weight and italics
 
-.font-weight-normal { font-weight: $font-weight-normal; }
-.font-weight-bold   { font-weight: $font-weight-bold; }
-.font-italic        { font-style: italic; }
+.font-weight-light  { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold   { font-weight: $font-weight-bold !important; }
+.font-italic        { font-style: italic !important; }
 
 // Contextual colors
 
-.text-white {
-  color: #fff !important;
-}
-
-@include text-emphasis-variant('.text-muted', $text-muted);
-
-@include text-emphasis-variant('.text-primary', $brand-primary);
-
-@include text-emphasis-variant('.text-success', $brand-success);
+.text-white { color: #fff !important; }
 
-@include text-emphasis-variant('.text-info', $brand-info);
-
-@include text-emphasis-variant('.text-warning', $brand-warning);
-
-@include text-emphasis-variant('.text-danger', $brand-danger);
-
-// Font color
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant('.text-#{$color}', $value);
+}
 
-@include text-emphasis-variant('.text-gray-dark', $gray-dark);
+.text-muted { color: $text-muted !important; }
 
 // Misc
 
diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss
index fcedc9cb9..823406dc3 100644
--- a/scss/utilities/_visibility.scss
+++ b/scss/utilities/_visibility.scss
@@ -2,54 +2,10 @@
 // Visibility utilities
 //
 
-.invisible {
-  @include invisible();
-}
-
-// Responsive visibility utilities
-
-@each $bp in map-keys($grid-breakpoints) {
-  .hidden-#{$bp}-up {
-    @include media-breakpoint-up($bp) {
-      display: none !important;
-    }
-  }
-  .hidden-#{$bp}-down {
-    @include media-breakpoint-down($bp) {
-      display: none !important;
-    }
-  }
+.visible {
+  @include invisible(visible);
 }
 
-
-// Print utilities
-//
-// Media queries are placed on the inside to be mixin-friendly.
-
-.visible-print-block {
-  display: none !important;
-
-  @media print {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-
-  @media print {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-
-  @media print {
-    display: inline-block !important;
-  }
-}
-
-.hidden-print {
-  @media print {
-    display: none !important;
-  }
+.invisible {
+  @include invisible(hidden);
 }