rake update[v4-dev]

19 files changed, 107 insertions, 67 deletions

diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss
index 8e550d8..b9f6c60 100644
--- a/assets/stylesheets/bootstrap/_alert.scss
+++ b/assets/stylesheets/bootstrap/_alert.scss
@@ -5,7 +5,7 @@
 .alert {
   padding: $alert-padding;
   margin-bottom: $spacer-y;
-  border: 1px solid transparent;
+  border: $alert-border-width solid transparent;
   @include border-radius($alert-border-radius);
 
   // Improve alignment and spacing of inner content
diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss
index 37ad14d..f82f433 100644
--- a/assets/stylesheets/bootstrap/_buttons.scss
+++ b/assets/stylesheets/bootstrap/_buttons.scss
@@ -8,7 +8,6 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  touch-action: manipulation;
   cursor: pointer;
   user-select: none;
   border: $border-width solid transparent;
diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss
index aff6036..f6a4fd8 100644
--- a/assets/stylesheets/bootstrap/_card.scss
+++ b/assets/stylesheets/bootstrap/_card.scss
@@ -4,6 +4,7 @@
 
 .card {
   position: relative;
+  display: block;
   margin-bottom: $card-spacer-y;
   background-color: $card-bg;
   border: $card-border-width solid $card-border-color;
@@ -135,7 +136,7 @@
   }
   .card-link {
     @include hover-focus {
-      color: #fff;
+      color: $card-link-hover-color;
     }
   }
 }
@@ -169,10 +170,10 @@
 
 // Card image caps
 .card-img-top {
-  @include border-radius(.25rem .25rem 0 0);
+  @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
 }
 .card-img-bottom {
-  @include border-radius(0 0 .25rem .25rem);
+  @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
 }
 
 
@@ -246,6 +247,8 @@
       // Handle rounded corners
       @if $enable-rounded {
         &:first-child {
+          @include border-right-radius(0);
+
           .card-img-top {
             border-top-right-radius: 0;
           }
@@ -254,6 +257,8 @@
           }
         }
         &:last-child {
+          @include border-left-radius(0);
+
           .card-img-top {
             border-top-left-radius: 0;
           }
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss
index b02a2cd..bf0ea61 100644
--- a/assets/stylesheets/bootstrap/_carousel.scss
+++ b/assets/stylesheets/bootstrap/_carousel.scss
@@ -178,9 +178,9 @@
     cursor: pointer;
     // IE9 hack for event handling
     //
-    // Internet Explorer 9 does not support clicks on elements without a set
-    // `background-color`. We cannot use `filter` since that's not viewed as a
-    // background color by the browser. Thus, a hack is needed.
+    // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
+    // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
+    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     background-color: rgba(0,0,0,0); // IE9
     border: 1px solid $carousel-indicator-border-color;
     border-radius: 10px;
diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss
index aa1a9d1..c477dfb 100644
--- a/assets/stylesheets/bootstrap/_dropdown.scss
+++ b/assets/stylesheets/bootstrap/_dropdown.scss
@@ -10,6 +10,7 @@
     display: inline-block;
     width: 0;
     height: 0;
+    margin-right: .25rem;
     margin-left: .25rem;
     vertical-align: middle;
     content: "";
@@ -45,6 +46,7 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   font-size: $font-size-base;
+  color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: $dropdown-bg;
@@ -170,7 +172,7 @@
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 //
-// Just add .dropup after the standard .dropdown class and you're set, bro.
+// Just add .dropup after the standard .dropdown class and you're set.
 // TODO: abstract this so that the navbar fixed styles are not placed here?
 
 .dropup,
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index 655c137..8796cbb 100644
--- a/assets/stylesheets/bootstrap/_forms.scss
+++ b/assets/stylesheets/bootstrap/_forms.scss
@@ -261,7 +261,7 @@ input[type="checkbox"] {
 
 .form-control-success,
 .form-control-warning,
-.form-control-error {
+.form-control-danger {
   padding-right: ($input-padding-x * 3);
   background-repeat: no-repeat;
   background-position: center right ($input-height * .25);
@@ -285,11 +285,11 @@ input[type="checkbox"] {
   }
 }
 
-.has-error {
+.has-danger {
   @include form-control-validation($brand-danger);
 
-  .form-control-error {
-    background-image: url($form-icon-error);
+  .form-control-danger {
+    background-image: url($form-icon-danger);
   }
 }
 
@@ -354,7 +354,7 @@ input[type="checkbox"] {
 // .has-warning {
 //   @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
 // }
-// .has-error {
+// .has-danger {
 //   @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
 // }
 //
diff --git a/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss
index eb7b4ce..ffcd708 100644
--- a/assets/stylesheets/bootstrap/_images.scss
+++ b/assets/stylesheets/bootstrap/_images.scss
@@ -1,4 +1,10 @@
 // Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
 .img-fluid {
   @include img-fluid();
 }
@@ -26,3 +32,22 @@
 .img-circle {
   border-radius: 50%;
 }
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: ($spacer-y / 2);
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: $gray-light;
+}
diff --git a/assets/stylesheets/bootstrap/_labels.scss b/assets/stylesheets/bootstrap/_labels.scss
index 9dcc10e..8b2f0f8 100644
--- a/assets/stylesheets/bootstrap/_labels.scss
+++ b/assets/stylesheets/bootstrap/_labels.scss
@@ -43,7 +43,9 @@ a.label {
 .label-pill {
   padding-right: .6em;
   padding-left: .6em;
-  @include border-radius(1rem);
+  // Use a higher than normal value to ensure completely rounded edges when
+  // customizing padding or font-size on labels.
+  @include border-radius(10rem);
 }
 
 // Colors
diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss
index 551f3c9..5714c77 100644
--- a/assets/stylesheets/bootstrap/_nav.scss
+++ b/assets/stylesheets/bootstrap/_nav.scss
@@ -91,6 +91,8 @@
 //
 
 .nav-pills {
+  @include clearfix();
+
   .nav-item {
     float: left;
 
diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss
index 7c52785..9337913 100644
--- a/assets/stylesheets/bootstrap/_reboot.scss
+++ b/assets/stylesheets/bootstrap/_reboot.scss
@@ -191,6 +191,8 @@ img {
   // By default, `<img>`s are `inline-block`. This assumes that, and vertically
   // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
+  // Note: `<img>`s are deliberately not made responsive by default.
+  // For the rationale behind this, see the comments on the `.img-fluid` class.
 }
 
 
@@ -205,6 +207,28 @@ img {
 }
 
 
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
 //
 // Tables
 //
@@ -296,3 +320,8 @@ output {
 //  line-height: $line-height;
 //  color: $input-color;
 }
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
+}
diff --git a/assets/stylesheets/bootstrap/_responsive-embed.scss b/assets/stylesheets/bootstrap/_responsive-embed.scss
index ac4dc74..aaf8c04 100644
--- a/assets/stylesheets/bootstrap/_responsive-embed.scss
+++ b/assets/stylesheets/bootstrap/_responsive-embed.scss
@@ -22,17 +22,14 @@
   }
 }
 
-// Modifier class for 21:9 aspect ratio
 .embed-responsive-21by9 {
   padding-bottom: percentage(9 / 21);
 }
 
-// Modifier class for 16:9 aspect ratio
 .embed-responsive-16by9 {
   padding-bottom: percentage(9 / 16);
 }
 
-// Modifier class for 4:3 aspect ratio
 .embed-responsive-4by3 {
   padding-bottom: percentage(3 / 4);
 }
diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss
index 1d55ccb..23ed540 100644
--- a/assets/stylesheets/bootstrap/_type.scss
+++ b/assets/stylesheets/bootstrap/_type.scss
@@ -4,21 +4,13 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: $headings-margin-bottom;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
   color: $headings-color;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-  margin-bottom: $headings-margin-bottom;
-}
-
 h1 { font-size: $font-size-h1; }
 h2 { font-size: $font-size-h2; }
 h3 { font-size: $font-size-h3; }
@@ -170,23 +162,3 @@ mark,
     }
   }
 }
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-
-  > img {
-    @extend .img-fluid;
-    margin-bottom: ($spacer-y / 2);
-    line-height: 1;
-  }
-}
-
-.figure-caption {
-  font-size: 90%;
-  color: $gray-light;
-}
diff --git a/assets/stylesheets/bootstrap/_utilities-responsive.scss b/assets/stylesheets/bootstrap/_utilities-responsive.scss
index 2c3617c..0470dc5 100644
--- a/assets/stylesheets/bootstrap/_utilities-responsive.scss
+++ b/assets/stylesheets/bootstrap/_utilities-responsive.scss
@@ -1,5 +1,5 @@
 //
-// Mixins
+// Responsive utilities
 //
 
 @each $bp in map-keys($grid-breakpoints) {
diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss
index ea04f9a..521d2f9 100644
--- a/assets/stylesheets/bootstrap/_utilities.scss
+++ b/assets/stylesheets/bootstrap/_utilities.scss
@@ -31,13 +31,8 @@
   @include sr-only-focusable();
 }
 
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-[hidden] {
-  display: none !important;
-}
-
 .invisible {
-  visibility: hidden;
+  visibility: hidden !important;
 }
 
 .text-hide {
@@ -70,9 +65,9 @@
 
 // Transformation
 
-.text-lowercase      { text-transform: lowercase; }
-.text-uppercase      { text-transform: uppercase; }
-.text-capitalize     { text-transform: capitalize; }
+.text-lowercase      { text-transform: lowercase !important; }
+.text-uppercase      { text-transform: uppercase !important; }
+.text-capitalize     { text-transform: capitalize !important; }
 
 // Contextual colors
 
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index dd331d9..b7bb880 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -134,7 +134,7 @@ $font-size-root:             16px !default;
 
 $font-size-base:             1rem !default;
 $font-size-lg:               1.25rem !default;
-$font-size-sm:               .85rem !default;
+$font-size-sm:               .875rem !default;
 $font-size-xs:               .75rem !default;
 
 $font-size-h1:               2.5rem !default;
@@ -295,9 +295,9 @@ $input-group-addon-border-color: $input-border !default;
 $cursor-disabled:                not-allowed !default;
 
 // Form validation icons
-$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==" !default;
-$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==" !default;
-$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=" !default;
+$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==";
+$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+";
+$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=";
 
 
 // Dropdowns
@@ -456,6 +456,9 @@ $card-border-radius-inner: ($card-border-radius - $card-border-width) !default;
 $card-cap-bg:              #f5f5f5 !default;
 $card-bg:                  #fff !default;
 
+$card-link-hover-color:    #fff !default;
+
+
 // Tooltips
 
 $tooltip-max-width:           200px !default;
@@ -472,7 +475,6 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 $popover-bg:                          #fff !default;
 $popover-max-width:                   276px !default;
 $popover-border-color:                rgba(0,0,0,.2) !default;
-$popover-fallback-border-color:       #ccc !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
 
@@ -481,7 +483,6 @@ $popover-arrow-color:                 $popover-bg !default;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 $popover-arrow-outer-color:           fade-in($popover-border-color, 0.05) !default;
-$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
 
 
 // Labels
@@ -525,6 +526,7 @@ $modal-sm:                    300px !default;
 $alert-padding:               15px !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      bold !default;
+$alert-border-width:          $border-width !default;
 
 $alert-success-bg:            $state-success-bg !default;
 $alert-success-text:          $state-success-text !default;
diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss
index d2cc543..0c9f2f0 100644
--- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss
+++ b/assets/stylesheets/bootstrap/mixins/_background-variant.scss
@@ -2,8 +2,8 @@
 
 @mixin bg-variant($parent, $color) {
   #{$parent} {
-    color: #fff;
-    background-color: $color;
+    color: #fff !important;
+    background-color: $color !important;
   }
   a#{$parent} {
     @include hover-focus {
diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
index 1685e59..a868833 100644
--- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
+++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
@@ -74,3 +74,13 @@
     }
   }
 }
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss
index 8a59e04..eab8063 100644
--- a/assets/stylesheets/bootstrap/mixins/_forms.scss
+++ b/assets/stylesheets/bootstrap/mixins/_forms.scss
@@ -5,7 +5,7 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .help-block,
+  .text-help,
   .form-control-label,
   .radio,
   .checkbox,
diff --git a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
index 0a6428e..27a4f45 100644
--- a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
+++ b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
@@ -2,7 +2,7 @@
 
 @mixin text-emphasis-variant($parent, $color) {
   #{$parent} {
-    color: $color;
+    color: $color !important;
   }
   a#{$parent} {
     @include hover-focus {