Merge branch 'master' into docs_derp

19 files changed, 301 insertions, 231 deletions

diff --git a/less/button-groups.less b/less/button-groups.less
index ef9c34e77..58fd90675 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -37,18 +37,17 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
+  margin-left: -5px; // Offset the first child's margin
   &:extend(.clearfix all);
 
-  .btn-group {
+  .btn-group,
+  .input-group {
     float: left;
   }
-  // Space out series of button groups
   > .btn,
-  > .btn-group {
-    + .btn,
-    + .btn-group {
-      margin-left: 5px;
-    }
+  > .btn-group,
+  > .input-group {
+    margin-left: 5px;
   }
 }
 
@@ -188,13 +187,13 @@
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
-.btn-group-vertical > .btn-group:first-child {
+.btn-group-vertical > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     .border-bottom-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
   .border-top-radius(0);
 }
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 4bdc223fc..dde2038e3 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -46,6 +46,8 @@
   background-clip: padding-box;
 
   // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
   &.pull-right {
     right: 0;
     left: auto;
@@ -126,6 +128,25 @@
   }
 }
 
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
 // Dropdown section headers
 .dropdown-header {
   display: block;
@@ -180,7 +201,12 @@
 @media (min-width: @grid-float-breakpoint) {
   .navbar-right {
     .dropdown-menu {
-      .pull-right > .dropdown-menu();
+      .dropdown-menu-right();
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      .dropdown-menu-left();
     }
   }
 }
diff --git a/less/forms.less b/less/forms.less
index f7fc5d66c..aefa5a462 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -155,6 +155,14 @@ output {
   }
 }
 
+// Special styles for iOS date input
+//
+// In Mobile Safari, date inputs require a pixel line-height that matches the
+// given height of the input.
+input[type="date"] {
+  line-height: @input-height-base;
+}
+
 
 // Form groups
 //
@@ -226,7 +234,12 @@ input[type="checkbox"],
   }
 }
 
+
 // Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+
 .input-sm {
   .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
@@ -240,15 +253,35 @@ input[type="checkbox"],
 //
 // Apply contextual and semantic states to individual form controls.
 
-// Warning
+.has-feedback {
+  // Enable absolute positioning
+  position: relative;
+
+  // Ensure icons don't overlap text
+  .form-control {
+    padding-right: (@input-height-base * 1.25);
+  }
+
+  // Feedback icon (requires .glyphicon classes)
+  .form-control-feedback {
+    position: absolute;
+    top: (@line-height-computed + 5); // Height of the `label` and its margin
+    right: 0;
+    display: block;
+    width: @input-height-base;
+    height: @input-height-base;
+    line-height: @input-height-base;
+    text-align: center;
+  }
+}
+
+// Feedback states
 .has-warning {
   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
-// Error
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
-// Success
 .has-success {
   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 }
@@ -294,7 +327,7 @@ input[type="checkbox"],
   // Kick in the inline
   @media (min-width: @screen-sm) {
     // Inline-block all the things for "inline"
-    .form-group  {
+    .form-group {
       display: inline-block;
       margin-bottom: 0;
       vertical-align: middle;
@@ -303,12 +336,13 @@ input[type="checkbox"],
     // In navbar-form, allow folks to *not* use `.form-group`
     .form-control {
       display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
       vertical-align: middle;
     }
 
-    // Override `width: 100%;` when not within a `.form-group`
-    select.form-control {
-      width: auto;
+    .control-label {
+      margin-bottom: 0;
+      vertical-align: middle;
     }
 
     // Remove default margin on radios/checkboxes that were used for stacking, and
@@ -327,6 +361,14 @@ input[type="checkbox"],
       float: none;
       margin-left: 0;
     }
+
+    // Validation states
+    //
+    // Reposition the icon because it's now within a grid column and columns have
+    // `position: relative;` on them. Also accounts for the grid gutter padding.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
   }
 }
 
@@ -370,4 +412,13 @@ input[type="checkbox"],
       text-align: right;
     }
   }
+
+  // Validation states
+  //
+  // Reposition the icon because it's now within a grid column and columns have
+  // `position: relative;` on them. Also accounts for the grid gutter padding.
+  .has-feedback .form-control-feedback {
+    top: 0;
+    right: (@grid-gutter-width / 2);
+  }
 }
diff --git a/less/glyphicons.less b/less/glyphicons.less
index 8a68f11ef..29ce1c071 100644
--- a/less/glyphicons.less
+++ b/less/glyphicons.less
@@ -28,10 +28,6 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  &:empty {
-    width: 1em;
-  }
 }
 
 // Individual icons
diff --git a/less/grid.less b/less/grid.less
index dfae6999b..88957f42a 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -10,10 +10,10 @@
 .container {
   .container-fixed();
 
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     width: @container-sm;
   }
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     width: @container-md;
   }
   @media (min-width: @screen-lg-min) {
diff --git a/less/input-groups.less b/less/input-groups.less
index d19c4c64a..de1e68903 100644
--- a/less/input-groups.less
+++ b/less/input-groups.less
@@ -17,6 +17,11 @@
   }
 
   .form-control {
+    // 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;
   }
@@ -112,8 +117,26 @@
 // -------------------------
 .input-group-btn {
   position: relative;
+  // Jankily prevent input button groups from wrapping with `white-space` and
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
   white-space: nowrap;
 
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    position: relative;
+    + .btn {
+      margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
   // Negative margin to only have a 1px border between the two
   &:first-child > .btn {
     margin-right: -1px;
@@ -122,15 +145,3 @@
     margin-left: -1px;
   }
 }
-.input-group-btn > .btn {
-  position: relative;
-  // Jankily prevent input button groups from wrapping
-  + .btn {
-    margin-left: -4px;
-  }
-  // Bring the "active" button to the front
-  &:hover,
-  &:active {
-    z-index: 2;
-  }
-}
diff --git a/less/jumbotron.less b/less/jumbotron.less
index 0460b69d4..a15e16971 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -6,19 +6,17 @@
 .jumbotron {
   padding: @jumbotron-padding;
   margin-bottom: @jumbotron-padding;
-  font-size: @jumbotron-font-size;
-  font-weight: 200;
-  line-height: (@line-height-base * 1.5);
   color: @jumbotron-color;
   background-color: @jumbotron-bg;
 
   h1,
   .h1 {
-    line-height: 1;
     color: @jumbotron-heading-color;
   }
   p {
-    line-height: 1.4;
+    margin-bottom: (@jumbotron-padding / 2);
+    font-size: @jumbotron-font-size;
+    font-weight: 200;
   }
 
   .container & {
diff --git a/less/list-group.less b/less/list-group.less
index 35fff05d4..ed3bfa5a5 100644
--- a/less/list-group.less
+++ b/less/list-group.less
@@ -79,7 +79,7 @@ a.list-group-item {
       color: inherit;
     }
     .list-group-item-text {
-      color: lighten(@list-group-active-bg, 40%);
+      color: @list-group-active-text-color;
     }
   }
 }
diff --git a/less/mixins.less b/less/mixins.less
index b5beaddf2..5bcaeabbc 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -147,17 +147,17 @@
 // Transformations
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9+
+      -ms-transform: rotate(@degrees); // IE9 only
           transform: rotate(@degrees);
 }
 .scale(@ratio; @ratio-y...) {
   -webkit-transform: scale(@ratio, @ratio-y);
-      -ms-transform: scale(@ratio, @ratio-y); // IE9+
+      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
           transform: scale(@ratio, @ratio-y);
 }
 .translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9+
+      -ms-transform: translate(@x, @y); // IE9 only
           transform: translate(@x, @y);
 }
 .skew(@x; @y) {
@@ -172,12 +172,12 @@
 
 .rotateX(@degrees) {
   -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9+
+      -ms-transform: rotateX(@degrees); // IE9 only
           transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
   -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9+
+      -ms-transform: rotateY(@degrees); // IE9 only
           transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
@@ -193,6 +193,7 @@
 .transform-origin(@origin) {
   -webkit-transform-origin: @origin;
      -moz-transform-origin: @origin;
+      -ms-transform-origin: @origin; // IE9 only
           transform-origin: @origin;
 }
 
@@ -201,6 +202,30 @@
   -webkit-animation: @animation;
           animation: @animation;
 }
+.animation-name(@name) {
+  -webkit-animation-name: @name;
+          animation-name: @name;
+}
+.animation-duration(@duration) {
+  -webkit-animation-duration: @duration;
+          animation-duration: @duration;
+}
+.animation-timing-function(@timing-function) {
+  -webkit-animation-timing-function: @timing-function;
+          animation-timing-function: @timing-function;
+}
+.animation-delay(@delay) {
+  -webkit-animation-delay: @delay;
+          animation-delay: @delay;
+}
+.animation-iteration-count(@iteration-count) {
+  -webkit-animation-iteration-count: @iteration-count;
+          animation-iteration-count: @iteration-count;
+}
+.animation-direction(@direction) {
+  -webkit-animation-direction: @direction;
+          animation-direction: @direction;
+}
 
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
@@ -353,7 +378,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-.img-responsive(@display: block;) {
+.img-responsive(@display: block) {
   display: @display;
   max-width: 100%; // Part 1: Set a maximum relative to the parent
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@@ -613,30 +638,39 @@
   position: relative;
   float: left;
   width: percentage((@columns / @grid-columns));
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 }
+.make-xs-column-offset(@columns) {
+  @media (min-width: @screen-xs-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-xs-column-push(@columns) {
+  @media (min-width: @screen-xs-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-xs-column-pull(@columns) {
+  @media (min-width: @screen-xs-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
 
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-sm-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the small column offsets
 .make-sm-column-offset(@columns) {
   @media (min-width: @screen-sm-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -653,23 +687,19 @@
   }
 }
 
+
 // Generate the medium columns
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-md-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the medium column offsets
 .make-md-column-offset(@columns) {
   @media (min-width: @screen-md-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -686,23 +716,19 @@
   }
 }
 
+
 // Generate the large columns
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-lg-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the large column offsets
 .make-lg-column-offset(@columns) {
   @media (min-width: @screen-lg-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -825,6 +851,10 @@
     border-color: @border-color;
     background-color: @background-color;
   }
+  // Optional feedack icon
+  .form-control-feedback {
+    color: @text-color;
+  }
 }
 
 // Form control focus state
diff --git a/less/modals.less b/less/modals.less
index 292b5bd9c..f6ab34769 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -22,7 +22,12 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: @zindex-modal-background;
+  z-index: @zindex-modal;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -37,7 +42,6 @@
   position: relative;
   width: auto;
   margin: 10px;
-  z-index: (@zindex-modal-background + 10);
 }
 
 // Actual modal
@@ -60,11 +64,11 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: (@zindex-modal-background - 10);
+  z-index: @zindex-modal-background;
   background-color: @modal-backdrop-bg;
   // Fade for backdrop
   &.fade { .opacity(0); }
-  &.in { .opacity(.5); }
+  &.in { .opacity(@modal-backdrop-opacity); }
 }
 
 // Modal header
@@ -116,8 +120,9 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: @screen-sm-min) {
+@media (min-width: @screen-sm-min) {
 
+  // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: 600px;
     margin: 30px auto;
@@ -126,4 +131,8 @@
     .box-shadow(0 5px 15px rgba(0,0,0,.5));
   }
 
+  // Modal sizes
+  .modal-sm { width: @modal-sm; }
+  .modal-lg { width: @modal-lg; }
+
 }
diff --git a/less/navbar.less b/less/navbar.less
index 51e3df258..621772fbb 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -161,6 +161,13 @@
     text-decoration: none;
   }
 
+  // Prevent Glyphicons from increasing height of navbar
+  > .glyphicon {
+    float: left;
+    margin-top: -2px;
+    margin-right: 5px;
+  }
+
   @media (min-width: @grid-float-breakpoint) {
     .navbar > .container &,
     .navbar > .container-fluid & {
@@ -205,7 +212,7 @@
 
 // Navbar nav links
 //
-// Builds on top of the `.nav` components with it's own modifier class to make
+// Builds on top of the `.nav` components with its own modifier class to make
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
@@ -329,13 +336,6 @@
   .border-bottom-radius(0);
 }
 
-// Right aligned menus need alt position
-.navbar-nav.pull-right > li > .dropdown-menu,
-.navbar-nav > li > .dropdown-menu.pull-right {
-  left: auto;
-  right: 0;
-}
-
 
 // Buttons in navbars
 //
diff --git a/less/navs.less b/less/navs.less
index e4ac14459..9e729b39f 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -91,7 +91,7 @@
       }
     }
 
-    // Active state, and it's :hover to override normal :hover
+    // Active state, and its :hover to override normal :hover
     &.active > a {
       &,
       &:hover,
diff --git a/less/pager.less b/less/pager.less
index 5205f0ee5..59103f445 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -15,15 +15,15 @@
     > span {
       display: inline-block;
       padding: 5px 14px;
-      background-color: @pagination-bg;
-      border: 1px solid @pagination-border;
+      background-color: @pager-bg;
+      border: 1px solid @pager-border;
       border-radius: @pager-border-radius;
     }
 
     > a:hover,
     > a:focus {
       text-decoration: none;
-      background-color: @pagination-hover-bg;
+      background-color: @pager-hover-bg;
     }
   }
 
@@ -47,7 +47,7 @@
     > a:focus,
     > span {
       color: @pager-disabled-color;
-      background-color: @pagination-bg;
+      background-color: @pager-bg;
       cursor: not-allowed;
     }
   }
diff --git a/less/panels.less b/less/panels.less
index a6b723c68..ef8786867 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -14,7 +14,7 @@
 
 // Panel contents
 .panel-body {
-  padding: 15px;
+  padding: @panel-body-padding;
   &:extend(.clearfix all);
 }
 
@@ -95,6 +95,19 @@
     border: 0;
     margin-bottom: 0;
   }
+  > .table-striped,
+  > .table-responsive > .table-striped {
+    > tbody > tr:last-child {
+      td:first-child,
+      th:first-child {
+        border-bottom-left-radius: (@panel-border-radius - 1);
+      }
+      td:last-child,
+      th:last-child {
+        border-bottom-left-radius: (@panel-border-radius - 1);
+      }
+    }
+  }
 }
 
 
@@ -109,7 +122,7 @@
   }
 }
 
-// Within heading, strip any `h*` tag of it's default margins for spacing.
+// Within heading, strip any `h*` tag of its default margins for spacing.
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 5823c8fca..5a31816af 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -23,172 +23,51 @@
 
 
 // Visibility utilities
-
 .visible-xs {
   .responsive-invisibility();
+
   @media (max-width: @screen-xs-max) {
     .responsive-visibility();
   }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-sm {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-md {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-lg {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-lg-min) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
-  .responsive-visibility();
   @media (max-width: @screen-xs-max) {
     .responsive-invisibility();
   }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-sm {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-md {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-lg {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-lg-min) {
     .responsive-invisibility();
   }
diff --git a/less/tooltip.less b/less/tooltip.less
index ce793cb93..bd626996f 100644
--- a/less/tooltip.less
+++ b/less/tooltip.less
@@ -13,7 +13,7 @@
   line-height: 1.4;
   .opacity(0);
 
-  &.in     { .opacity(.9); }
+  &.in     { .opacity(@tooltip-opacity); }
   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
diff --git a/less/type.less b/less/type.less
index 24a581fe8..5373975d2 100644
--- a/less/type.less
+++ b/less/type.less
@@ -81,7 +81,13 @@ small,
 // Undo browser default styling
 cite    { font-style: normal; }
 
-// Contextual emphasis
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+
+// Contextual colors
 .text-muted {
   color: @text-muted;
 }
@@ -116,11 +122,42 @@ cite    { font-style: normal; }
   }
 }
 
-// Alignment
-.text-left           { text-align: left; }
-.text-right          { text-align: right; }
-.text-center         { text-align: center; }
-.text-justify        { text-align: justify; }
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+  // Given the contrast here, this is the only class to have its color inverted
+  // automatically.
+  color: #fff;
+  background-color: @brand-primary;
+  a&:hover {
+    background-color: darken(@brand-primary, 10%);
+  }
+}
+.bg-warning {
+  background-color: @state-warning-bg;
+  a&:hover {
+    background-color: darken(@state-warning-bg, 10%);
+  }
+}
+.bg-danger {
+  background-color: @state-danger-bg;
+  a&:hover {
+    background-color: darken(@state-danger-bg, 10%);
+  }
+}
+.bg-success {
+  background-color: @state-success-bg;
+  a&:hover {
+    background-color: darken(@state-success-bg, 10%);
+  }
+}
+.bg-info {
+  background-color: @state-info-bg;
+  a&:hover {
+    background-color: darken(@state-info-bg, 10%);
+  }
+}
 
 
 // Page header
@@ -229,12 +266,14 @@ blockquote {
   border-left: 5px solid @blockquote-border-color;
   p {
     font-size: (@font-size-base * 1.25);
-    font-weight: 300;
-    line-height: 1.25;
   }
   p:last-child {
     margin-bottom: 0;
   }
+
+  // Deprecating small and .small for v3.1
+  // Context: https://github.com/twbs/bootstrap/issues/11660
+  footer,
   small,
   .small {
     display: block;
diff --git a/less/variables.less b/less/variables.less
index 8122161fd..4c7de2a3d 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -189,6 +189,9 @@
 
 @dropdown-header-color:          @gray-light;
 
+// Note: Deprecated @dropdown-caret-color as of v3.1.0
+@dropdown-caret-color:           #000;
+
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
@@ -363,8 +366,16 @@
 // Pager
 // -------------------------
 
+@pager-bg:                             @pagination-bg;
+@pager-border:                         @pagination-border;
 @pager-border-radius:                  15px;
-@pager-disabled-color:                 @gray-light;
+
+@pager-hover-bg:                       @pagination-hover-bg;
+
+@pager-active-bg:                      @pagination-active-bg;
+@pager-active-color:                   @pagination-active-color;
+
+@pager-disabled-color:                 @pagination-disabled-color;
 
 
 // Jumbotron
@@ -402,6 +413,7 @@
 @tooltip-max-width:           200px;
 @tooltip-color:               #fff;
 @tooltip-bg:                  #000;
+@tooltip-opacity:             .9;
 
 @tooltip-arrow-width:         5px;
 @tooltip-arrow-color:         @tooltip-bg;
@@ -450,9 +462,13 @@
 @modal-content-fallback-border-color:          #999;
 
 @modal-backdrop-bg:           #000;
+@modal-backdrop-opacity:      .5;
 @modal-header-border-color:   #e5e5e5;
 @modal-footer-border-color:   @modal-header-border-color;
 
+@modal-lg:                    900px;
+@modal-sm:                    300px;
+
 
 // Alerts
 // -------------------------
@@ -491,24 +507,26 @@
 
 // List group
 // -------------------------
-@list-group-bg:               #fff;
-@list-group-border:           #ddd;
-@list-group-border-radius:    @border-radius-base;
+@list-group-bg:                 #fff;
+@list-group-border:             #ddd;
+@list-group-border-radius:      @border-radius-base;
 
-@list-group-hover-bg:         #f5f5f5;
-@list-group-active-color:     @component-active-color;
-@list-group-active-bg:        @component-active-bg;
-@list-group-active-border:    @list-group-active-bg;
-
-@list-group-link-color:          #555;
-@list-group-link-heading-color:  #333;
+@list-group-hover-bg:           #f5f5f5;
+@list-group-active-color:       @component-active-color;
+@list-group-active-bg:          @component-active-bg;
+@list-group-active-border:      @list-group-active-bg;
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
 
+@list-group-link-color:         #555;
+@list-group-link-heading-color: #333;
 
 // Panels
 // -------------------------
 @panel-bg:                    #fff;
-@panel-inner-border:          #ddd;
+@panel-body-padding:          15px;
 @panel-border-radius:         @border-radius-base;
+
+@panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
 @panel-default-text:          @gray-dark;
@@ -550,6 +568,7 @@
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
 
 
 // Badges
diff --git a/less/wells.less b/less/wells.less
index 865abc2eb..15d072b0c 100644
--- a/less/wells.less
+++ b/less/wells.less
@@ -9,7 +9,7 @@
   padding: 19px;
   margin-bottom: 20px;
   background-color: @well-bg;
-  border: 1px solid darken(@well-bg, 7%);
+  border: 1px solid @well-border;
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {