Merge branch 'master' into fix-13386

Conflicts:
	js/carousel.js

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 node_js:
   - "0.10"
 before_install:
-  - time sudo pip install --use-mirrors -r test-infra/requirements.txt
+  - time travis_retry sudo pip install -r test-infra/requirements.txt
   - rvm use 1.9.3 --fuzzy
   - export GEMDIR=$(rvm gemdir)
   - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $GEMDIR) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi

Gruntfile.js

@@ -17,10 +17,10 @@ module.exports = function (grunt) {
 
   var fs = require('fs');
   var path = require('path');
+  var npmShrinkwrap = require('npm-shrinkwrap');
   var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js');
   var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
   var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
-  var updateShrinkwrap = require('./grunt/shrinkwrap.js');
 
   // Project configuration.
   grunt.initConfig({
@@ -32,6 +32,7 @@ module.exports = function (grunt) {
             ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
             ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
             ' */\n',
+    // NOTE: This jqueryCheck code is duplicated in customizer.js; if making changes here, be sure to update the other copy too.
     jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\') }\n\n',
 
     // Task configuration.
@@ -109,17 +110,14 @@ module.exports = function (grunt) {
     },
 
     uglify: {
+      options: {
+        preserveComments: 'some'
+      },
       bootstrap: {
-        options: {
-          banner: '<%= banner %>'
-        },
         src: '<%= concat.bootstrap.dest %>',
         dest: 'dist/js/<%= pkg.name %>.min.js'
       },
       customize: {
-        options: {
-          preserveComments: 'some'
-        },
         src: [
           'docs/assets/js/_vendor/less.min.js',
           'docs/assets/js/_vendor/jszip.min.js',
@@ -132,9 +130,6 @@ module.exports = function (grunt) {
         dest: 'docs/assets/js/customize.min.js'
       },
       docsJs: {
-        options: {
-          preserveComments: 'some'
-        },
         src: [
           'docs/assets/js/_vendor/holder.js',
           'docs/assets/js/_vendor/ZeroClipboard.min.js',
@@ -180,7 +175,16 @@ module.exports = function (grunt) {
 
     autoprefixer: {
       options: {
-        browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12']
+        browsers: [
+          'Android 2.3',
+          'Android >= 4',
+          'Chrome >= 20',
+          'Firefox >= 24', // Firefox 24 is the latest ESR
+          'Explorer >= 8',
+          'iOS >= 6',
+          'Opera >= 12',
+          'Safari >= 6'
+        ]
       },
       core: {
         options: {
@@ -383,9 +387,6 @@ module.exports = function (grunt) {
     exec: {
       npmUpdate: {
         command: 'npm update'
-      },
-      npmShrinkWrap: {
-        command: 'npm shrinkwrap --dev'
       }
     }
   });
@@ -459,7 +460,19 @@ module.exports = function (grunt) {
     generateRawFiles(grunt, banner);
   });
 
-  // Task for updating the npm packages used by the Travis build.
-  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']);
-  grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
+  // Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
+  // This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
+  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
+  grunt.registerTask('_update-shrinkwrap', function () {
+    var done = this.async();
+    npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
+      if (err) {
+        grunt.fail.warn(err)
+      }
+      var dest = 'test-infra/npm-shrinkwrap.json';
+      fs.renameSync('npm-shrinkwrap.json', dest);
+      grunt.log.writeln('File ' + dest.cyan + ' updated.');
+      done();
+    });
+  });
 };

README.md

 # [Bootstrap](http://getbootstrap.com)
-[![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap) [![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.svg?branch=master)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.svg?theme=.io)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
+[![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
+[![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap)
+[![Build Status](https://secure.travis-ci.org/twbs/bootstrap.svg?branch=master)](http://travis-ci.org/twbs/bootstrap)
+[![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
 [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
 
 Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.

dist/css/bootstrap-theme.css

@@ -55,6 +55,11 @@
   background-color: #e0e0e0;
   border-color: #dbdbdb;
 }
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
 .btn-primary {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
   background-image:      -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
@@ -75,6 +80,11 @@
   background-color: #2d6ca2;
   border-color: #2b669a;
 }
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #2d6ca2;
+  background-image: none;
+}
 .btn-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
   background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
@@ -95,6 +105,11 @@
   background-color: #419641;
   border-color: #3e8f3e;
 }
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
 .btn-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
   background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
@@ -115,6 +130,11 @@
   background-color: #2aabd2;
   border-color: #28a4c9;
 }
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
 .btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
   background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
@@ -135,6 +155,11 @@
   background-color: #eb9316;
   border-color: #e38d13;
 }
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
 .btn-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
   background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
@@ -155,6 +180,11 @@
   background-color: #c12e2a;
   border-color: #b92c28;
 }
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
 .thumbnail,
 .img-thumbnail {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
@@ -324,6 +354,11 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
   background-repeat: repeat-x;
 }
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
 .list-group {
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

dist/css/bootstrap.css

@@ -935,6 +935,7 @@ img {
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
   display: block;
+  width: 100% \9;
   max-width: 100%;
   height: auto;
 }
@@ -943,6 +944,7 @@ img {
 }
 .img-thumbnail {
   display: inline-block;
+  width: 100% \9;
   max-width: 100%;
   height: auto;
   padding: 4px;
@@ -1025,7 +1027,7 @@ h6 .small,
 .h6 .small {
   font-weight: normal;
   line-height: 1;
-  color: #999;
+  color: #777;
 }
 h1,
 .h1,
@@ -1148,7 +1150,7 @@ mark,
   text-transform: capitalize;
 }
 .text-muted {
-  color: #999;
+  color: #777;
 }
 .text-primary {
   color: #428bca;
@@ -1272,7 +1274,7 @@ dd {
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted #777;
 }
 .initialism {
   font-size: 90%;
@@ -1295,7 +1297,7 @@ blockquote .small {
   display: block;
   font-size: 80%;
   line-height: 1.42857143;
-  color: #999;
+  color: #777;
 }
 blockquote footer:before,
 blockquote small:before,
@@ -2373,14 +2375,14 @@ output {
           box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
 }
 .form-control::-moz-placeholder {
-  color: #999;
+  color: #777;
   opacity: 1;
 }
 .form-control:-ms-input-placeholder {
-  color: #999;
+  color: #777;
 }
 .form-control::-webkit-input-placeholder {
-  color: #999;
+  color: #777;
 }
 .form-control[disabled],
 .form-control[readonly],
@@ -2478,7 +2480,18 @@ fieldset[disabled] .radio label,
 fieldset[disabled] .checkbox label {
   cursor: not-allowed;
 }
-.input-sm {
+.form-control-static {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  margin-bottom: 0;
+}
+.form-control-static.input-lg,
+.form-control-static.input-sm {
+  padding-right: 0;
+  padding-left: 0;
+}
+.input-sm,
+.form-horizontal .form-group-sm .form-control {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -2493,7 +2506,8 @@ textarea.input-sm,
 select[multiple].input-sm {
   height: auto;
 }
-.input-lg {
+.input-lg,
+.form-horizontal .form-group-lg .form-control {
   height: 46px;
   padding: 10px 16px;
   font-size: 18px;
@@ -2616,9 +2630,6 @@ select[multiple].input-lg {
 .has-feedback label.sr-only ~ .form-control-feedback {
   top: 0;
 }
-.form-control-static {
-  margin-bottom: 0;
-}
 .help-block {
   display: block;
   margin-top: 5px;
@@ -2688,10 +2699,6 @@ select[multiple].input-lg {
   margin-right: -15px;
   margin-left: -15px;
 }
-.form-horizontal .form-control-static {
-  padding-top: 7px;
-  padding-bottom: 7px;
-}
 @media (min-width: 768px) {
   .form-horizontal .control-label {
     padding-top: 7px;
@@ -2703,6 +2710,16 @@ select[multiple].input-lg {
   top: 0;
   right: 15px;
 }
+@media (min-width: 768px) {
+  .form-horizontal .form-group-lg .control-label {
+    padding-top: 14.3px;
+  }
+}
+@media (min-width: 768px) {
+  .form-horizontal .form-group-sm .control-label {
+    padding-top: 6px;
+  }
+}
 .btn {
   display: inline-block;
   padding: 6px 12px;
@@ -3027,7 +3044,7 @@ fieldset[disabled] .btn-link {
 fieldset[disabled] .btn-link:hover,
 .btn-link[disabled]:focus,
 fieldset[disabled] .btn-link:focus {
-  color: #999;
+  color: #777;
   text-decoration: none;
 }
 .btn-lg,
@@ -3054,8 +3071,6 @@ fieldset[disabled] .btn-link:focus {
 .btn-block {
   display: block;
   width: 100%;
-  padding-right: 0;
-  padding-left: 0;
 }
 .btn-block + .btn-block {
   margin-top: 5px;
@@ -3168,7 +3183,7 @@ tbody.collapse.in {
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
-  color: #999;
+  color: #777;
 }
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
@@ -3197,7 +3212,8 @@ tbody.collapse.in {
   padding: 3px 20px;
   font-size: 12px;
   line-height: 1.42857143;
-  color: #999;
+  color: #777;
+  white-space: nowrap;
 }
 .dropdown-backdrop {
   position: fixed;
@@ -3578,11 +3594,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   background-color: #eee;
 }
 .nav > li.disabled > a {
-  color: #999;
+  color: #777;
 }
 .nav > li.disabled > a:hover,
 .nav > li.disabled > a:focus {
-  color: #999;
+  color: #777;
   text-decoration: none;
   cursor: not-allowed;
   background-color: transparent;
@@ -4176,7 +4192,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   border-color: #080808;
 }
 .navbar-inverse .navbar-brand {
-  color: #999;
+  color: #777;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
@@ -4184,10 +4200,10 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: transparent;
 }
 .navbar-inverse .navbar-text {
-  color: #999;
+  color: #777;
 }
 .navbar-inverse .navbar-nav > li > a {
-  color: #999;
+  color: #777;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
@@ -4234,7 +4250,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
     background-color: #080808;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: #999;
+    color: #777;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
@@ -4255,13 +4271,13 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 }
 .navbar-inverse .navbar-link {
-  color: #999;
+  color: #777;
 }
 .navbar-inverse .navbar-link:hover {
   color: #fff;
 }
 .navbar-inverse .btn-link {
-  color: #999;
+  color: #777;
 }
 .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link:focus {
@@ -4289,7 +4305,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
   content: "/\00a0";
 }
 .breadcrumb > .active {
-  color: #999;
+  color: #777;
 }
 .pagination {
   display: inline-block;
@@ -4349,7 +4365,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pagination > .disabled > a,
 .pagination > .disabled > a:hover,
 .pagination > .disabled > a:focus {
-  color: #999;
+  color: #777;
   cursor: not-allowed;
   background-color: #fff;
   border-color: #ddd;
@@ -4418,7 +4434,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pager .disabled > a:hover,
 .pager .disabled > a:focus,
 .pager .disabled > span {
-  color: #999;
+  color: #777;
   cursor: not-allowed;
   background-color: #fff;
 }
@@ -4448,11 +4464,11 @@ a.label:focus {
   top: -1px;
 }
 .label-default {
-  background-color: #999;
+  background-color: #777;
 }
 .label-default[href]:hover,
 .label-default[href]:focus {
-  background-color: #808080;
+  background-color: #5e5e5e;
 }
 .label-primary {
   background-color: #428bca;
@@ -4500,7 +4516,7 @@ a.label:focus {
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  background-color: #999;
+  background-color: #777;
   border-radius: 10px;
 }
 .badge:empty {
@@ -4612,10 +4628,12 @@ a.thumbnail.active {
 .alert > p + p {
   margin-top: 5px;
 }
-.alert-dismissable {
+.alert-dismissable,
+.alert-dismissible {
   padding-right: 35px;
 }
-.alert-dismissable .close {
+.alert-dismissable .close,
+.alert-dismissible .close {
   position: relative;
   top: -2px;
   right: -21px;
@@ -4713,14 +4731,16 @@ a.thumbnail.active {
        -o-transition: width .6s ease;
           transition: width .6s ease;
 }
-.progress-striped .progress-bar {
+.progress-striped .progress-bar,
+.progress-bar-striped {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   -webkit-background-size: 40px 40px;
           background-size: 40px 40px;
 }
-.progress.active .progress-bar {
+.progress.active .progress-bar,
+.progress-bar.active {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
        -o-animation: progress-bar-stripes 2s linear infinite;
           animation: progress-bar-stripes 2s linear infinite;
@@ -4731,7 +4751,7 @@ a.thumbnail.active {
 }
 .progress-bar[aria-valuenow="0"] {
   min-width: 30px;
-  color: #999;
+  color: #777;
   background-color: transparent;
   background-image: none;
   -webkit-box-shadow: none;
@@ -4839,7 +4859,7 @@ a.list-group-item:focus {
 .list-group-item.disabled,
 .list-group-item.disabled:hover,
 .list-group-item.disabled:focus {
-  color: #999;
+  color: #777;
   background-color: #eee;
 }
 .list-group-item.disabled .list-group-item-heading,
@@ -4850,7 +4870,7 @@ a.list-group-item:focus {
 .list-group-item.disabled .list-group-item-text,
 .list-group-item.disabled:hover .list-group-item-text,
 .list-group-item.disabled:focus .list-group-item-text {
-  color: #999;
+  color: #777;
 }
 .list-group-item.active,
 .list-group-item.active:hover,
@@ -4862,7 +4882,13 @@ a.list-group-item:focus {
 }
 .list-group-item.active .list-group-item-heading,
 .list-group-item.active:hover .list-group-item-heading,
-.list-group-item.active:focus .list-group-item-heading {
+.list-group-item.active:focus .list-group-item-heading,
+.list-group-item.active .list-group-item-heading > small,
+.list-group-item.active:hover .list-group-item-heading > small,
+.list-group-item.active:focus .list-group-item-heading > small,
+.list-group-item.active .list-group-item-heading > .small,
+.list-group-item.active:hover .list-group-item-heading > .small,
+.list-group-item.active:focus .list-group-item-heading > .small {
   color: inherit;
 }
 .list-group-item.active .list-group-item-text,

docs/_data/showcase.yml

-- name: Little
-  url: http://littleco.com
-  expo_url: http://expo.getbootstrap.com/2014/02/12/little/
-  img: http://expo.getbootstrap.com/screenshots/little.jpg
+- name: Red Antler
+  url: http://www.redantler.com/
+  expo_url: http://expo.getbootstrap.com/2014/02/24/redantler/
+  img: redantler
 
-- name: Engine Yard
-  url: http://engineyard.com
-  expo_url: http://expo.getbootstrap.com/2014/02/10/engine-yard/
-  img: http://expo.getbootstrap.com/screenshots/engine-yard.jpg
+- name: Riot Design
+  url: http://riotdesign.eu/en/
+  expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
+  img: riot
 
-- name: Webflow
-  url: http://webflow.com
-  expo_url: http://expo.getbootstrap.com/2014/02/04/webflow/
-  img: http://expo.getbootstrap.com/screenshots/webflow.jpg
+- name: Newsweek
+  url: http://www.newsweek.com/
+  expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
+  img: newsweek
 
-- name: Sentry
-  url: https://getsentry.com
-  expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
-  img: http://expo.getbootstrap.com/screenshots/sentry.jpg
+- name: Robinhood
+  url: https://www.robinhood.com
+  expo_url: http://expo.getbootstrap.com/2014/02/26/robinhood/
+  img: robinhood

docs/_includes/components/alerts.html

@@ -32,16 +32,16 @@
 <div class="alert alert-danger" role="alert">...</div>
 {% endhighlight %}
 
-  <h2 id="alerts-dismissable">Dismissable alerts</h2>
-  <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
+  <h2 id="alerts-dismissible">Dismissible alerts</h2>
+  <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
   <div class="bs-example">
-    <div class="alert alert-warning alert-dismissable" role="alert">
+    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-warning alert-dismissable" role="alert">
+<div class="alert alert-warning alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>

docs/_includes/components/panels.html

@@ -22,6 +22,7 @@
 
   <h3 id="panels-heading">Panel with heading</h3>
   <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
+  <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
   <div class="bs-example">
     <div class="panel panel-default">
       <div class="panel-heading">Panel heading without title</div>

docs/_includes/components/progress-bars.html

@@ -120,60 +120,60 @@
   <h3 id="progress-striped">Striped</h3>
   <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
   <div class="bs-example">
-    <div class="progress progress-striped" >
-      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
         <span class="sr-only">40% Complete (success)</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
         <span class="sr-only">60% Complete (warning)</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
         <span class="sr-only">80% Complete (danger)</span>
       </div>
     </div>
   </div>
 {% highlight html %}
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+<div class="progress">
+  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
     <span class="sr-only">40% Complete (success)</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+<div class="progress">
+  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
     <span class="sr-only">20% Complete</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+<div class="progress">
+  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
     <span class="sr-only">60% Complete (warning)</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+<div class="progress">
+  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
     <span class="sr-only">80% Complete (danger)</span>
   </div>
 </div>
 {% endhighlight %}
 
   <h3 id="progress-animated">Animated</h3>
-  <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
+  <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
   <div class="bs-example">
-    <div class="progress progress-striped active">
-      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
     </div>
   </div>
 {% highlight html %}
-<div class="progress progress-striped active">
-  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
+<div class="progress">
+  <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
     <span class="sr-only">45% Complete</span>
   </div>
 </div>
@@ -186,7 +186,7 @@
       <div class="progress-bar progress-bar-success" style="width: 35%">
         <span class="sr-only">35% Complete (success)</span>
       </div>
-      <div class="progress-bar progress-bar-warning" style="width: 20%">
+      <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
         <span class="sr-only">20% Complete (warning)</span>
       </div>
       <div class="progress-bar progress-bar-danger" style="width: 10%">
@@ -199,7 +199,7 @@
   <div class="progress-bar progress-bar-success" style="width: 35%">
     <span class="sr-only">35% Complete (success)</span>
   </div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%">
+  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
     <span class="sr-only">20% Complete (warning)</span>
   </div>
   <div class="progress-bar progress-bar-danger" style="width: 10%">

docs/_includes/css/buttons.html

@@ -88,7 +88,7 @@
 
 
   <h2 id="buttons-active">Active state</h2>
-  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
+  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state programmatically.</p>
 
   <h3>Button element</h3>
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>

docs/_includes/css/forms.html

@@ -670,6 +670,42 @@
 <select class="form-control input-sm">...</select>
 {% endhighlight %}
 
+  <h3>Horizontal form group sizes</h3>
+  <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
+  <div class="bs-example">
+    <form class="form-horizontal" role="form">
+      <div class="form-group form-group-lg">
+        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+        </div>
+      </div>
+      <div class="form-group form-group-sm">
+        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+        </div>
+      </div>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<form class="form-horizontal" role="form">
+  <div class="form-group form-group-lg">
+    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+    </div>
+  </div>
+  <div class="form-group form-group-sm">
+    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
+
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">

docs/_includes/css/grid.html

@@ -347,16 +347,16 @@
 
 
   <h3 id="grid-nesting">Nesting columns</h3>
-  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
+  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
   <div class="row show-grid">
     <div class="col-sm-9">
-      Level 1: .col-md-9
+      Level 1: .col-sm-9
       <div class="row show-grid">
         <div class="col-xs-8 col-sm-6">
-          Level 2: .col-xs-8 .col-md-6
+          Level 2: .col-xs-8 .col-sm-6
         </div>
         <div class="col-xs-4 col-sm-6">
-          Level 2: .col-xs-4 .col-md-6
+          Level 2: .col-xs-4 .col-sm-6
         </div>
       </div>
     </div>
@@ -364,13 +364,13 @@
 {% highlight html %}
 <div class="row">
   <div class="col-sm-9">
-    Level 1: .col-md-9
+    Level 1: .col-sm-9
     <div class="row">
       <div class="col-xs-8 col-sm-6">
-        Level 2: .col-xs-8 .col-md-6
+        Level 2: .col-xs-8 .col-sm-6
       </div>
       <div class="col-xs-4 col-sm-6">
-        Level 2: .col-xs-4 .col-md-6
+        Level 2: .col-xs-4 .col-sm-6
       </div>
     </div>
   </div>

docs/_includes/css/less.html

@@ -28,7 +28,7 @@
 @gray-darker:  lighten(#000, 13.5%); // #222
 @gray-dark:    lighten(#000, 20%);   // #333
 @gray:         lighten(#000, 33.5%); // #555
-@gray-light:   lighten(#000, 60%);   // #999
+@gray-light:   lighten(#000, 46.7%); // #777
 @gray-lighter: lighten(#000, 93.5%); // #eee
 {% endhighlight %}
 

docs/_includes/customizer-variables.html

@@ -17,7 +17,7 @@
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-light">@gray-light</label>
-    <input id="input-@gray-light" type="text" value="lighten(#000, 60%)" data-var="@gray-light" class="form-control"/>
+    <input id="input-@gray-light" type="text" value="lighten(#000, 46.7%)" data-var="@gray-light" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-lighter">@gray-lighter</label>
@@ -1735,6 +1735,11 @@
     <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/>
     <p class="help-block">Page header border color</p>
   </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
+    <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
+    <p class="help-block">Width of horizontal description list titles</p>
+  </div>
 </div>
 <h2 id="miscellaneous">Miscellaneous</h2>
 <p></p>