Merge branch 'master' into docs_derp

Conflicts:
	docs/assets/css/docs.css

CONTRIBUTING.md

@@ -92,11 +92,11 @@ implementing features, refactoring code, porting to a different language),
 otherwise you risk spending a lot of time working on something that the
 project's developers might not want to merge into the project.
 
-Please adhere to the [coding conventions](#code-conventions) used throughout a
+Please adhere to the [coding guidelines](#code-guidelines) used throughout the
 project (indentation, accurate comments, etc.) and any other requirements
 (such as test coverage).
 
-Adhering to the following this process is the best way to get your work
+Adhering to the following process is the best way to get your work
 included in the project:
 
 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
@@ -147,27 +147,27 @@ included in the project:
     with a clear title and description against the `master` branch.
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
-license your work under the the terms of the [MIT License](LICENSE.md).
+license your work under the terms of the [MIT License](LICENSE.md).
 
 
 ## Code guidelines
 
 ### HTML
 
-- Two spaces for indentation, never tabs
-- Double quotes only, never single quotes
-- Always use proper indentation
-- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
+- Two spaces for indentation, never tabs.
+- Double quotes only, never single quotes.
+- Always use proper indentation.
+- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
 - Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
 
 ### CSS
 
-- CSS changes must be done in `.less` files first, never just in the compiled `.css` files
-- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
-- Multiple-line approach (one property and value per line)
-- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
-- End all lines with a semi-colon
-- For multiple, comma-separated selectors, place each selector on its own line
+- CSS changes must be done in `.less` files first, never just in the compiled `.css` files.
+- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/).
+- Multiple-line approach (one property and value per line).
+- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`).
+- End all lines with a semi-colon.
+- For multiple, comma-separated selectors, place each selector on its own line.
 - Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
 - Attribute selectors should only be used where absolutely necessary (e.g., form controls) and should be avoided on custom components for performance and explicitness.
 - Series of classes for a component should include a base class (e.g., `.component`) and use the base class as a prefix for modifier and sub-components (e.g., `.component-lg`).

Gruntfile.js

@@ -10,8 +10,11 @@ module.exports = function (grunt) {
     return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
   }
 
+  var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js')
   var fs = require('fs')
-  var btoa = require('btoa')
+  var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js')
+  var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js')
+  var path = require('path')
 
   // Project configuration.
   grunt.initConfig({
@@ -20,7 +23,7 @@ module.exports = function (grunt) {
     pkg: grunt.file.readJSON('package.json'),
     banner: '/*!\n' +
               ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
-              ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+              ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
               ' * Licensed under <%= _.pluck(pkg.licenses, "type") %> (<%= _.pluck(pkg.licenses, "url") %>)\n' +
               ' */\n',
     jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n',
@@ -45,6 +48,9 @@ module.exports = function (grunt) {
       },
       assets: {
         src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
+      },
+      docsGrunt: {
+        src: ['docs/grunt/*.js']
       }
     },
 
@@ -63,6 +69,9 @@ module.exports = function (grunt) {
       },
       assets: {
         src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
+      },
+      docsGrunt: {
+        src: ['docs/grunt/*.js']
       }
     },
 
@@ -114,7 +123,7 @@ module.exports = function (grunt) {
         options: {
           banner: '/*!\n' +
           ' * Bootstrap Docs (<%= pkg.homepage %>)\n' +
-          ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+          ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
           ' * Licensed under the Creative Commons Attribution 3.0 Unported License. For\n' +
           ' * details, see http://creativecommons.org/licenses/by/3.0/.\n' +
           ' */\n',
@@ -127,7 +136,7 @@ module.exports = function (grunt) {
           'docs/assets/js/filesaver.js',
           'docs/assets/js/customizer.js'
         ],
-        dest: 'docs/assets/js/customize.js'
+        dest: 'docs/assets/js/customize.min.js'
       }
     },
 
@@ -208,7 +217,7 @@ module.exports = function (grunt) {
         cwd: './dist',
         src: [
           '{css,js}/*.min.*',
-          '{css}/*.map',
+          'css/*.map',
           'fonts/*'
         ],
         dest: 'docs/dist'
@@ -235,6 +244,23 @@ module.exports = function (grunt) {
       docs: {}
     },
 
+    jade: {
+      compile: {
+        options: {
+          pretty: true,
+          data: function () {
+            var filePath = path.join(__dirname, 'less/variables.less');
+            var fileContent = fs.readFileSync(filePath, {encoding: 'utf8'});
+            var parser = new BsLessdocParser(fileContent);
+            return {sections: parser.parseFile()};
+          }
+        },
+        files: {
+          'docs/_includes/customizer-variables.html': 'docs/customizer-variables.jade'
+        }
+      }
+    },
+
     validation: {
       options: {
         charset: 'utf-8',
@@ -300,7 +326,7 @@ module.exports = function (grunt) {
   var testSubtasks = [];
   // Skip core tests if running a different subset of the test suite
   if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
-    testSubtasks = testSubtasks.concat(['dist-css', 'jshint', 'jscs', 'qunit']);
+    testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-vars-form']);
   }
   // Skip HTML validation if running a different subset of the test suite
   if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
@@ -335,46 +361,10 @@ module.exports = function (grunt) {
   // This can be overzealous, so its changes should always be manually reviewed!
   grunt.registerTask('change-version-number', ['sed']);
 
-  grunt.registerTask('build-glyphicons-data', function () {
-    // Pass encoding, utf8, so `readFileSync` will return a string instead of a
-    // buffer
-    var glyphiconsFile = fs.readFileSync('less/glyphicons.less', 'utf8')
-    var glpyhiconsLines = glyphiconsFile.split('\n')
-
-    // Use any line that starts with ".glyphicon-" and capture the class name
-    var iconClassName = /^\.(glyphicon-[^\s]+)/
-    var glyphiconsData = '# This file is generated via Grunt task. **Do not edit directly.** \n' +
-                         '# See the \'build-glyphicons-data\' task in Gruntfile.js.\n\n';
-    for (var i = 0, len = glpyhiconsLines.length; i < len; i++) {
-      var match = glpyhiconsLines[i].match(iconClassName)
-
-      if (match != null) {
-        glyphiconsData += '- ' + match[1] + '\n'
-      }
-    }
-
-    // Create the `_data` directory if it doesn't already exist
-    if (!fs.existsSync('docs/_data')) fs.mkdirSync('docs/_data')
-
-    fs.writeFileSync('docs/_data/glyphicons.yml', glyphiconsData)
-  });
+  grunt.registerTask('build-glyphicons-data', generateGlyphiconsData);
 
   // task for building customizer
-  grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
-    function getFiles(type) {
-      var files = {}
-      fs.readdirSync(type)
-        .filter(function (path) {
-          return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
-        })
-        .forEach(function (path) {
-          var fullPath = type + '/' + path
-          return files[path] = (type == 'fonts' ? btoa(fs.readFileSync(fullPath)) : fs.readFileSync(fullPath, 'utf8'))
-        })
-      return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
-    }
-
-    var files = getFiles('js') + getFiles('less') + getFiles('fonts')
-    fs.writeFileSync('docs/assets/js/raw-files.js', files)
-  });
+  grunt.registerTask('build-customizer', ['build-customizer-vars-form', 'build-raw-files']);
+  grunt.registerTask('build-customizer-vars-form', ['jade']);
+  grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', generateRawFilesJs);
 };

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Twitter, Inc
+Copyright (c) 2011-2014 Twitter, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -54,7 +54,7 @@ We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues.  If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
 
 
 ## Documentation
@@ -88,7 +88,7 @@ Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working
 From the command line:
 
 1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
-2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](package.json) and automatically install the necessary local dependencies listed there.
+2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
 
 When completed, you'll be able to run the various Grunt commands provided from the command line.
 
@@ -120,7 +120,7 @@ Please read through our [contributing guidelines](https://github.com/twbs/bootst
 
 More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
 
-Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
+Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
 
 
 
@@ -170,4 +170,4 @@ For more information on SemVer, please visit <http://semver.org/>.
 
 ## Copyright and license
 
-Copyright 2013 Twitter, Inc under [the MIT license](LICENSE).
+Copyright 2011-2014 Twitter, Inc. under [the MIT license](LICENSE).

bower.json

@@ -11,13 +11,11 @@
   ],
   "ignore": [
     "**/.*",
-    "*.html",
-    "_*",
+    "_config.yml",
     "CNAME",
     "composer.json",
     "CONTRIBUTING.md",
-    "docs-assets",
-    "examples",
+    "docs",
     "js/tests"
   ],
   "dependencies": {

dist/css/bootstrap-theme.css

@@ -1,6 +1,6 @@
 /*!
  * Bootstrap v3.0.3 (http://getbootstrap.com)
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -89,6 +89,24 @@
   background-color: #419641;
   border-color: #3e8f3e;
 }
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
 .btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
   background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
@@ -125,24 +143,6 @@
   background-color: #c12e2a;
   border-color: #b92c28;
 }
-.btn-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #28a4c9;
-}
-.btn-info:hover,
-.btn-info:focus {
-  background-color: #2aabd2;
-  background-position: 0 -15px;
-}
-.btn-info:active,
-.btn-info.active {
-  background-color: #2aabd2;
-  border-color: #28a4c9;
-}
 .thumbnail,
 .img-thumbnail {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

dist/css/bootstrap.css

@@ -1,6 +1,6 @@
 /*!
  * Bootstrap v3.0.3 (http://getbootstrap.com)
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -491,18 +491,6 @@ cite {
 .text-primary:hover {
   color: #3071a9;
 }
-.text-warning {
-  color: #8a6d3b;
-}
-.text-warning:hover {
-  color: #66512c;
-}
-.text-danger {
-  color: #a94442;
-}
-.text-danger:hover {
-  color: #843534;
-}
 .text-success {
   color: #3c763d;
 }
@@ -515,6 +503,18 @@ cite {
 .text-info:hover {
   color: #245269;
 }
+.text-warning {
+  color: #8a6d3b;
+}
+.text-warning:hover {
+  color: #66512c;
+}
+.text-danger {
+  color: #a94442;
+}
+.text-danger:hover {
+  color: #843534;
+}
 .bg-primary {
   color: #fff;
   background-color: #428bca;
@@ -522,18 +522,6 @@ cite {
 a.bg-primary:hover {
   background-color: #3071a9;
 }
-.bg-warning {
-  background-color: #fcf8e3;
-}
-a.bg-warning:hover {
-  background-color: #f7ecb5;
-}
-.bg-danger {
-  background-color: #f2dede;
-}
-a.bg-danger:hover {
-  background-color: #e4b9b9;
-}
 .bg-success {
   background-color: #dff0d8;
 }
@@ -546,6 +534,18 @@ a.bg-success:hover {
 a.bg-info:hover {
   background-color: #afd9ee;
 }
+.bg-warning {
+  background-color: #fcf8e3;
+}
+a.bg-warning:hover {
+  background-color: #f7ecb5;
+}
+.bg-danger {
+  background-color: #f2dede;
+}
+a.bg-danger:hover {
+  background-color: #e4b9b9;
+}
 .page-header {
   padding-bottom: 9px;
   margin: 40px 0 20px;
@@ -1508,6 +1508,26 @@ table th[class*="col-"] {
 .table-hover > tbody > tr.success:hover > th {
   background-color: #d0e9c6;
 }
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+  background-color: #d9edf7;
+}
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr.info:hover > th {
+  background-color: #c4e3f3;
+}
 .table > thead > tr > td.warning,
 .table > tbody > tr > td.warning,
 .table > tfoot > tr > td.warning,
@@ -1548,26 +1568,6 @@ table th[class*="col-"] {
 .table-hover > tbody > tr.danger:hover > th {
   background-color: #ebcccc;
 }
-.table > thead > tr > td.info,
-.table > tbody > tr > td.info,
-.table > tfoot > tr > td.info,
-.table > thead > tr > th.info,
-.table > tbody > tr > th.info,
-.table > tfoot > tr > th.info,
-.table > thead > tr.info > td,
-.table > tbody > tr.info > td,
-.table > tfoot > tr.info > td,
-.table > thead > tr.info > th,
-.table > tbody > tr.info > th,
-.table > tfoot > tr.info > th {
-  background-color: #d9edf7;
-}
-.table-hover > tbody > tr > td.info:hover,
-.table-hover > tbody > tr > th.info:hover,
-.table-hover > tbody > tr.info:hover > td,
-.table-hover > tbody > tr.info:hover > th {
-  background-color: #c4e3f3;
-}
 @media (max-width: 767px) {
   .table-responsive {
     width: 100%;
@@ -1651,6 +1651,10 @@ input[type="checkbox"] {
 input[type="file"] {
   display: block;
 }
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
 select[multiple],
 select[size] {
   height: auto;
@@ -1826,6 +1830,32 @@ textarea.input-lg {
   line-height: 34px;
   text-align: center;
 }
+.has-success .help-block,
+.has-success .control-label,
+.has-success .radio,
+.has-success .checkbox,
+.has-success .radio-inline,
+.has-success .checkbox-inline {
+  color: #3c763d;
+}
+.has-success .form-control {
+  border-color: #3c763d;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+}
+.has-success .form-control:focus {
+  border-color: #2b542c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
+}
+.has-success .input-group-addon {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #3c763d;
+}
+.has-success .form-control-feedback {
+  color: #3c763d;
+}
 .has-warning .help-block,
 .has-warning .control-label,
 .has-warning .radio,
@@ -1878,32 +1908,6 @@ textarea.input-lg {
 .has-error .form-control-feedback {
   color: #a94442;
 }
-.has-success .help-block,
-.has-success .control-label,
-.has-success .radio,
-.has-success .checkbox,
-.has-success .radio-inline,
-.has-success .checkbox-inline {
-  color: #3c763d;
-}
-.has-success .form-control {
-  border-color: #3c763d;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-}
-.has-success .form-control:focus {
-  border-color: #2b542c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
-}
-.has-success .input-group-addon {
-  color: #3c763d;
-  background-color: #dff0d8;
-  border-color: #3c763d;
-}
-.has-success .form-control-feedback {
-  color: #3c763d;
-}
 .form-control-static {
   margin-bottom: 0;
 }
@@ -2144,6 +2148,47 @@ fieldset[disabled] .btn-success.active {
   color: #5cb85c;
   background-color: #fff;
 }
+.btn-info {
+  color: #fff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+  color: #fff;
+  background-color: #39b3d7;
+  border-color: #269abc;
+}
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+  background-image: none;
+}
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.btn-info .badge {
+  color: #5bc0de;
+  background-color: #fff;
+}
 .btn-warning {
   color: #fff;
   background-color: #f0ad4e;
@@ -2226,47 +2271,6 @@ fieldset[disabled] .btn-danger.active {
   color: #d9534f;
   background-color: #fff;
 }
-.btn-info {
-  color: #fff;
-  background-color: #5bc0de;
-  border-color: #46b8da;
-}
-.btn-info:hover,
-.btn-info:focus,
-.btn-info:active,
-.btn-info.active,
-.open .dropdown-toggle.btn-info {
-  color: #fff;
-  background-color: #39b3d7;
-  border-color: #269abc;
-}
-.btn-info:active,
-.btn-info.active,
-.open .dropdown-toggle.btn-info {
-  background-image: none;
-}
-.btn-info.disabled,
-.btn-info[disabled],
-fieldset[disabled] .btn-info,
-.btn-info.disabled:hover,
-.btn-info[disabled]:hover,
-fieldset[disabled] .btn-info:hover,
-.btn-info.disabled:focus,
-.btn-info[disabled]:focus,
-fieldset[disabled] .btn-info:focus,
-.btn-info.disabled:active,
-.btn-info[disabled]:active,
-fieldset[disabled] .btn-info:active,
-.btn-info.disabled.active,
-.btn-info[disabled].active,
-fieldset[disabled] .btn-info.active {
-  background-color: #5bc0de;
-  border-color: #46b8da;
-}
-.btn-info .badge {
-  color: #5bc0de;
-  background-color: #fff;
-}
 .btn-link {
   font-weight: normal;
   color: #428bca;
@@ -2357,7 +2361,7 @@ input[type="button"].btn-block {
   font-family: 'Glyphicons Halflings';
 
   src: url('../fonts/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
+  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 .glyphicon {
   position: relative;
@@ -4669,6 +4673,28 @@ a.list-group-item-success.active:focus {
   background-color: #3c763d;
   border-color: #3c763d;
 }
+.list-group-item-info {
+  color: #31708f;
+  background-color: #d9edf7;
+}
+a.list-group-item-info {
+  color: #31708f;
+}
+a.list-group-item-info .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-info:hover,
+a.list-group-item-info:focus {
+  color: #31708f;
+  background-color: #c4e3f3;
+}
+a.list-group-item-info.active,
+a.list-group-item-info.active:hover,
+a.list-group-item-info.active:focus {
+  color: #fff;
+  background-color: #31708f;
+  border-color: #31708f;
+}
 .list-group-item-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
@@ -4713,28 +4739,6 @@ a.list-group-item-danger.active:focus {
   background-color: #a94442;
   border-color: #a94442;
 }
-.list-group-item-info {
-  color: #31708f;
-  background-color: #d9edf7;
-}
-a.list-group-item-info {
-  color: #31708f;
-}
-a.list-group-item-info .list-group-item-heading {
-  color: inherit;
-}
-a.list-group-item-info:hover,
-a.list-group-item-info:focus {
-  color: #31708f;
-  background-color: #c4e3f3;
-}
-a.list-group-item-info.active,
-a.list-group-item-info.active:hover,
-a.list-group-item-info.active:focus {
-  color: #fff;
-  background-color: #31708f;
-  border-color: #31708f;
-}
 .list-group-item-heading {
   margin-top: 0;
   margin-bottom: 5px;
@@ -4939,6 +4943,20 @@ a.list-group-item-info.active:focus {
 .panel-success > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #d6e9c6;
 }
+.panel-info {
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #bce8f1;
+}
+.panel-info > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #bce8f1;
+}
 .panel-warning {
   border-color: #faebcc;
 }
@@ -4967,20 +4985,6 @@ a.list-group-item-info.active:focus {
 .panel-danger > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #ebccd1;
 }
-.panel-info {
-  border-color: #bce8f1;
-}
-.panel-info > .panel-heading {
-  color: #31708f;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-.panel-info > .panel-heading + .panel-collapse .panel-body {
-  border-top-color: #bce8f1;
-}
-.panel-info > .panel-footer + .panel-collapse .panel-body {
-  border-bottom-color: #bce8f1;
-}
 .well {
   min-height: 20px;
   padding: 19px;

dist/js/bootstrap.js

@@ -1,6 +1,6 @@
 /*!
  * Bootstrap v3.0.3 (http://getbootstrap.com)
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -10,12 +10,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: transition.js v3.0.3
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
   // ============================================================
@@ -58,12 +59,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: alert.js v3.0.3
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // ALERT CLASS DEFINITION
   // ======================
@@ -146,12 +148,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: button.js v3.0.3
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // BUTTON PUBLIC CLASS DEFINITION
   // ==============================
@@ -253,12 +256,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: carousel.js v3.0.3
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // CAROUSEL CLASS DEFINITION
   // =========================
@@ -458,12 +462,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: collapse.js v3.0.3
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // COLLAPSE PUBLIC CLASS DEFINITION
   // ================================
@@ -627,12 +632,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: dropdown.js v3.0.3
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // DROPDOWN CLASS DEFINITION
   // =========================
@@ -774,12 +780,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: modal.js v3.0.3
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // MODAL CLASS DEFINITION
   // ======================
@@ -1018,12 +1025,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // TOOLTIP PUBLIC CLASS DEFINITION
   // ===============================
@@ -1226,7 +1234,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
 
     // $.fn.offset doesn't round pixel values
     // so we use setOffset directly with our own function B-0
-    jQuery.offset.setOffset($tip[0], $.extend({
+    $.offset.setOffset($tip[0], $.extend({
       using: function (props) {
         $tip.css({
           top: Math.round(props.top),
@@ -1416,12 +1424,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: popover.js v3.0.3
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // POPOVER PUBLIC CLASS DEFINITION
   // ===============================
@@ -1526,12 +1535,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: scrollspy.js v3.0.3
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // SCROLLSPY CLASS DEFINITION
   // ==========================
@@ -1679,12 +1689,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: tab.js v3.0.3
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // TAB CLASS DEFINITION
   // ====================
@@ -1804,12 +1815,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
  * Bootstrap: affix.js v3.0.3
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // AFFIX CLASS DEFINITION
   // ======================

docs/_includes/customizer-variables.html

@@ -0,0 +1,1682 @@
+
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.-->
+<h2 id="colors">Colors</h2>
+<p>Gray and brand colors for use across Bootstrap.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@gray-darker">@gray-darker</label>
+    <input id="input-@gray-darker" type="text" value="lighten(#000, 13.5%)" data-var="@gray-darker" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@gray-dark">@gray-dark</label>
+    <input id="input-@gray-dark" type="text" value="lighten(#000, 20%)" data-var="@gray-dark" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@gray">@gray</label>
+    <input id="input-@gray" type="text" value="lighten(#000, 33.5%)" data-var="@gray" class="form-control"/>
+  </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"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@gray-lighter">@gray-lighter</label>
+    <input id="input-@gray-lighter" type="text" value="lighten(#000, 93.5%)" data-var="@gray-lighter" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@brand-primary">@brand-primary</label>
+    <input id="input-@brand-primary" type="text" value="#428bca" data-var="@brand-primary" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@brand-success">@brand-success</label>
+    <input id="input-@brand-success" type="text" value="#5cb85c" data-var="@brand-success" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@brand-info">@brand-info</label>
+    <input id="input-@brand-info" type="text" value="#5bc0de" data-var="@brand-info" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@brand-warning">@brand-warning</label>
+    <input id="input-@brand-warning" type="text" value="#f0ad4e" data-var="@brand-warning" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@brand-danger">@brand-danger</label>
+    <input id="input-@brand-danger" type="text" value="#d9534f" data-var="@brand-danger" class="form-control"/>
+  </div>
+</div>
+<h2 id="scaffolding">Scaffolding</h2>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@body-bg">@body-bg</label>
+    <input id="input-@body-bg" type="text" value="#fff" data-var="@body-bg" class="form-control"/>
+    <p class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@text-color">@text-color</label>
+    <input id="input-@text-color" type="text" value="@gray-dark" data-var="@text-color" class="form-control"/>
+    <p class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@link-color">@link-color</label>
+    <input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/>
+    <p class="help-block">Global textual link color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@link-hover-color">@link-hover-color</label>
+    <input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/>
+    <p class="help-block">Link hover color set via <code>darken()</code> function.</p>
+  </div>
+</div>
+<h2 id="typography">Typography</h2>
+<p>Font, line-height, and color for body text, headings, and more.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@font-family-sans-serif">@font-family-sans-serif</label>
+    <input id="input-@font-family-sans-serif" type="text" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-family-serif">@font-family-serif</label>
+    <input id="input-@font-family-serif" type="text" value="Georgia, &quot;Times New Roman&quot;, Times, serif" data-var="@font-family-serif" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-family-monospace">@font-family-monospace</label>
+    <input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace" data-var="@font-family-monospace" class="form-control"/>
+    <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code>, <code>&lt;kbd&gt;</code>, and <code>&lt;pre&gt;</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-family-base">@font-family-base</label>
+    <input id="input-@font-family-base" type="text" value="@font-family-sans-serif" data-var="@font-family-base" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-base">@font-size-base</label>
+    <input id="input-@font-size-base" type="text" value="14px" data-var="@font-size-base" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-large">@font-size-large</label>
+    <input id="input-@font-size-large" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-large" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-small">@font-size-small</label>
+    <input id="input-@font-size-small" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-small" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h1">@font-size-h1</label>
+    <input id="input-@font-size-h1" type="text" value="floor((@font-size-base * 2.6))" data-var="@font-size-h1" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h2">@font-size-h2</label>
+    <input id="input-@font-size-h2" type="text" value="floor((@font-size-base * 2.15))" data-var="@font-size-h2" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h3">@font-size-h3</label>
+    <input id="input-@font-size-h3" type="text" value="ceil((@font-size-base * 1.7))" data-var="@font-size-h3" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h4">@font-size-h4</label>
+    <input id="input-@font-size-h4" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-h4" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h5">@font-size-h5</label>
+    <input id="input-@font-size-h5" type="text" value="@font-size-base" data-var="@font-size-h5" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@font-size-h6">@font-size-h6</label>
+    <input id="input-@font-size-h6" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-h6" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@line-height-base">@line-height-base</label>
+    <input id="input-@line-height-base" type="text" value="1.428571429" data-var="@line-height-base" class="form-control"/>
+    <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@line-height-computed">@line-height-computed</label>
+    <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/>
+    <p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> &amp;times; <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@headings-font-family">@headings-font-family</label>
+    <input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/>
+    <p class="help-block">By default, this inherits from the <code>&lt;body&gt;</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@headings-font-weight">@headings-font-weight</label>
+    <input id="input-@headings-font-weight" type="text" value="500" data-var="@headings-font-weight" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@headings-line-height">@headings-line-height</label>
+    <input id="input-@headings-line-height" type="text" value="1.1" data-var="@headings-line-height" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@headings-color">@headings-color</label>
+    <input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="components">Components</h2>
+<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@padding-base-vertical">@padding-base-vertical</label>
+    <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-base-horizontal">@padding-base-horizontal</label>
+    <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-large-vertical">@padding-large-vertical</label>
+    <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-large-horizontal">@padding-large-horizontal</label>
+    <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-small-vertical">@padding-small-vertical</label>
+    <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-small-horizontal">@padding-small-horizontal</label>
+    <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-xs-vertical">@padding-xs-vertical</label>
+    <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label>
+    <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@line-height-large">@line-height-large</label>
+    <input id="input-@line-height-large" type="text" value="1.33" data-var="@line-height-large" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@line-height-small">@line-height-small</label>
+    <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@border-radius-base">@border-radius-base</label>
+    <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@border-radius-large">@border-radius-large</label>
+    <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@border-radius-small">@border-radius-small</label>
+    <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@component-active-color">@component-active-color</label>
+    <input id="input-@component-active-color" type="text" value="#fff" data-var="@component-active-color" class="form-control"/>
+    <p class="help-block">Global color for active items (e.g., navs or dropdowns).</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@component-active-bg">@component-active-bg</label>
+    <input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/>
+    <p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@caret-width-base">@caret-width-base</label>
+    <input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/>
+    <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@caret-width-large">@caret-width-large</label>
+    <input id="input-@caret-width-large" type="text" value="5px" data-var="@caret-width-large" class="form-control"/>
+    <p class="help-block">Carets increase slightly in size for larger components.</p>
+  </div>
+</div>
+<h2 id="tables">Tables</h2>
+<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@table-cell-padding">@table-cell-padding</label>
+    <input id="input-@table-cell-padding" type="text" value="8px" data-var="@table-cell-padding" class="form-control"/>
+    <p class="help-block">Padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label>
+    <input id="input-@table-condensed-cell-padding" type="text" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/>
+    <p class="help-block">Padding for cells in <code>.table-condensed</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-bg">@table-bg</label>
+    <input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/>
+    <p class="help-block">Default background color used for all tables.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-bg-accent">@table-bg-accent</label>
+    <input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/>
+    <p class="help-block">Background color used for <code>.table-striped</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-bg-hover">@table-bg-hover</label>
+    <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/>
+    <p class="help-block">Background color used for <code>.table-hover</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-bg-active">@table-bg-active</label>
+    <input id="input-@table-bg-active" type="text" value="@table-bg-hover" data-var="@table-bg-active" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@table-border-color">@table-border-color</label>
+    <input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/>
+    <p class="help-block">Border color for table and cell borders.</p>
+  </div>
+</div>
+<h2 id="buttons">Buttons</h2>
+<p>For each of Bootstrap&#39;s buttons, define text, background and border color.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@btn-font-weight">@btn-font-weight</label>
+    <input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-default-color">@btn-default-color</label>
+    <input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-default-bg">@btn-default-bg</label>
+    <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-default-border">@btn-default-border</label>
+    <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-primary-color">@btn-primary-color</label>
+    <input id="input-@btn-primary-color" type="text" value="#fff" data-var="@btn-primary-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-primary-bg">@btn-primary-bg</label>
+    <input id="input-@btn-primary-bg" type="text" value="@brand-primary" data-var="@btn-primary-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-primary-border">@btn-primary-border</label>
+    <input id="input-@btn-primary-border" type="text" value="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-success-color">@btn-success-color</label>
+    <input id="input-@btn-success-color" type="text" value="#fff" data-var="@btn-success-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-success-bg">@btn-success-bg</label>
+    <input id="input-@btn-success-bg" type="text" value="@brand-success" data-var="@btn-success-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-success-border">@btn-success-border</label>
+    <input id="input-@btn-success-border" type="text" value="darken(@btn-success-bg, 5%)" data-var="@btn-success-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-info-color">@btn-info-color</label>
+    <input id="input-@btn-info-color" type="text" value="#fff" data-var="@btn-info-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-info-bg">@btn-info-bg</label>
+    <input id="input-@btn-info-bg" type="text" value="@brand-info" data-var="@btn-info-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-info-border">@btn-info-border</label>
+    <input id="input-@btn-info-border" type="text" value="darken(@btn-info-bg, 5%)" data-var="@btn-info-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-warning-color">@btn-warning-color</label>
+    <input id="input-@btn-warning-color" type="text" value="#fff" data-var="@btn-warning-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-warning-bg">@btn-warning-bg</label>
+    <input id="input-@btn-warning-bg" type="text" value="@brand-warning" data-var="@btn-warning-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-warning-border">@btn-warning-border</label>
+    <input id="input-@btn-warning-border" type="text" value="darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-danger-color">@btn-danger-color</label>
+    <input id="input-@btn-danger-color" type="text" value="#fff" data-var="@btn-danger-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-danger-bg">@btn-danger-bg</label>
+    <input id="input-@btn-danger-bg" type="text" value="@brand-danger" data-var="@btn-danger-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-danger-border">@btn-danger-border</label>
+    <input id="input-@btn-danger-border" type="text" value="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label>
+    <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="forms">Forms</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@input-bg">@input-bg</label>
+    <input id="input-@input-bg" type="text" value="#fff" data-var="@input-bg" class="form-control"/>
+    <p class="help-block"><code>&lt;input&gt;</code> background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-bg-disabled">@input-bg-disabled</label>
+    <input id="input-@input-bg-disabled" type="text" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/>
+    <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-color">@input-color</label>
+    <input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/>
+    <p class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-border">@input-border</label>
+    <input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/>
+    <p class="help-block"><code>&lt;input&gt;</code> border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-border-radius">@input-border-radius</label>
+    <input id="input-@input-border-radius" type="text" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/>
+    <p class="help-block"><code>&lt;input&gt;</code> border radius</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-border-focus">@input-border-focus</label>
+    <input id="input-@input-border-focus" type="text" value="#66afe9" data-var="@input-border-focus" class="form-control"/>
+    <p class="help-block">Border color for inputs on focus</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-color-placeholder">@input-color-placeholder</label>
+    <input id="input-@input-color-placeholder" type="text" value="@gray-light" data-var="@input-color-placeholder" class="form-control"/>
+    <p class="help-block">Placeholder text color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-height-base">@input-height-base</label>
+    <input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/>
+    <p class="help-block">Default <code>.form-control</code> height</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-height-large">@input-height-large</label>
+    <input id="input-@input-height-large" type="text" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/>
+    <p class="help-block">Large <code>.form-control</code> height</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-height-small">@input-height-small</label>
+    <input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/>
+    <p class="help-block">Small <code>.form-control</code> height</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@legend-color">@legend-color</label>
+    <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@legend-border-color">@legend-border-color</label>
+    <input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-group-addon-bg">@input-group-addon-bg</label>
+    <input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/>
+    <p class="help-block">Background color for textual input addons</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label>
+    <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/>
+    <p class="help-block">Border color for textual input addons</p>
+  </div>
+</div>
+<h2 id="dropdowns">Dropdowns</h2>
+<p>Dropdown menu container and contents.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-bg">@dropdown-bg</label>
+    <input id="input-@dropdown-bg" type="text" value="#fff" data-var="@dropdown-bg" class="form-control"/>
+    <p class="help-block">Background for the dropdown menu.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-border">@dropdown-border</label>
+    <input id="input-@dropdown-border" type="text" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/>
+    <p class="help-block">Dropdown menu <code>border-color</code>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label>
+    <input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/>
+    <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label>
+    <input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/>
+    <p class="help-block">Divider color for between dropdown items.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-color">@dropdown-link-color</label>
+    <input id="input-@dropdown-link-color" type="text" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/>
+    <p class="help-block">Dropdown link text color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label>
+    <input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/>
+    <p class="help-block">Hover color for dropdown links.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label>
+    <input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/>
+    <p class="help-block">Hover background for dropdown links.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label>
+    <input id="input-@dropdown-link-active-color" type="text" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/>
+    <p class="help-block">Active dropdown menu item text color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label>
+    <input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/>
+    <p class="help-block">Active dropdown menu item background color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label>
+    <input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/>
+    <p class="help-block">Disabled dropdown menu item background color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-header-color">@dropdown-header-color</label>
+    <input id="input-@dropdown-header-color" type="text" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/>
+    <p class="help-block">Text color for headers within dropdown menus.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
+    <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
+<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@screen-xs">@screen-xs</label>
+    <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-xs-min">@screen-xs-min</label>
+    <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-phone">@screen-phone</label>
+    <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-sm">@screen-sm</label>
+    <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-sm-min">@screen-sm-min</label>
+    <input id="input-@screen-sm-min" type="text" value="@screen-sm" data-var="@screen-sm-min" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-tablet">@screen-tablet</label>
+    <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-md">@screen-md</label>
+    <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-md-min">@screen-md-min</label>
+    <input id="input-@screen-md-min" type="text" value="@screen-md" data-var="@screen-md-min" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-desktop">@screen-desktop</label>
+    <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-lg">@screen-lg</label>
+    <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-lg-min">@screen-lg-min</label>
+    <input id="input-@screen-lg-min" type="text" value="@screen-lg" data-var="@screen-lg-min" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
+    <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-xs-max">@screen-xs-max</label>
+    <input id="input-@screen-xs-max" type="text" value="(@screen-sm-min - 1)" data-var="@screen-xs-max" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-sm-max">@screen-sm-max</label>
+    <input id="input-@screen-sm-max" type="text" value="(@screen-md-min - 1)" data-var="@screen-sm-max" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@screen-md-max">@screen-md-max</label>
+    <input id="input-@screen-md-max" type="text" value="(@screen-lg-min - 1)" data-var="@screen-md-max" class="form-control"/>
+  </div>
+</div>
+<h2 id="grid-system">Grid system</h2>
+<p>Define your custom responsive grid.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@grid-columns">@grid-columns</label>
+    <input id="input-@grid-columns" type="text" value="12" data-var="@grid-columns" class="form-control"/>
+    <p class="help-block">Number of columns in the grid.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@grid-gutter-width">@grid-gutter-width</label>
+    <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/>
+    <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
+    <input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/>
+    <p class="help-block">Point at which the navbar becomes uncollapsed.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label>
+    <input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/>
+    <p class="help-block">Point at which the navbar begins collapsing.</p>
+  </div>
+</div>
+<h2 id="navbar">Navbar</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-height">@navbar-height</label>
+    <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-margin-bottom">@navbar-margin-bottom</label>
+    <input id="input-@navbar-margin-bottom" type="text" value="@line-height-computed" data-var="@navbar-margin-bottom" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-border-radius">@navbar-border-radius</label>
+    <input id="input-@navbar-border-radius" type="text" value="@border-radius-base" data-var="@navbar-border-radius" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label>
+    <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
+    <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-color">@navbar-default-color</label>
+    <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-bg">@navbar-default-bg</label>
+    <input id="input-@navbar-default-bg" type="text" value="#f8f8f8" data-var="@navbar-default-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-border">@navbar-default-border</label>
+    <input id="input-@navbar-default-border" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-color">@navbar-default-link-color</label>
+    <input id="input-@navbar-default-link-color" type="text" value="#777" data-var="@navbar-default-link-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-hover-color">@navbar-default-link-hover-color</label>
+    <input id="input-@navbar-default-link-hover-color" type="text" value="#333" data-var="@navbar-default-link-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-hover-bg">@navbar-default-link-hover-bg</label>
+    <input id="input-@navbar-default-link-hover-bg" type="text" value="transparent" data-var="@navbar-default-link-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-active-color">@navbar-default-link-active-color</label>
+    <input id="input-@navbar-default-link-active-color" type="text" value="#555" data-var="@navbar-default-link-active-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-active-bg">@navbar-default-link-active-bg</label>
+    <input id="input-@navbar-default-link-active-bg" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-disabled-color">@navbar-default-link-disabled-color</label>
+    <input id="input-@navbar-default-link-disabled-color" type="text" value="#ccc" data-var="@navbar-default-link-disabled-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-link-disabled-bg">@navbar-default-link-disabled-bg</label>
+    <input id="input-@navbar-default-link-disabled-bg" type="text" value="transparent" data-var="@navbar-default-link-disabled-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-brand-color">@navbar-default-brand-color</label>
+    <input id="input-@navbar-default-brand-color" type="text" value="@navbar-default-link-color" data-var="@navbar-default-brand-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-brand-hover-color">@navbar-default-brand-hover-color</label>
+    <input id="input-@navbar-default-brand-hover-color" type="text" value="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-brand-hover-bg">@navbar-default-brand-hover-bg</label>
+    <input id="input-@navbar-default-brand-hover-bg" type="text" value="transparent" data-var="@navbar-default-brand-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-toggle-hover-bg">@navbar-default-toggle-hover-bg</label>
+    <input id="input-@navbar-default-toggle-hover-bg" type="text" value="#ddd" data-var="@navbar-default-toggle-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-toggle-icon-bar-bg">@navbar-default-toggle-icon-bar-bg</label>
+    <input id="input-@navbar-default-toggle-icon-bar-bg" type="text" value="#888" data-var="@navbar-default-toggle-icon-bar-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-default-toggle-border-color">@navbar-default-toggle-border-color</label>
+    <input id="input-@navbar-default-toggle-border-color" type="text" value="#ddd" data-var="@navbar-default-toggle-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-color">@navbar-inverse-color</label>
+    <input id="input-@navbar-inverse-color" type="text" value="@gray-light" data-var="@navbar-inverse-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
+    <input id="input-@navbar-inverse-bg" type="text" value="#222" data-var="@navbar-inverse-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-border">@navbar-inverse-border</label>
+    <input id="input-@navbar-inverse-border" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-color">@navbar-inverse-link-color</label>
+    <input id="input-@navbar-inverse-link-color" type="text" value="@gray-light" data-var="@navbar-inverse-link-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-hover-color">@navbar-inverse-link-hover-color</label>
+    <input id="input-@navbar-inverse-link-hover-color" type="text" value="#fff" data-var="@navbar-inverse-link-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-hover-bg">@navbar-inverse-link-hover-bg</label>
+    <input id="input-@navbar-inverse-link-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-link-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-active-color">@navbar-inverse-link-active-color</label>
+    <input id="input-@navbar-inverse-link-active-color" type="text" value="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-active-bg">@navbar-inverse-link-active-bg</label>
+    <input id="input-@navbar-inverse-link-active-bg" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-disabled-color">@navbar-inverse-link-disabled-color</label>
+    <input id="input-@navbar-inverse-link-disabled-color" type="text" value="#444" data-var="@navbar-inverse-link-disabled-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-link-disabled-bg">@navbar-inverse-link-disabled-bg</label>
+    <input id="input-@navbar-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navbar-inverse-link-disabled-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-brand-color">@navbar-inverse-brand-color</label>
+    <input id="input-@navbar-inverse-brand-color" type="text" value="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-brand-hover-color">@navbar-inverse-brand-hover-color</label>
+    <input id="input-@navbar-inverse-brand-hover-color" type="text" value="#fff" data-var="@navbar-inverse-brand-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-brand-hover-bg">@navbar-inverse-brand-hover-bg</label>
+    <input id="input-@navbar-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-brand-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-toggle-hover-bg">@navbar-inverse-toggle-hover-bg</label>
+    <input id="input-@navbar-inverse-toggle-hover-bg" type="text" value="#333" data-var="@navbar-inverse-toggle-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-toggle-icon-bar-bg">@navbar-inverse-toggle-icon-bar-bg</label>
+    <input id="input-@navbar-inverse-toggle-icon-bar-bg" type="text" value="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-inverse-toggle-border-color">@navbar-inverse-toggle-border-color</label>
+    <input id="input-@navbar-inverse-toggle-border-color" type="text" value="#333" data-var="@navbar-inverse-toggle-border-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="navs">Navs</h2>
+<p></p>
+<h3 id="shared-nav-styles">Shared nav styles</h3>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@nav-link-padding">@nav-link-padding</label>
+    <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-link-hover-bg">@nav-link-hover-bg</label>
+    <input id="input-@nav-link-hover-bg" type="text" value="@gray-lighter" data-var="@nav-link-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-disabled-link-color">@nav-disabled-link-color</label>
+    <input id="input-@nav-disabled-link-color" type="text" value="@gray-light" data-var="@nav-disabled-link-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-disabled-link-hover-color">@nav-disabled-link-hover-color</label>
+    <input id="input-@nav-disabled-link-hover-color" type="text" value="@gray-light" data-var="@nav-disabled-link-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-open-link-hover-color">@nav-open-link-hover-color</label>
+    <input id="input-@nav-open-link-hover-color" type="text" value="#fff" data-var="@nav-open-link-hover-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="tabs">Tabs</h2>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label>
+    <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-link-hover-border-color">@nav-tabs-link-hover-border-color</label>
+    <input id="input-@nav-tabs-link-hover-border-color" type="text" value="@gray-lighter" data-var="@nav-tabs-link-hover-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-active-link-hover-bg">@nav-tabs-active-link-hover-bg</label>
+    <input id="input-@nav-tabs-active-link-hover-bg" type="text" value="@body-bg" data-var="@nav-tabs-active-link-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-active-link-hover-color">@nav-tabs-active-link-hover-color</label>
+    <input id="input-@nav-tabs-active-link-hover-color" type="text" value="@gray" data-var="@nav-tabs-active-link-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label>
+    <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-justified-link-border-color">@nav-tabs-justified-link-border-color</label>
+    <input id="input-@nav-tabs-justified-link-border-color" type="text" value="#ddd" data-var="@nav-tabs-justified-link-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-tabs-justified-active-link-border-color">@nav-tabs-justified-active-link-border-color</label>
+    <input id="input-@nav-tabs-justified-active-link-border-color" type="text" value="@body-bg" data-var="@nav-tabs-justified-active-link-border-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="pills">Pills</h2>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@nav-pills-border-radius">@nav-pills-border-radius</label>
+    <input id="input-@nav-pills-border-radius" type="text" value="@border-radius-base" data-var="@nav-pills-border-radius" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-pills-active-link-hover-bg">@nav-pills-active-link-hover-bg</label>
+    <input id="input-@nav-pills-active-link-hover-bg" type="text" value="@component-active-bg" data-var="@nav-pills-active-link-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@nav-pills-active-link-hover-color">@nav-pills-active-link-hover-color</label>
+    <input id="input-@nav-pills-active-link-hover-color" type="text" value="@component-active-color" data-var="@nav-pills-active-link-hover-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="pagination">Pagination</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-color">@pagination-color</label>
+    <input id="input-@pagination-color" type="text" value="@link-color" data-var="@pagination-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-bg">@pagination-bg</label>
+    <input id="input-@pagination-bg" type="text" value="#fff" data-var="@pagination-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-border">@pagination-border</label>
+    <input id="input-@pagination-border" type="text" value="#ddd" data-var="@pagination-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-hover-color">@pagination-hover-color</label>
+    <input id="input-@pagination-hover-color" type="text" value="@link-hover-color" data-var="@pagination-hover-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-hover-bg">@pagination-hover-bg</label>
+    <input id="input-@pagination-hover-bg" type="text" value="@gray-lighter" data-var="@pagination-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-hover-border">@pagination-hover-border</label>
+    <input id="input-@pagination-hover-border" type="text" value="#ddd" data-var="@pagination-hover-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-active-color">@pagination-active-color</label>
+    <input id="input-@pagination-active-color" type="text" value="#fff" data-var="@pagination-active-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-active-bg">@pagination-active-bg</label>
+    <input id="input-@pagination-active-bg" type="text" value="@brand-primary" data-var="@pagination-active-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-active-border">@pagination-active-border</label>
+    <input id="input-@pagination-active-border" type="text" value="@brand-primary" data-var="@pagination-active-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-disabled-color">@pagination-disabled-color</label>
+    <input id="input-@pagination-disabled-color" type="text" value="@gray-light" data-var="@pagination-disabled-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-disabled-bg">@pagination-disabled-bg</label>
+    <input id="input-@pagination-disabled-bg" type="text" value="#fff" data-var="@pagination-disabled-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pagination-disabled-border">@pagination-disabled-border</label>
+    <input id="input-@pagination-disabled-border" type="text" value="#ddd" data-var="@pagination-disabled-border" class="form-control"/>
+  </div>
+</div>
+<h2 id="pager">Pager</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@pager-bg">@pager-bg</label>
+    <input id="input-@pager-bg" type="text" value="@pagination-bg" data-var="@pager-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-border">@pager-border</label>
+    <input id="input-@pager-border" type="text" value="@pagination-border" data-var="@pager-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-border-radius">@pager-border-radius</label>
+    <input id="input-@pager-border-radius" type="text" value="15px" data-var="@pager-border-radius" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-hover-bg">@pager-hover-bg</label>
+    <input id="input-@pager-hover-bg" type="text" value="@pagination-hover-bg" data-var="@pager-hover-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-active-bg">@pager-active-bg</label>
+    <input id="input-@pager-active-bg" type="text" value="@pagination-active-bg" data-var="@pager-active-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-active-color">@pager-active-color</label>
+    <input id="input-@pager-active-color" type="text" value="@pagination-active-color" data-var="@pager-active-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pager-disabled-color">@pager-disabled-color</label>
+    <input id="input-@pager-disabled-color" type="text" value="@pagination-disabled-color" data-var="@pager-disabled-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="jumbotron">Jumbotron</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@jumbotron-padding">@jumbotron-padding</label>
+    <input id="input-@jumbotron-padding" type="text" value="30px" data-var="@jumbotron-padding" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@jumbotron-color">@jumbotron-color</label>
+    <input id="input-@jumbotron-color" type="text" value="inherit" data-var="@jumbotron-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@jumbotron-bg">@jumbotron-bg</label>
+    <input id="input-@jumbotron-bg" type="text" value="@gray-lighter" data-var="@jumbotron-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@jumbotron-heading-color">@jumbotron-heading-color</label>
+    <input id="input-@jumbotron-heading-color" type="text" value="inherit" data-var="@jumbotron-heading-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@jumbotron-font-size">@jumbotron-font-size</label>
+    <input id="input-@jumbotron-font-size" type="text" value="ceil((@font-size-base * 1.5))" data-var="@jumbotron-font-size" class="form-control"/>
+  </div>
+</div>
+<h2 id="form-states-and-alerts">Form states and alerts</h2>
+<p>Define colors for form feedback states and, by default, alerts.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@state-success-text">@state-success-text</label>
+    <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-success-bg">@state-success-bg</label>
+    <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-success-border">@state-success-border</label>
+    <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-info-text">@state-info-text</label>
+    <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-info-bg">@state-info-bg</label>
+    <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-info-border">@state-info-border</label>
+    <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-warning-text">@state-warning-text</label>
+    <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-warning-bg">@state-warning-bg</label>
+    <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-warning-border">@state-warning-border</label>
+    <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-danger-text">@state-danger-text</label>
+    <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-danger-bg">@state-danger-bg</label>
+    <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@state-danger-border">@state-danger-border</label>
+    <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control"/>
+  </div>
+</div>
+<h2 id="tooltips">Tooltips</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-max-width">@tooltip-max-width</label>
+    <input id="input-@tooltip-max-width" type="text" value="200px" data-var="@tooltip-max-width" class="form-control"/>
+    <p class="help-block">Tooltip max width</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-color">@tooltip-color</label>
+    <input id="input-@tooltip-color" type="text" value="#fff" data-var="@tooltip-color" class="form-control"/>
+    <p class="help-block">Tooltip text color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-bg">@tooltip-bg</label>
+    <input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/>
+    <p class="help-block">Tooltip background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-opacity">@tooltip-opacity</label>
+    <input id="input-@tooltip-opacity" type="text" value=".9" data-var="@tooltip-opacity" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label>
+    <input id="input-@tooltip-arrow-width" type="text" value="5px" data-var="@tooltip-arrow-width" class="form-control"/>
+    <p class="help-block">Tooltip arrow width</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label>
+    <input id="input-@tooltip-arrow-color" type="text" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/>
+    <p class="help-block">Tooltip arrow color</p>
+  </div>
+</div>
+<h2 id="popovers">Popovers</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@popover-bg">@popover-bg</label>
+    <input id="input-@popover-bg" type="text" value="#fff" data-var="@popover-bg" class="form-control"/>
+    <p class="help-block">Popover body background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-max-width">@popover-max-width</label>
+    <input id="input-@popover-max-width" type="text" value="276px" data-var="@popover-max-width" class="form-control"/>
+    <p class="help-block">Popover maximum width</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-border-color">@popover-border-color</label>
+    <input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/>
+    <p class="help-block">Popover border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label>
+    <input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/>
+    <p class="help-block">Popover fallback border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-title-bg">@popover-title-bg</label>
+    <input id="input-@popover-title-bg" type="text" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/>
+    <p class="help-block">Popover title background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-arrow-width">@popover-arrow-width</label>
+    <input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/>
+    <p class="help-block">Popover arrow width</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-arrow-color">@popover-arrow-color</label>
+    <input id="input-@popover-arrow-color" type="text" value="#fff" data-var="@popover-arrow-color" class="form-control"/>
+    <p class="help-block">Popover arrow color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label>
+    <input id="input-@popover-arrow-outer-width" type="text" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/>
+    <p class="help-block">Popover outer arrow width</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label>
+    <input id="input-@popover-arrow-outer-color" type="text" value="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color" class="form-control"/>
+    <p class="help-block">Popover outer arrow color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label>
+    <input id="input-@popover-arrow-outer-fallback-color" type="text" value="#999" data-var="@popover-arrow-outer-fallback-color" class="form-control"/>
+    <p class="help-block">Popover outer arrow fallback color</p>
+  </div>
+</div>
+<h2 id="labels">Labels</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@label-default-bg">@label-default-bg</label>
+    <input id="input-@label-default-bg" type="text" value="@gray-light" data-var="@label-default-bg" class="form-control"/>
+    <p class="help-block">Default label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-primary-bg">@label-primary-bg</label>
+    <input id="input-@label-primary-bg" type="text" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/>
+    <p class="help-block">Primary label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-success-bg">@label-success-bg</label>
+    <input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/>
+    <p class="help-block">Success label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-info-bg">@label-info-bg</label>
+    <input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/>
+    <p class="help-block">Info label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-warning-bg">@label-warning-bg</label>
+    <input id="input-@label-warning-bg" type="text" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/>
+    <p class="help-block">Warning label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-danger-bg">@label-danger-bg</label>
+    <input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/>
+    <p class="help-block">Danger label background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-color">@label-color</label>
+    <input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/>
+    <p class="help-block">Default label text color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@label-link-hover-color">@label-link-hover-color</label>
+    <input id="input-@label-link-hover-color" type="text" value="#fff" data-var="@label-link-hover-color" class="form-control"/>
+    <p class="help-block">Default text color of a linked label</p>
+  </div>
+</div>
+<h2 id="modals">Modals</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@modal-inner-padding">@modal-inner-padding</label>
+    <input id="input-@modal-inner-padding" type="text" value="20px" data-var="@modal-inner-padding" class="form-control"/>
+    <p class="help-block">Padding applied to the modal body</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-title-padding">@modal-title-padding</label>
+    <input id="input-@modal-title-padding" type="text" value="15px" data-var="@modal-title-padding" class="form-control"/>
+    <p class="help-block">Padding applied to the modal title</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-title-line-height">@modal-title-line-height</label>
+    <input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/>
+    <p class="help-block">Modal title line-height</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-content-bg">@modal-content-bg</label>
+    <input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/>
+    <p class="help-block">Background color of modal content area</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-content-border-color">@modal-content-border-color</label>
+    <input id="input-@modal-content-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/>
+    <p class="help-block">Modal content border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
+    <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/>
+    <p class="help-block">Modal content border color &lt;strong&gt;for IE8&lt;/strong&gt;</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
+    <input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/>
+    <p class="help-block">Modal backdrop background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label>
+    <input id="input-@modal-backdrop-opacity" type="text" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/>
+    <p class="help-block">Modal backdrop opacity</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-header-border-color">@modal-header-border-color</label>
+    <input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/>
+    <p class="help-block">Modal header border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-footer-border-color">@modal-footer-border-color</label>
+    <input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/>
+    <p class="help-block">Modal footer border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-lg">@modal-lg</label>
+    <input id="input-@modal-lg" type="text" value="900px" data-var="@modal-lg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-sm">@modal-sm</label>
+    <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/>
+  </div>
+</div>
+<h2 id="alerts">Alerts</h2>
+<p>Define alert colors, border radius, and padding.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@alert-padding">@alert-padding</label>
+    <input id="input-@alert-padding" type="text" value="15px" data-var="@alert-padding" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-border-radius">@alert-border-radius</label>
+    <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-link-font-weight">@alert-link-font-weight</label>
+    <input id="input-@alert-link-font-weight" type="text" value="bold" data-var="@alert-link-font-weight" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-success-bg">@alert-success-bg</label>
+    <input id="input-@alert-success-bg" type="text" value="@state-success-bg" data-var="@alert-success-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-success-text">@alert-success-text</label>
+    <input id="input-@alert-success-text" type="text" value="@state-success-text" data-var="@alert-success-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-success-border">@alert-success-border</label>
+    <input id="input-@alert-success-border" type="text" value="@state-success-border" data-var="@alert-success-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-info-bg">@alert-info-bg</label>
+    <input id="input-@alert-info-bg" type="text" value="@state-info-bg" data-var="@alert-info-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-info-text">@alert-info-text</label>
+    <input id="input-@alert-info-text" type="text" value="@state-info-text" data-var="@alert-info-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-info-border">@alert-info-border</label>
+    <input id="input-@alert-info-border" type="text" value="@state-info-border" data-var="@alert-info-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-warning-bg">@alert-warning-bg</label>
+    <input id="input-@alert-warning-bg" type="text" value="@state-warning-bg" data-var="@alert-warning-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-warning-text">@alert-warning-text</label>
+    <input id="input-@alert-warning-text" type="text" value="@state-warning-text" data-var="@alert-warning-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-warning-border">@alert-warning-border</label>
+    <input id="input-@alert-warning-border" type="text" value="@state-warning-border" data-var="@alert-warning-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-danger-bg">@alert-danger-bg</label>
+    <input id="input-@alert-danger-bg" type="text" value="@state-danger-bg" data-var="@alert-danger-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-danger-text">@alert-danger-text</label>
+    <input id="input-@alert-danger-text" type="text" value="@state-danger-text" data-var="@alert-danger-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@alert-danger-border">@alert-danger-border</label>
+    <input id="input-@alert-danger-border" type="text" value="@state-danger-border" data-var="@alert-danger-border" class="form-control"/>
+  </div>
+</div>
+<h2 id="progress-bars">Progress bars</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bg">@progress-bg</label>
+    <input id="input-@progress-bg" type="text" value="#f5f5f5" data-var="@progress-bg" class="form-control"/>
+    <p class="help-block">Background color of the whole progress component</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-color">@progress-bar-color</label>
+    <input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/>
+    <p class="help-block">Progress bar text color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-bg">@progress-bar-bg</label>
+    <input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/>
+    <p class="help-block">Default progress bar color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label>
+    <input id="input-@progress-bar-success-bg" type="text" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/>
+    <p class="help-block">Success progress bar color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label>
+    <input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/>
+    <p class="help-block">Warning progress bar color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label>
+    <input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/>
+    <p class="help-block">Danger progress bar color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label>
+    <input id="input-@progress-bar-info-bg" type="text" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/>
+    <p class="help-block">Info progress bar color</p>
+  </div>
+</div>
+<h2 id="list-group">List group</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-bg">@list-group-bg</label>
+    <input id="input-@list-group-bg" type="text" value="#fff" data-var="@list-group-bg" class="form-control"/>
+    <p class="help-block">Background color on <code>.list-group-item</code></p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-border">@list-group-border</label>
+    <input id="input-@list-group-border" type="text" value="#ddd" data-var="@list-group-border" class="form-control"/>
+    <p class="help-block"><code>.list-group-item</code> border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-border-radius">@list-group-border-radius</label>
+    <input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/>
+    <p class="help-block">List group border radius</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-hover-bg">@list-group-hover-bg</label>
+    <input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/>
+    <p class="help-block">Background color of single list elements on hover</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-active-color">@list-group-active-color</label>
+    <input id="input-@list-group-active-color" type="text" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/>
+    <p class="help-block">Text color of active list elements</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-active-bg">@list-group-active-bg</label>
+    <input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/>
+    <p class="help-block">Background color of active list elements</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-active-border">@list-group-active-border</label>
+    <input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/>
+    <p class="help-block">Border color of active list elements</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-active-text-color">@list-group-active-text-color</label>
+    <input id="input-@list-group-active-text-color" type="text" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-link-color">@list-group-link-color</label>
+    <input id="input-@list-group-link-color" type="text" value="#555" data-var="@list-group-link-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@list-group-link-heading-color">@list-group-link-heading-color</label>
+    <input id="input-@list-group-link-heading-color" type="text" value="#333" data-var="@list-group-link-heading-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="panels">Panels</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@panel-bg">@panel-bg</label>
+    <input id="input-@panel-bg" type="text" value="#fff" data-var="@panel-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-body-padding">@panel-body-padding</label>
+    <input id="input-@panel-body-padding" type="text" value="15px" data-var="@panel-body-padding" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-border-radius">@panel-border-radius</label>
+    <input id="input-@panel-border-radius" type="text" value="@border-radius-base" data-var="@panel-border-radius" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-inner-border">@panel-inner-border</label>
+    <input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/>
+    <p class="help-block">Border color for elements within panels</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-footer-bg">@panel-footer-bg</label>
+    <input id="input-@panel-footer-bg" type="text" value="#f5f5f5" data-var="@panel-footer-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-default-text">@panel-default-text</label>
+    <input id="input-@panel-default-text" type="text" value="@gray-dark" data-var="@panel-default-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-default-border">@panel-default-border</label>
+    <input id="input-@panel-default-border" type="text" value="#ddd" data-var="@panel-default-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-default-heading-bg">@panel-default-heading-bg</label>
+    <input id="input-@panel-default-heading-bg" type="text" value="#f5f5f5" data-var="@panel-default-heading-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-primary-text">@panel-primary-text</label>
+    <input id="input-@panel-primary-text" type="text" value="#fff" data-var="@panel-primary-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-primary-border">@panel-primary-border</label>
+    <input id="input-@panel-primary-border" type="text" value="@brand-primary" data-var="@panel-primary-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-primary-heading-bg">@panel-primary-heading-bg</label>
+    <input id="input-@panel-primary-heading-bg" type="text" value="@brand-primary" data-var="@panel-primary-heading-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-success-text">@panel-success-text</label>
+    <input id="input-@panel-success-text" type="text" value="@state-success-text" data-var="@panel-success-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-success-border">@panel-success-border</label>
+    <input id="input-@panel-success-border" type="text" value="@state-success-border" data-var="@panel-success-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-success-heading-bg">@panel-success-heading-bg</label>
+    <input id="input-@panel-success-heading-bg" type="text" value="@state-success-bg" data-var="@panel-success-heading-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-info-text">@panel-info-text</label>
+    <input id="input-@panel-info-text" type="text" value="@state-info-text" data-var="@panel-info-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-info-border">@panel-info-border</label>
+    <input id="input-@panel-info-border" type="text" value="@state-info-border" data-var="@panel-info-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-info-heading-bg">@panel-info-heading-bg</label>
+    <input id="input-@panel-info-heading-bg" type="text" value="@state-info-bg" data-var="@panel-info-heading-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-warning-text">@panel-warning-text</label>
+    <input id="input-@panel-warning-text" type="text" value="@state-warning-text" data-var="@panel-warning-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-warning-border">@panel-warning-border</label>
+    <input id="input-@panel-warning-border" type="text" value="@state-warning-border" data-var="@panel-warning-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-warning-heading-bg">@panel-warning-heading-bg</label>
+    <input id="input-@panel-warning-heading-bg" type="text" value="@state-warning-bg" data-var="@panel-warning-heading-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-danger-text">@panel-danger-text</label>
+    <input id="input-@panel-danger-text" type="text" value="@state-danger-text" data-var="@panel-danger-text" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-danger-border">@panel-danger-border</label>
+    <input id="input-@panel-danger-border" type="text" value="@state-danger-border" data-var="@panel-danger-border" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@panel-danger-heading-bg">@panel-danger-heading-bg</label>
+    <input id="input-@panel-danger-heading-bg" type="text" value="@state-danger-bg" data-var="@panel-danger-heading-bg" class="form-control"/>
+  </div>
+</div>
+<h2 id="thumbnails">Thumbnails</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-padding">@thumbnail-padding</label>
+    <input id="input-@thumbnail-padding" type="text" value="4px" data-var="@thumbnail-padding" class="form-control"/>
+    <p class="help-block">Padding around the thumbnail image</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-bg">@thumbnail-bg</label>
+    <input id="input-@thumbnail-bg" type="text" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/>
+    <p class="help-block">Thumbnail background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-border">@thumbnail-border</label>
+    <input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/>
+    <p class="help-block">Thumbnail border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label>
+    <input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/>
+    <p class="help-block">Thumbnail border radius</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label>
+    <input id="input-@thumbnail-caption-color" type="text" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/>
+    <p class="help-block">Custom text color for thumbnail captions</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label>
+    <input id="input-@thumbnail-caption-padding" type="text" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/>
+    <p class="help-block">Padding around the thumbnail caption</p>
+  </div>
+</div>
+<h2 id="wells">Wells</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@well-bg">@well-bg</label>
+    <input id="input-@well-bg" type="text" value="#f5f5f5" data-var="@well-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@well-border">@well-border</label>
+    <input id="input-@well-border" type="text" value="darken(@well-bg, 7%)" data-var="@well-border" class="form-control"/>
+  </div>
+</div>
+<h2 id="badges">Badges</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@badge-color">@badge-color</label>
+    <input id="input-@badge-color" type="text" value="#fff" data-var="@badge-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-link-hover-color">@badge-link-hover-color</label>
+    <input id="input-@badge-link-hover-color" type="text" value="#fff" data-var="@badge-link-hover-color" class="form-control"/>
+    <p class="help-block">Linked badge text color on hover</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-bg">@badge-bg</label>
+    <input id="input-@badge-bg" type="text" value="@gray-light" data-var="@badge-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-active-color">@badge-active-color</label>
+    <input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/>
+    <p class="help-block">Badge text color in active nav link</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-active-bg">@badge-active-bg</label>
+    <input id="input-@badge-active-bg" type="text" value="#fff" data-var="@badge-active-bg" class="form-control"/>
+    <p class="help-block">Badge background color in active nav link</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-font-weight">@badge-font-weight</label>
+    <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@badge-border-radius">@badge-border-radius</label>
+    <input id="input-@badge-border-radius" type="text" value="10px" data-var="@badge-border-radius" class="form-control"/>
+  </div>
+</div>
+<h2 id="breadcrumbs">Breadcrumbs</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-padding-vertical">@breadcrumb-padding-vertical</label>
+    <input id="input-@breadcrumb-padding-vertical" type="text" value="8px" data-var="@breadcrumb-padding-vertical" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-padding-horizontal">@breadcrumb-padding-horizontal</label>
+    <input id="input-@breadcrumb-padding-horizontal" type="text" value="15px" data-var="@breadcrumb-padding-horizontal" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-bg">@breadcrumb-bg</label>
+    <input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/>
+    <p class="help-block">Breadcrumb background color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-color">@breadcrumb-color</label>
+    <input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/>
+    <p class="help-block">Breadcrumb text color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label>
+    <input id="input-@breadcrumb-active-color" type="text" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/>
+    <p class="help-block">Text color of current page in the breadcrumb</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@breadcrumb-separator">@breadcrumb-separator</label>
+    <input id="input-@breadcrumb-separator" type="text" value="&quot;/&quot;" data-var="@breadcrumb-separator" class="form-control"/>
+    <p class="help-block">Textual separator for between breadcrumb elements</p>
+  </div>
+</div>
+<h2 id="carousel">Carousel</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-text-shadow">@carousel-text-shadow</label>
+    <input id="input-@carousel-text-shadow" type="text" value="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-control-color">@carousel-control-color</label>
+    <input id="input-@carousel-control-color" type="text" value="#fff" data-var="@carousel-control-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-control-width">@carousel-control-width</label>
+    <input id="input-@carousel-control-width" type="text" value="15%" data-var="@carousel-control-width" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-control-opacity">@carousel-control-opacity</label>
+    <input id="input-@carousel-control-opacity" type="text" value=".5" data-var="@carousel-control-opacity" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-control-font-size">@carousel-control-font-size</label>
+    <input id="input-@carousel-control-font-size" type="text" value="20px" data-var="@carousel-control-font-size" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-indicator-active-bg">@carousel-indicator-active-bg</label>
+    <input id="input-@carousel-indicator-active-bg" type="text" value="#fff" data-var="@carousel-indicator-active-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-indicator-border-color">@carousel-indicator-border-color</label>
+    <input id="input-@carousel-indicator-border-color" type="text" value="#fff" data-var="@carousel-indicator-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@carousel-caption-color">@carousel-caption-color</label>
+    <input id="input-@carousel-caption-color" type="text" value="#fff" data-var="@carousel-caption-color" class="form-control"/>
+  </div>
+</div>
+<h2 id="close">Close</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@close-font-weight">@close-font-weight</label>
+    <input id="input-@close-font-weight" type="text" value="bold" data-var="@close-font-weight" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@close-color">@close-color</label>
+    <input id="input-@close-color" type="text" value="#000" data-var="@close-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@close-text-shadow">@close-text-shadow</label>
+    <input id="input-@close-text-shadow" type="text" value="0 1px 0 #fff" data-var="@close-text-shadow" class="form-control"/>
+  </div>
+</div>
+<h2 id="code">Code</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@code-color">@code-color</label>
+    <input id="input-@code-color" type="text" value="#c7254e" data-var="@code-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@code-bg">@code-bg</label>
+    <input id="input-@code-bg" type="text" value="#f9f2f4" data-var="@code-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@kbd-color">@kbd-color</label>
+    <input id="input-@kbd-color" type="text" value="#fff" data-var="@kbd-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@kbd-bg">@kbd-bg</label>
+    <input id="input-@kbd-bg" type="text" value="#333" data-var="@kbd-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pre-bg">@pre-bg</label>
+    <input id="input-@pre-bg" type="text" value="#f5f5f5" data-var="@pre-bg" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pre-color">@pre-color</label>
+    <input id="input-@pre-color" type="text" value="@gray-dark" data-var="@pre-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pre-border-color">@pre-border-color</label>
+    <input id="input-@pre-border-color" type="text" value="#ccc" data-var="@pre-border-color" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@pre-scrollable-max-height">@pre-scrollable-max-height</label>
+    <input id="input-@pre-scrollable-max-height" type="text" value="340px" data-var="@pre-scrollable-max-height" class="form-control"/>
+  </div>
+</div>
+<h2 id="type">Type</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@text-muted">@text-muted</label>
+    <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/>
+    <p class="help-block">Text muted color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@abbr-border-color">@abbr-border-color</label>
+    <input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/>
+    <p class="help-block">Abbreviations and acronyms border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@headings-small-color">@headings-small-color</label>
+    <input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/>
+    <p class="help-block">Headings small color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@blockquote-small-color">@blockquote-small-color</label>
+    <input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/>
+    <p class="help-block">Blockquote small color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@blockquote-border-color">@blockquote-border-color</label>
+    <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/>
+    <p class="help-block">Blockquote border color</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@page-header-border-color">@page-header-border-color</label>
+    <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>
+<h2 id="miscellaneous">Miscellaneous</h2>
+<p></p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@hr-border">@hr-border</label>
+    <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/>
+    <p class="help-block">Horizontal line color.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
+    <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
+    <p class="help-block">Horizontal offset for forms and lists.</p>
+  </div>
+</div>
+<h2 id="container-sizes">Container sizes</h2>
+<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@container-tablet">@container-tablet</label>
+    <input id="input-@container-tablet" type="text" value="((720px + @grid-gutter-width))" data-var="@container-tablet" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-sm">@container-sm</label>
+    <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/>
+    <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-desktop">@container-desktop</label>
+    <input id="input-@container-desktop" type="text" value="((940px + @grid-gutter-width))" data-var="@container-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-md">@container-md</label>
+    <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/>
+    <p class="help-block">For <code>@screen-md-min</code> and up.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-large-desktop">@container-large-desktop</label>
+    <input id="input-@container-large-desktop" type="text" value="((1140px + @grid-gutter-width))" data-var="@container-large-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-lg">@container-lg</label>
+    <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/>
+    <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
+  </div>
+</div>
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.-->

docs/_includes/footer.html

@@ -36,7 +36,7 @@
 
 {% if page.slug == "customize" %}
 <script src="{{ site.baseurl }}assets/js/raw-files.js"></script>
-<script src="{{ site.baseurl }}assets/js/customize.js"></script>
+<script src="{{ site.baseurl }}assets/js/customize.min.js"></script>
 {% endif %}
 
 {% comment %}

docs/assets/css/docs.css

@@ -1,5 +1,6 @@
+/*csslint ids: false, overqualified-elements: false*/
 /*!
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  *
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.
@@ -1255,6 +1256,13 @@ h1[id] {
   font-weight: normal;
 }
 
+.bs-customizer-input {
+  float: left;
+  width: 33.333333%;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
 /* Downloads */
 .bs-customize-download .btn-outline {
   padding: 20px;
@@ -1379,6 +1387,7 @@ h1[id] {
 
 /* Pseudo :focus state for showing how it looks in the docs */
 #focusedInput {
+  border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/
   border-color: rgba(82,168,236,.8);
   outline: 0;
   outline: thin dotted \9; /* IE6-9 */

docs/assets/js/application.js

@@ -3,7 +3,7 @@
 // ++++++++++++++++++++++++++++++++++++++++++
 
 /*!
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  *
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.

docs/assets/js/customizer.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  *
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.
@@ -10,7 +10,7 @@
 window.onload = function () { // wait for load in a dumb way because B-0
   var cw = '/*!\n' +
            ' * Bootstrap v3.0.3 (http://getbootstrap.com)\n' +
-           ' * Copyright 2013 Twitter, Inc.\n' +
+           ' * Copyright 2011-2014 Twitter, Inc.\n' +
            ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
            ' */\n\n';
 
@@ -173,20 +173,55 @@ window.onload = function () { // wait for load in a dumb way because B-0
     }
   }
 
-  // Returns an Array of @import'd filenames from 'bootstrap.less' in the order
+  // Returns an Array of @import'd filenames in the order
   // in which they appear in the file.
-  function bootstrapLessFilenames() {
+  function includedLessFilenames(lessFilename) {
     var IMPORT_REGEX = /^@import \"(.*?)\";$/
-    var bootstrapLessLines = __less['bootstrap.less'].split('\n')
+    var lessLines = __less[lessFilename].split('\n')
 
-    for (var i = 0, imports = []; i < bootstrapLessLines.length; i++) {
-      var match = IMPORT_REGEX.exec(bootstrapLessLines[i])
+    for (var i = 0, imports = []; i < lessLines.length; i++) {
+      var match = IMPORT_REGEX.exec(lessLines[i])
       if (match) imports.push(match[1])
     }
 
     return imports
   }
 
+  function generateLESS(lessFilename, lessFileIncludes, vars) {
+    var lessSource = __less[lessFilename]
+
+    $.each(includedLessFilenames(lessFilename), function(index, filename) {
+      var fileInclude = lessFileIncludes[filename]
+
+      // Files not explicitly unchecked are compiled into the final stylesheet.
+      // Core stylesheets like 'normalize.less' are not included in the form
+      // since disabling them would wreck everything, and so their 'fileInclude'
+      // will be 'undefined'.
+      if (fileInclude || (fileInclude == null))    lessSource += __less[filename]
+
+      // Custom variables are added after Bootstrap variables so the custom
+      // ones take precedence.
+      if (('variables.less' === filename) && vars) lessSource += generateCustomCSS(vars)
+    })
+
+    lessSource = lessSource.replace(/@import[^\n]*/gi, '') //strip any imports
+    return lessSource
+  }
+
+  function compileLESS(lessSource, baseFilename, intoResult) {
+    var parser = new less.Parser({
+        paths: ['variables.less', 'mixins.less'],
+        optimization: 0,
+        filename: baseFilename + '.css'
+    }).parse(lessSource, function (err, tree) {
+      if (err) {
+        return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
+      }
+      intoResult[baseFilename + '.css']     = cw + tree.toCSS()
+      intoResult[baseFilename + '.min.css'] = cw + tree.toCSS({ compress: true })
+    })
+  }
+
   function generateCSS() {
     var oneChecked = false
     var lessFileIncludes = {}
@@ -202,43 +237,18 @@ window.onload = function () { // wait for load in a dumb way because B-0
 
     var result = {}
     var vars = {}
-    var css = ''
 
     $('#less-variables-section input')
         .each(function () {
           $(this).val() && (vars[$(this).prev().text()] = $(this).val())
         })
 
-    $.each(bootstrapLessFilenames(), function(index, filename) {
-      var fileInclude = lessFileIncludes[filename]
-
-      // Files not explicitly unchecked are compiled into the final stylesheet.
-      // Core stylesheets like 'normalize.less' are not included in the form
-      // since disabling them would wreck everything, and so their 'fileInclude'
-      // will be 'undefined'.
-      if (fileInclude || (fileInclude == null)) css += __less[filename]
-
-      // Custom variables are added after Bootstrap variables so the custom
-      // ones take precedence.
-      if (('variables.less' === filename) && vars) css += generateCustomCSS(vars)
-    })
-
-    css = css.replace(/@import[^\n]*/gi, '') //strip any imports
+    var bsLessSource    = generateLESS('bootstrap.less', lessFileIncludes, vars)
+    var themeLessSource = generateLESS('theme.less',     lessFileIncludes, vars)
 
     try {
-      var parser = new less.Parser({
-          paths: ['variables.less', 'mixins.less'],
-          optimization: 0,
-          filename: 'bootstrap.css'
-      }).parse(css, function (err, tree) {
-        if (err) {
-          return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
-        }
-        result = {
-          'bootstrap.css'     : cw + tree.toCSS(),
-          'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
-        }
-      })
+      compileLESS(bsLessSource, 'bootstrap', result)
+      compileLESS(themeLessSource, 'bootstrap-theme', result)
     } catch (err) {
       return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
     }

docs/assets/js/ie8-responsive-file-warning.js

@@ -2,7 +2,7 @@
 // IT'S JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++
 /*!
- * Copyright 2013 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  *
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.

docs/components.html

@@ -2616,17 +2616,17 @@ body { padding-bottom: 70px; }
         <div class="col-sm-6">
           <ul class="list-group">
             <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
             <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
             <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
-            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
           </ul>
         </div>
         <div class="col-sm-6">
           <div class="list-group">
             <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
             <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
             <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
-            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
           </div>
         </div>
       </div>
@@ -2634,15 +2634,15 @@ body { padding-bottom: 70px; }
 {% highlight html %}
 <ul class="list-group">
   <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
   <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
   <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
-  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
 </ul>
 <div class="list-group">
   <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
   <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
   <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
-  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
 </div>
 {% endhighlight %}
 

docs/css.html

@@ -1312,6 +1312,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </td>
             <td>Indicates a successful or positive action</td>
           </tr>
+          <tr>
+            <td>
+              <code>.info</code>
+            </td>
+            <td>Indicates a neutral informative change or action</td>
+          </tr>
           <tr>
             <td>
               <code>.warning</code>
@@ -1324,12 +1330,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </td>
             <td>Indicates a dangerous or potentially negative action</td>
           </tr>
-          <tr>
-            <td>
-              <code>.info</code>
-            </td>
-            <td>Indicates a neutral informative change or action</td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -1368,7 +1368,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="warning">
+          <tr class="info">
             <td>5</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1380,7 +1380,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="danger">
+          <tr class="warning">
             <td>7</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1392,7 +1392,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="info">
+          <tr class="danger">
             <td>9</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -2854,17 +2854,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="color-swatches">
         <div class="color-swatch brand-primary"></div>
         <div class="color-swatch brand-success"></div>
+        <div class="color-swatch brand-info"></div>
         <div class="color-swatch brand-warning"></div>
         <div class="color-swatch brand-danger"></div>
-        <div class="color-swatch brand-info"></div>
       </div>
     </div>
 {% highlight css %}
 @brand-primary: #428bca;
 @brand-success: #5cb85c;
+@brand-info:    #5bc0de;
 @brand-warning: #f0ad4e;
 @brand-danger:  #d9534f;
-@brand-info:    #5bc0de;
 {% endhighlight %}
 
     <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
@@ -2989,7 +2989,7 @@ a {
 {% endhighlight %}
 
     <h3 id="less-mixins-rounded-corners">Rounded corners</h3>
-    <p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
+    <p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
 {% highlight css %}
 .border-top-radius(@radius) {
   border-top-right-radius: @radius;
@@ -3284,7 +3284,7 @@ a {
 {% endhighlight %}
 
     <h3 id="less-mixins-retina-images">Retina images</h3>
-    <p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
+    <p>Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
 {% highlight css %}
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");

docs/customize.html

@@ -343,1370 +343,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h1 id="less-variables">LESS variables</h1>
     </div>
     <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
-
-    <h2 id="variables-basics">Basics</h2>
-
-
-    <h3>Color system</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@brand-primary</label>
-        <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
-        <label>@brand-success</label>
-        <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
-        <label>@brand-warning</label>
-        <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
-      </div>
-      <div class="col-md-6">
-        <label>@brand-danger</label>
-        <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
-        <label>@brand-info</label>
-        <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
-      </div>
-    </div>
-
-
-    <h3>Body scaffolding</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@body-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
-        <p class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
-        <label>@text-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
-        <p class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
-      </div>
-      <div class="col-md-6">
-        <label>@link-color</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
-        <p class="help-block">Global textual link color</p>
-        <label>@link-hover-color</label>
-        <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-hover-color">
-        <p class="help-block">Link hover color set via <code>darken()</code> function</p>
-      </div>
-    </div>
-
-
-    <h3>Typography</h3>
-    <div class="row">
-      <div class="col-lg-6">
-        <h4>Generic font variables</h4>
-        <label>@font-family-sans-serif</label>
-        <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
-        <p class="help-block">Default sans-serif fonts.</p>
-        <label>@font-family-serif</label>
-        <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
-        <p class="help-block">Default serif fonts.</p>
-        <label>@font-family-monospace</label>
-        <input type="text" class="form-control" placeholder="Menlo, Monaco, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
-        <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
-
-        <h4>Base type styles</h4>
-        <label>@font-family-base</label>
-        <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
-        <label>@font-size-base</label>
-        <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
-        <label>@line-height-base</label>
-        <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
-        <label>@line-height-large</label>
-        <input type="text" class="form-control" placeholder="1.33" data-var="@line-height-large">
-        <label>@line-height-small</label>
-        <input type="text" class="form-control" placeholder="1.5" data-var="@line-height-small">
-      </div>
-      <div class="col-lg-6">
-        <h4>Heading font sizes</h4>
-        <label>@font-size-h1</label>
-        <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.6)" data-var="@font-size-h1">
-        <label>@font-size-h2</label>
-        <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
-        <label>@font-size-h3</label>
-        <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.7)" data-var="@font-size-h3">
-        <label>@font-size-h4</label>
-        <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
-        <label>@font-size-h5</label>
-        <input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
-        <label>@font-size-h6</label>
-        <input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
-      </div>
-    </div>
-
-
-    <h3>Headings</h3>
-    <div class="row">
-      <div class="col-lg-6">
-        <label>@headings-font-family</label>
-        <input type="text" class="form-control" placeholder="inherit" data-var="@headings-font-family">
-        <label>@headings-font-weight</label>
-        <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
-      </div>
-      <div class="col-lg-6">
-        <label>@headings-line-height</label>
-        <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
-        <label>@headings-color</label>
-        <input type="text" class="form-control" placeholder="inherit" data-var="@headings-color">
-      </div>
-    </div>
-
-
-    <h3>Code blocks</h3>
-    <div class="row">
-      <div class="col-lg-6">
-        <label>@code-color</label>
-        <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
-        <label>@code-bg</label>
-        <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
-      </div>
-      <div class="col-lg-6">
-        <label>@pre-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
-        <label>@pre-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
-        <label>@pre-border-color</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
-      </div>
-    </div>
-
-
-    <h3>Media queries breakpoints</h3>
-    <div class="row">
-      <div class="col-xs-6 col-md-3">
-        <label>@screen-xs-min</label>
-        <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
-      </div>
-      <div class="col-xs-6 col-md-3">
-        <label>@screen-sm-min</label>
-        <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
-      </div>
-      <div class="col-xs-6 col-md-3">
-        <label>@screen-md-min</label>
-        <input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
-      </div>
-      <div class="col-xs-6 col-md-3">
-        <label>@screen-lg-min</label>
-        <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
-      </div>
-    </div>
-
-    <h3>Layout and grid system</h3>
-    <div class="row">
-      <div class="col-xs-6 col-sm-4">
-        <label>@container-sm</label>
-        <input type="text" class="form-control" placeholder="((720px + @grid-gutter-width))" data-var="@container-sm">
-        <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
-      </div>
-      <div class="col-xs-6 col-sm-4">
-        <label>@container-md</label>
-        <input type="text" class="form-control" placeholder="((940px + @grid-gutter-width))" data-var="@container-md">
-        <p class="help-block">For <code>@screen-md-min</code> and up.</p>
-      </div>
-      <div class="clearfix visible-xs"></div>
-      <div class="col-xs-6 col-sm-4">
-        <label>@container-lg</label>
-        <input type="text" class="form-control" placeholder="((1140px + @grid-gutter-width))" data-var="@container-lg">
-        <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-xs-6 col-sm-4">
-        <label>@grid-columns</label>
-        <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
-        <p class="help-block">Number of columns in the grid.</p>
-      </div>
-      <div class="col-xs-6 col-sm-4">
-        <label>@grid-gutter-width</label>
-        <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
-        <p class="help-block">Padding between columns.</p>
-      </div>
-      <div class="clearfix visible-xs"></div>
-      <div class="col-xs-6 col-sm-4">
-        <label>@grid-float-breakpoint</label>
-        <input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
-        <p class="help-block">Point at which the navbar stops collapsing.</p>
-      </div>
-    </div>
-
-
-    <h3>Components</h3>
-
-    <h4>Padding</h4>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@padding-base-vertical</label>
-        <input type="text" class="form-control" placeholder="6px" data-var="@padding-base-vertical">
-        <label>@padding-base-horizontal</label>
-        <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
-      </div>
-      <div class="col-md-4">
-        <label>@padding-large-vertical</label>
-        <input type="text" class="form-control" placeholder="10px" data-var="@padding-large-vertical">
-        <label>@padding-large-horizontal</label>
-        <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
-      </div>
-      <div class="col-md-4">
-        <label>@padding-small-vertical</label>
-        <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
-        <label>@padding-small-horizontal</label>
-        <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
-      </div>
-    </div>
-
-    <h4>Rounded corners</h4>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@border-radius-base</label>
-        <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
-      </div>
-      <div class="col-md-4">
-        <label>@border-radius-large</label>
-        <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
-      </div>
-      <div class="col-md-4">
-        <label>@border-radius-small</label>
-        <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
-      </div>
-    </div>
-
-    <h4>Component active state</h4>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@component-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
-        <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
-      </div>
-      <div class="col-md-6">
-        <label>@component-active-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
-        <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
-      </div>
-    </div>
-
-    <h4>Carets</h4>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@caret-width-base</label>
-        <input type="text" class="form-control" placeholder="4px" data-var="@caret-width-base">
-      </div>
-      <div class="col-md-6">
-        <label>@caret-width-large</label>
-        <input type="text" class="form-control" placeholder="5px" data-var="@caret-width-large">
-      </div>
-    </div>
-
-
-    <h2 id="variables-buttons">Buttons</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@btn-font-weight</label>
-        <input type="text" class="form-control" placeholder="normal" data-var="@btn-font-weight">
-      </div>
-      <div class="col-md-6">
-        <label>@btn-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@btn-link-disabled-color">
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Default</h4>
-        <label>@btn-default-color</label>
-        <input type="text" class="form-control" placeholder="#333" data-var="@btn-default-color">
-        <label>@btn-default-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-bg">
-        <label>@btn-default-border</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@btn-default-border">
-        <h4>Primary</h4>
-        <label>@btn-primary-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
-        <label>@btn-primary-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
-        <label>@btn-primary-border</label>
-        <input type="text" class="form-control" placeholder="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border">
-        <h4>Info</h4>
-        <label>@btn-info-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
-        <label>@btn-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
-        <label>@btn-info-border</label>
-        <input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border">
-      </div>
-      <div class="col-md-6">
-        <h4>Success</h4>
-        <label>@btn-success-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
-        <label>@btn-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
-        <label>@btn-success-border</label>
-        <input type="text" class="form-control" placeholder="darken(@btn-success-bg, 5%);" data-var="@btn-success-border">
-        <h4>Warning</h4>
-        <label>@btn-warning-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
-        <label>@btn-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
-        <label>@btn-warning-border</label>
-        <input type="text" class="form-control" placeholder=" darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border">
-        <h4>Danger</h4>
-        <label>@btn-danger-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
-        <label>@btn-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
-        <label>@btn-danger-border</label>
-        <input type="text" class="form-control" placeholder="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border">
-      </div>
-    </div>
-
-
-    <h2 id="variables-form-states">Form states and alerts</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Success</h4>
-        <label>@state-success-text</label>
-        <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
-        <label>@state-success-bg</label>
-        <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
-        <label>@state-success-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
-        <h4>Warning</h4>
-        <label>@state-warning-text</label>
-        <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
-        <label>@state-warning-bg</label>
-        <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
-        <label>@state-warning-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
-      </div>
-      <div class="col-md-6">
-        <h4>Danger</h4>
-        <label>@state-danger-text</label>
-        <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
-        <label>@state-danger-bg</label>
-        <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
-        <label>@state-danger-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
-        <h4>Info</h4>
-        <label>@state-info-text</label>
-        <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
-        <label>@state-info-bg</label>
-        <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
-        <label>@state-info-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
-      </div>
-    </div>
-
-
-    <h2 id="variables-alerts">Alerts</h2>
-
-    <h4>Base styles</h4>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@alert-padding</label>
-        <input type="text" class="form-control" placeholder="15px" data-var="@alert-padding">
-      </div>
-      <div class="col-md-4">
-        <label>@alert-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@alert-border-radius">
-      </div>
-      <div class="col-md-4">
-        <label>@alert-link-font-weight</label>
-        <input type="text" class="form-control" placeholder="bold" data-var="@alert-link-font-weight">
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-lg-6">
-        <h4>Warning</h4>
-        <label>@alert-warning-text</label>
-        <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-warning-text">
-        <label>@alert-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-warning-bg">
-        <label>@alert-warning-border</label>
-        <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-warning-border">
-
-        <h4>Success</h4>
-        <label>@alert-success-text</label>
-        <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
-        <label>@alert-success-bg</label>
-        <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
-        <label>@alert-success-border</label>
-        <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
-      </div>
-      <div class="col-lg-6">
-        <h4>Danger</h4>
-        <label>@alert-danger-text</label>
-        <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
-        <label>@alert-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
-        <label>@alert-danger-border</label>
-        <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
-
-        <h4>Info</h4>
-        <label>@alert-info-text</label>
-        <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
-        <label>@alert-info-bg</label>
-        <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
-        <label>@alert-info-border</label>
-        <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
-      </div>
-    </div>
-
-
-    <h2 id="variables-navbar">Navbar</h2>
-
-    <h3>Base styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@navbar-height</label>
-        <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
-        <label>@navbar-margin-bottom</label>
-        <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
-      </div>
-      <div class="col-md-4">
-        <label>@navbar-padding-horizontal</label>
-        <input type="text" class="form-control" placeholder="floor(@grid-gutter-width / 2)" data-var="@navbar-padding-horizontal">
-        <label>@navbar-padding-vertical</label>
-        <input type="text" class="form-control" placeholder="((@navbar-height - @line-height-computed) / 2)" data-var="@@navbar-padding-vertical">
-      </div>
-      <div class="col-md-4">
-        <label>@navbar-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-lg-6">
-        <h3>Default navbar</h3>
-        <h4>Basics</h4>
-        <label>@navbar-default-color</label>
-        <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
-        <label>@navbar-default-bg</label>
-        <input type="text" class="form-control" placeholder="#f8f8f8" data-var="@navbar-default-bg">
-        <label>@navbar-default-border</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border">
-
-        <h4>Links</h4>
-        <label>@navbar-default-link-color</label>
-        <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
-        <label>@navbar-default-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
-        <label>@navbar-default-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
-        <label>@navbar-default-link-active-color</label>
-        <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
-        <label>@navbar-default-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg">
-        <label>@navbar-default-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
-        <label>@navbar-default-link-disabled-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
-
-        <h4>Brand</h4>
-        <label>@navbar-default-brand-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-default-link-color" data-var="@navbar-default-brand-color">
-        <label>@navbar-default-brand-hover-color</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color">
-        <label>@navbar-default-brand-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
-
-        <h4>Toggle</h4>
-        <label>@navbar-default-toggle-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
-        <label>@navbar-default-toggle-icon-bar-bg</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
-        <label>@navbar-default-toggle-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
-      </div>
-
-      <div class="col-lg-6">
-        <h3>Inverted navbar</h3>
-
-        <h4>Basics</h4>
-        <label>@navbar-inverse-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
-        <label>@navbar-inverse-bg</label>
-        <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
-        <label>@navbar-inverse-border</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border">
-
-        <h4>Links</h4>
-        <label>@navbar-inverse-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
-        <label>@navbar-inverse-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
-        <label>@navbar-inverse-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
-        <label>@navbar-inverse-link-active-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
-        <label>@navbar-inverse-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
-        <label>@navbar-inverse-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="#444" data-var="@navbar-inverse-link-disabled-color">
-        <label>@navbar-inverse-link-disabled-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-disabled-bg">
-
-        <h4>Brand</h4>
-        <label>@navbar-inverse-brand-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color">
-        <label>@navbar-inverse-brand-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-brand-hover-color">
-        <label>@navbar-inverse-brand-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-brand-hover-bg">
-
-        <h4>Toggle</h4>
-        <label>@navbar-inverse-toggle-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-hover-bg">
-        <label>@navbar-inverse-toggle-icon-bar-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg">
-        <label>@navbar-inverse-toggle-border-color</label>
-        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-border-color">
-      </div>
-    </div>
-
-
-    <h2 id="variables-nav">Nav</h2>
-
-    <h3>Default nav</h3>
-    <div class="row">
-      <div class="col-lg-6">
-        <h4>Common values</h4>
-        <label>@nav-link-padding</label>
-        <input type="text" class="form-control" placeholder="10px 15px" data-var="@nav-link-padding">
-        <label>@nav-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-link-hover-bg">
-        <label>@nav-disabled-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-color">
-        <label>@nav-disabled-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-hover-color">
-        <label>@nav-open-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-link-hover-color">
-        <label>@nav-open-caret-border-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-caret-border-color">
-
-        <h4>Pills</h4>
-        <label>@nav-pills-active-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@fff" data-var="@nav-pills-active-link-hover-color">
-        <label>@nav-pills-active-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@nav-pills-active-link-hover-bg">
-      </div>
-      <div class="col-lg-6">
-        <h4>Tabs</h4>
-        <label>@nav-tabs-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-border-color">
-        <label>@nav-tabs-link-hover-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-tabs-link-hover-border-color">
-        <label>@nav-tabs-active-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@gray" data-var="@nav-tabs-active-link-hover-color">
-        <label>@nav-tabs-active-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-active-link-hover-bg">
-        <label>@nav-tabs-active-link-hover-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-active-link-hover-border-color">
-        <label>@nav-tabs-justified-link-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-justified-link-border-color">
-        <label>@nav-tabs-justified-active-link-border-color</label>
-        <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-justified-active-link-border-color">
-      </div>
-    </div>
-
-
-    <h2 id="variables-tables">Tables</h2>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@table-cell-padding</label>
-        <input type="text" class="form-control" placeholder="8px" data-var="@table-cell-padding">
-        <p class="help-block">Default padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s</p>
-        <label>@table-condensed-cell-padding</label>
-        <input type="text" class="form-control" placeholder="5px" data-var="@table-condensed-cell-padding">
-        <p class="help-block">Default padding cells in <code>.table-condensed</code></p>
-      </div>
-      <div class="col-md-4">
-        <label>@table-bg</label>
-        <input type="text" class="form-control" placeholder="transparent" data-var="@table-bg">
-        <p class="help-block">Default background color used for all tables.</p>
-        <label>@table-bg-accent</label>
-        <input type="text" class="form-control" placeholder="#f9f9f9" data-var="@table-bg-accent">
-        <p class="help-block">Background color used for <code>.table-striped</code>.</p>
-      </div>
-      <div class="col-md-4">
-        <label>@table-bg-hover</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@table-bg-hover">
-        <p class="help-block">Background color used for <code>.table-hover</code>.</p>
-        <label>@table-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@table-border-color">
-        <p class="help-block">Border color for table and cell borders.</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-forms">Forms</h2>
-
-    <h3>Inputs</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@input-color</label>
-        <input type="text" class="form-control" placeholder="@gray" data-var="@input-color">
-        <p class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
-        <label>@input-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@input-bg">
-        <p class="help-block"><code>&lt;input&gt;</code> background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-border</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@input-border">
-        <p class="help-block"><code>&lt;input&gt;</code> border color</p>
-        <label>@input-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@input-border-radius">
-        <p class="help-block"><code>&lt;input&gt;</code> border radius</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-color-placeholder</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@input-color-placeholder">
-        <p class="help-block">Placeholder text color</p>
-      </div>
-    </div>
-
-    <h3>Input states</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@input-border-focus</label>
-        <input type="text" class="form-control" placeholder="#66afe9" data-var="@input-border-focus">
-        <p class="help-block">Border color for inputs on focus</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-bg-disabled</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-bg-disabled">
-        <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
-      </div>
-    </div>
-
-    <h3>Input sizes</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@input-height-base</label>
-        <input type="text" class="form-control" placeholder="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base">
-        <p class="help-block">Default <code>.form-control</code> height</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-height-large</label>
-        <input type="text" class="form-control" placeholder="(floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large">
-        <p class="help-block">Large <code>.form-control</code> height</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-height-small</label>
-        <input type="text" class="form-control" placeholder="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small">
-        <p class="help-block">Small <code>.form-control</code> height</p>
-      </div>
-    </div>
-
-    <h3>Legend</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@legend-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@legend-color">
-      </div>
-      <div class="col-md-4">
-        <label>@legend-border-color</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@legend-border-color">
-      </div>
-    </div>
-
-    <h3>Input groups</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@input-group-addon-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-group-addon-bg">
-        <p class="help-block">Background color for textual input addons</p>
-      </div>
-      <div class="col-md-4">
-        <label>@input-group-addon-border-color</label>
-        <input type="text" class="form-control" placeholder="@input-border" data-var="@input-group-addon-border-color">
-        <p class="help-block">Border color for textual input addons</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-dropdowns">Dropdowns</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <h3>Dropdown menu</h3>
-        <label>@dropdown-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-bg">
-        <p class="help-block">Dropdown menu background color</p>
-        <label>@dropdown-border</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)" data-var="@dropdown-border">
-        <p class="help-block">Dropdown menu border color</p>
-        <label>@dropdown-fallback-border</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@dropdown-fallback-border">
-        <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
-        <label>@dropdown-caret-color</label>
-        <input type="text" class="form-control" placeholder="@dropdown-caret-color" data-var="@dropdown-caret-color">
-        <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
-        <label>@dropdown-divider-bg</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@dropdown-divider-bg">
-        <p class="help-block">Dropdown divider top border color</p>
-        <label>@dropdown-header-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-header-color">
-        <p class="help-block">Text color for headers within dropdown menus</p>
-      </div>
-      <div class="col-md-6">
-        <h3>Dropdown items</h3>
-        <label>@dropdown-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@dropdown-link-color">
-        <p class="help-block">Dropdown text color</p>
-
-        <label>@dropdown-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="darken(@dropdown-link-color, 5%)" data-var="@dropdown-link-hover-color">
-        <p class="help-block">Hovered dropdown menu entry text color</p>
-        <label>@dropdown-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
-        <p class="help-block">Hovered dropdown menu entry background color</p>
-
-        <label>@dropdown-link-active-color</label>
-        <input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
-        <p class="help-block">Active dropdown menu entry text color</p>
-        <label>@dropdown-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
-        <p class="help-block">Active dropdown menu entry background color</p>
-
-        <label>@dropdown-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-link-disabled-color">
-        <p class="help-block">Disabled dropdown menu entry background color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-panels-wells">Panels and wells</h2>
-
-    <h3>Common panel styles</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@panel-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
-        <label>@panel-inner-border</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
-        <p class="help-block">Border color for elements within panels</p>
-      </div>
-      <div class="col-md-6">
-        <label>@panel-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
-        <label>@panel-footer-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
-      </div>
-    </div>
-    <h3>Contextual panel colors</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Default</h4>
-        <label>@panel-default-text</label>
-        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@panel-default-text">
-        <label>@panel-default-border</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-default-border">
-        <label>@panel-default-heading-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-default-heading-bg">
-
-        <h4>Primary</h4>
-        <label>@panel-primary-text</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
-        <label>@panel-primary-border</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
-        <label>@panel-primary-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
-
-        <h4>Success</h4>
-        <label>@panel-success-text</label>
-        <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
-        <label>@panel-success-border</label>
-        <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
-        <label>@panel-success-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
-      </div>
-      <div class="col-md-6">
-        <h4>Info</h4>
-        <label>@panel-info-text</label>
-        <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
-        <label>@panel-info-border</label>
-        <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
-        <label>@panel-info-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
-
-        <h4>Warning</h4>
-        <label>@panel-warning-text</label>
-        <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
-        <label>@panel-warning-border</label>
-        <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
-        <label>@panel-warning-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
-
-        <h4>Danger</h4>
-        <label>@panel-danger-text</label>
-        <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
-        <label>@panel-danger-border</label>
-        <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
-        <label>@panel-danger-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
-      </div>
-    </div>
-
-    <h3>Wells</h3>
-    <label>@well-bg</label>
-    <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
-    <label>@well-border</label>
-    <input type="text" class="form-control" placeholder="darken(@well-bg, 7%)" data-var="@well-border">
-
-
-    <h2 id="variables-accordion">Accordion</h2>
-    <label>@accordion-border-bg</label>
-    <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@accordion-border-bg">
-
-
-    <h2 id="variables-badges">Badges</h2>
-
-    <h3>Base styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@badge-font-weight</label>
-        <input type="text" class="form-control" placeholder="bold" data-var="@badge-font-weight">
-        <label>@badge-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@badge-color">
-      </div>
-      <div class="col-md-4">
-        <label>@badge-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@badge-bg">
-      </div>
-      <div class="col-md-4">
-        <label>@badge-border-radius</label>
-        <input type="text" class="form-control" placeholder="10px" data-var="@badge-border-radius">
-      </div>
-    </div>
-
-    <h3>States</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@badge-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@badge-link-hover-color">
-        <p class="help-block">Linked badge text color on hover</p>
-      </div>
-      <div class="col-md-4">
-        <label>@badge-active-color</label>
-        <input type="text" class="form-control" placeholder="@link-color" data-var="@badge-active-color">
-        <p class="help-block">Badge text color in active nav link</p>
-      </div>
-      <div class="col-md-4">
-        <label>@badge-active-bg</label>
-        <input type="text" class="form-control" placeholder="@badge-color" data-var="@badge-active-bg">
-        <p class="help-block">Badge background color in active nav link</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-breadcrumbs">Breadcrumbs</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@breadcrumb-color</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@breadcrumb-color">
-        <p class="help-block">Breadcrumb text color</p>
-        <label>@breadcrumb-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@breadcrumb-bg">
-        <p class="help-block">Breadcrumb background color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@breadcrumb-active-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@breadcrumb-active-color">
-        <p class="help-block">Text color of current page in the breadcrumb</p>
-        <label>@breadcrumb-separator</label>
-        <input type="text" class="form-control" placeholder='"/"' data-var="@breadcrumb-separator">
-        <p class="help-block">Textual separator for between breadcrumb elements</p>
-      </div>
-    </div>
-
-    <h2 id="variables-jumbotron">Jumbotron</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@jumbotron-padding</label>
-        <input type="text" class="form-control" placeholder="30px" data-var="@jumbotron-padding">
-        <label>@jumbotron-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@jumbotron-bg">
-        <label>@jumbotron-font-size</label>
-        <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.5)" data-var="@jumbotron-font-size">
-      </div>
-      <div class="col-md-6">
-        <label>@jumbotron-color</label>
-        <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-color">
-        <label>@jumbotron-heading-color</label>
-        <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-heading-color">
-      </div>
-    </div>
-
-
-    <h2 id="variables-modals">Modals</h2>
-
-    <h3>Base modal</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@modal-inner-padding</label>
-        <input type="text" class="form-control" placeholder="20px" data-var="@modal-inner-padding">
-        <p class="help-block">Padding applied to the modal body</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-backdrop-bg</label>
-        <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
-        <p class="help-block">Modal backdrop background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-backdrop-opacity</label>
-        <input type="text" class="form-control" placeholder=".5" data-var="@modal-backdrop-opacity">
-        <p class="help-block">Modal backdrop opacity</p>
-      </div>
-    </div>
-
-    <h3>Modal header and footer</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@modal-title-padding</label>
-        <input type="text" class="form-control" placeholder="15px" data-var="@modal-title-padding">
-        <p class="help-block">Padding applied to the modal title</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-title-line-height</label>
-        <input type="text" class="form-control" placeholder="@line-height-base" data-var="@modal-title-line-height">
-        <p class="help-block">Modal title line-height</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-header-border-color</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@modal-header-border-color">
-        <p class="help-block">Modal header border color</p>
-        <label>@modal-footer-border-color</label>
-        <input type="text" class="form-control" placeholder="@modal-header-border-color" data-var="@modal-footer-border-color">
-        <p class="help-block">Modal footer border color</p>
-      </div>
-    </div>
-
-    <h3>Modal content</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@modal-content-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@modal-content-bg">
-        <p class="help-block">Background color of modal content area</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-content-border-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@modal-content-border-color">
-        <p class="help-block">Modal content border color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@modal-content-fallback-border-color</label>
-        <input type="text" class="form-control" placeholder="#999" data-var="@modal-content-fallback-border-color">
-        <p class="help-block">Modal content border color <strong>for IE8</strong></p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-carousel">Carousel</h2>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@carousel-text-shadow</label>
-        <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow">
-      </div>
-      <div class="col-md-4">
-        <label>@carousel-control-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-control-color">
-      </div>
-      <div class="col-md-4">
-        <label>@carousel-caption-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-caption-color">
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@carousel-indicator-border-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-border-color">
-      </div>
-      <div class="col-md-4">
-        <label>@carousel-indicator-active-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-active-bg">
-      </div>
-    </div>
-
-
-    <h2 id="variables-list-group">List group</h2>
-
-    <h3>Base styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@list-group-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-bg">
-        <p class="help-block">Background color on <code>.list-group-item</code></p>
-      </div>
-      <div class="col-md-4">
-        <label>@list-group-border</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@list-group-border">
-        <p class="help-block"><code>.list-group-item</code> border color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@list-group-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@list-group-border-radius">
-        <p class="help-block">List group border radius</p>
-      </div>
-    </div>
-
-    <h3>Hover and active states</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@list-group-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@list-group-hover-bg">
-        <p class="help-block">Background color of single list elements on hover</p>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@list-group-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-active-color">
-        <p class="help-block">Text color of active list elements</p>
-      </div>
-      <div class="col-md-4">
-        <label>@list-group-active-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@list-group-active-bg">
-        <p class="help-block">Background color of active list elements</p>
-      </div>
-      <div class="col-md-4">
-        <label>@list-group-active-border</label>
-        <input type="text" class="form-control" placeholder="@list-group-active-bg" data-var="@list-group-active-border">
-        <p class="help-block">Border color of active list elements</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-thumbnails">Thumbnails</h2>
-
-    <h3>Base thumbnail</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@thumbnail-padding</label>
-        <input type="text" class="form-control" placeholder="4px" data-var="@thumbnail-padding">
-        <p class="help-block">Padding around the thumbnail image</p>
-        <label>@thumbnail-bg</label>
-        <input type="text" class="form-control" placeholder="@body-bg" data-var="@thumbnail-bg">
-        <p class="help-block">Thumbnail background color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@thumbnail-border</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@thumbnail-border">
-        <p class="help-block">Thumbnail border color</p>
-        <label>@thumbnail-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@thumbnail-border-radius">
-        <p class="help-block">Thumbnail border radius</p>
-      </div>
-    </div>
-
-    <h3>Thumbnail captions</h3>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@thumbnail-caption-padding</label>
-        <input type="text" class="form-control" placeholder="9px" data-var="@thumbnail-caption-padding">
-        <p class="help-block">Padding around the thumbnail caption</p>
-      </div>
-      <div class="col-md-6">
-        <label>@thumbnail-caption-color</label>
-        <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-color">
-        <p class="help-block">Custom text color for thumbnail captions</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-progress">Progress bars</h2>
-
-    <h3>Shared styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@progress-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@progress-bg">
-        <p class="help-block">Background color of the whole progress component</p>
-      </div>
-      <div class="col-md-4">
-        <label>@progress-bar-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@progress-bar-color">
-        <p class="help-block">Info progress bar text color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@progress-bar-text-shadow</label>
-        <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)" data-var="@progress-bar-text-shadow">
-        <p class="help-block">Info progress bar text shadow</p>
-      </div>
-      <div class="col-md-4">
-        <label>@progress-bar-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@progress-bar-bg">
-        <p class="help-block">Default progress bar color</p>
-      </div>
-    </div>
-
-    <h3>Contextual states</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@progress-bar-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success" data-var="@progress-bar-success-bg">
-        <p class="help-block">Success progress bar color</p>
-        <label>@progress-bar-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info" data-var="@progress-bar-info-bg">
-        <p class="help-block">Info progress bar color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@progress-bar-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@progress-bar-warning-bg">
-        <p class="help-block">Warning progress bar color</p>
-        <label>@progress-bar-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@progress-bar-danger-bg">
-        <p class="help-block">Danger progress bar color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-pagination">Pagination</h2>
-
-    <h3>Default styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@pagination-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-bg">
-        <p class="help-block">Background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@pagination-border</label>
-        <input type="text" class="form-control" placeholder="#ddd" data-var="@pagination-border">
-        <p class="help-block">Border color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@pagination-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@pagination-hover-bg">
-        <p class="help-block">Background hover color</p>
-      </div>
-    </div>
-
-    <h3>Disabled and active states</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@pagination-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@pagination-disabled-color">
-        <p class="help-block">Disabled text color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@pagination-active-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@pagination-active-bg">
-        <p class="help-block">Active background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@pagination-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-active-color">
-        <p class="help-block">Active text color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-pager">Pager</h2>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@pager-border-radius</label>
-        <input type="text" class="form-control" placeholder="15px" data-var="@pager-border-radius">
-        <p class="help-block">Pager border radius</p>
-      </div>
-      <div class="col-md-4">
-        <label>@pager-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@pager-disabled-color">
-        <p class="help-block">Pager disabled state color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-labels">Labels</h2>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@label-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@label-color">
-        <p class="help-block">Default label text color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@label-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@label-link-hover-color">
-        <p class="help-block">Default text color of a linked label</p>
-      </div>
-      <div class="col-md-4">
-        <label>@label-default-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@label-default-bg">
-        <p class="help-block">Default label background color</p>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-4">
-        <label>@label-primary-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@label-primary-bg">
-        <p class="help-block">Primary label background color</p>
-        <label>@label-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success" data-var="@label-success-bg">
-        <p class="help-block">Success label background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@label-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info" data-var="@label-info-bg">
-        <p class="help-block">Info label background color</p>
-        <label>@label-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@label-warning-bg">
-        <p class="help-block">Warning label background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@label-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@label-danger-bg">
-        <p class="help-block">Danger label background color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
-
-    <h3>Tooltip</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@tooltip-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@tooltip-color">
-        <p class="help-block">Tooltip text color</p>
-        <label>@tooltip-bg</label>
-        <input type="text" class="form-control" placeholder="#000" data-var="@tooltip-bg">
-        <p class="help-block">Tooltip background color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@tooltip-arrow-width</label>
-        <input type="text" class="form-control" placeholder="5px" data-var="@tooltip-arrow-width">
-        <p class="help-block">Tooltip arrow width</p>
-        <label>@tooltip-arrow-color</label>
-        <input type="text" class="form-control" placeholder="@tooltip-bg" data-var="@tooltip-arrow-color">
-        <p class="help-block">Tooltip arrow color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@tooltip-max-width</label>
-        <input type="text" class="form-control" placeholder="200px" data-var="@tooltip-max-width">
-        <p class="help-block">Tooltip max width</p>
-      </div>
-    </div>
-
-    <h3>Popovers</h3>
-
-    <h3>Base styles</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@popover-bg</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@popover-bg">
-        <p class="help-block">Popover body background color</p>
-        <label>@popover-max-width</label>
-        <input type="text" class="form-control" placeholder="276px" data-var="@popover-max-width">
-        <p class="help-block">Popover maximum width</p>
-      </div>
-      <div class="col-md-4">
-        <label>@popover-border-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@popover-border-color">
-        <p class="help-block">Popover border color</p>
-        <label>@popover-fallback-border-color</label>
-        <input type="text" class="form-control" placeholder="#ccc" data-var="@popover-fallback-border-color">
-        <p class="help-block">Popover fallback border color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@popover-title-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)" data-var="@popover-title-bg">
-        <p class="help-block">Popover title background color</p>
-      </div>
-    </div>
-
-    <h3>Popover arrows</h3>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@popover-arrow-width</label>
-        <input type="text" class="form-control" placeholder="10px" data-var="@popover-arrow-width">
-        <p class="help-block">Popover arrow width</p>
-      </div>
-      <div class="col-md-4">
-        <label>@popover-arrow-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@popover-arrow-color">
-        <p class="help-block">Popover arrow color</p>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@popover-arrow-outer-width</label>
-        <input type="text" class="form-control" placeholder="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width">
-        <p class="help-block">Popover outer arrow width</p>
-      </div>
-      <div class="col-md-4">
-        <label>@popover-arrow-outer-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color">
-        <p class="help-block">Popover outer arrow color</p>
-      </div>
-      <div class="col-md-4">
-        <label>@popover-arrow-outer-fallback-color</label>
-        <input type="text" class="form-control" placeholder="#999" data-var="@popover-arrow-outer-fallback-color">
-        <p class="help-block">Popover outer arrow fallback color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-close">Close button</h2>
-    <div class="row">
-      <div class="col-md-4">
-        <label>@close-font-weight</label>
-        <input type="text" class="form-control" placeholder="bold" data-var="@close-font-weight">
-      </div>
-      <div class="col-md-4">
-        <label>@close-color</label>
-        <input type="text" class="form-control" placeholder="#000" data-var="@close-color">
-      </div>
-      <div class="col-md-4">
-        <label>@close-text-shadow</label>
-        <input type="text" class="form-control" placeholder="0 1px 0 #fff" data-var="@close-text-shadow">
-      </div>
-    </div>
-
-
-    <h2 id="variables-type">Type</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@text-muted</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@text-muted">
-        <p class="help-block">Text muted color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@abbr-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@abbr-border-color">
-        <p class="help-block">Abbreviations and acronyms border color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@headings-small-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@headings-small-color">
-        <p class="help-block">Headings small color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@blockquote-small-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light" data-var="@blockquote-small-color">
-        <p class="help-block">Blockquote small color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@blockquote-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@blockquote-border-color">
-        <p class="help-block">Blockquote border color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@page-header-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@page-header-border-color">
-        <p class="help-block">Page header border color</p>
-      </div>
-    </div>
-
-
-    <h2 id="variables-other">Other</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <label>@hr-border</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@hr-border">
-        <p class="help-block">Horizontal line color</p>
-      </div>
-      <div class="col-md-6">
-        <label>@component-offset-horizontal</label>
-        <input type="text" class="form-control" placeholder="180px" data-var="@component-offset-horizontal">
-        <p class="help-block">Horizontal offset for forms and lists</p>
-      </div>
-    </div>
+    {% include customizer-variables.html %}
   </div>
 
   <div class="bs-docs-section">

docs/customizer-variables.jade

@@ -0,0 +1,21 @@
+// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.
+each section in sections
+  if section.customizable
+    h2(id=section.id)= section.heading
+    if section.docstring
+      p!= section.docstring.html
+    each subsection in section.subsections
+      if subsection.heading
+        h3(id=subsection.id)= subsection.heading
+      div.row
+        each variable in subsection.variables
+          div.bs-customizer-input
+            label(for="input-" + variable.name)= variable.name
+            input.form-control(
+              id="input-" + variable.name
+              type="text"
+              value=variable.defaultValue
+              data-var=variable.name)
+            if variable.docstring
+              p.help-block!= variable.docstring.html
+// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.

docs/examples/blog/index.html

@@ -53,7 +53,7 @@
 
           <div class="blog-post">
             <h2 class="blog-post-title">Sample blog post</h2>
-            <p class="blog-post-meta">December 1, 2013 by <a href="#">Mark</a></p>
+            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
 
             <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
             <hr>
@@ -86,7 +86,7 @@
 
           <div class="blog-post">
             <h2 class="blog-post-title">Another blog post</h2>
-            <p class="blog-post-meta">November 23, 2013 by <a href="#">Jacob</a></p>
+            <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
 
             <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
             <blockquote>
@@ -98,7 +98,7 @@
 
           <div class="blog-post">
             <h2 class="blog-post-title">New feature</h2>
-            <p class="blog-post-meta">November 14, 2013 by <a href="#">Chris</a></p>
+            <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
 
             <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <ul>
@@ -125,6 +125,7 @@
           <div class="sidebar-module">
             <h4>Archives</h4>
             <ol class="list-unstyled">
+              <li><a href="#">January 2014</a></li>
               <li><a href="#">December 2013</a></li>
               <li><a href="#">November 2013</a></li>
               <li><a href="#">October 2013</a></li>
@@ -136,7 +137,6 @@
               <li><a href="#">April 2013</a></li>
               <li><a href="#">March 2013</a></li>
               <li><a href="#">February 2013</a></li>
-              <li><a href="#">January 2013</a></li>
             </ol>
           </div>
           <div class="sidebar-module">

docs/examples/carousel/index.html

@@ -190,7 +190,7 @@
       <!-- FOOTER -->
       <footer>
         <p class="pull-right"><a href="#">Back to top</a></p>
-        <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+        <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
       </footer>
 
     </div><!-- /.container -->

docs/examples/jumbotron-narrow/index.html

@@ -69,7 +69,7 @@
       </div>
 
       <div class="footer">
-        <p>&copy; Company 2013</p>
+        <p>&copy; Company 2014</p>
       </div>
 
     </div> <!-- /container -->

docs/examples/jumbotron/index.html

@@ -85,7 +85,7 @@
       <hr>
 
       <footer>
-        <p>&copy; Company 2013</p>
+        <p>&copy; Company 2014</p>
       </footer>
     </div> <!-- /container -->
 

docs/examples/justified-nav/index.html

@@ -71,7 +71,7 @@
 
       <!-- Site footer -->
       <div class="footer">
-        <p>&copy; Company 2013</p>
+        <p>&copy; Company 2014</p>
       </div>
 
     </div> <!-- /container -->

docs/examples/offcanvas/index.html

@@ -113,7 +113,7 @@
       <hr>
 
       <footer>
-        <p>&copy; Company 2013</p>
+        <p>&copy; Company 2014</p>
       </footer>
 
     </div><!--/.container-->

docs/getting-started.html

@@ -446,6 +446,10 @@ bootstrap/
             <td><code>.input-large</code></td>
             <td><code>.input-lg</code></td>
           </tr>
+          <tr>
+            <td><code>.input-block-level</code></td>
+            <td><code>.form-control</code></td>
+          </tr>
           <tr>
             <td><code>.control-group</code></td>
             <td><code>.form-group</code></td>
@@ -673,6 +677,11 @@ bootstrap/
             <td><code>.control-group.info</code></td>
             <td class="text-muted">N/A</td>
           </tr>
+          <tr>
+            <td>Block level from input</td>
+            <td><code>.input-block-level</code></td>
+            <td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
+          </tr>
           <tr>
             <td>Fluid container</td>
             <td><code>.container-fluid</code></td>

docs/grunt/bs-glyphicons-data-generator.js

@@ -0,0 +1,27 @@
+/* jshint node: true */
+
+var fs = require('fs')
+
+module.exports = function generateGlyphiconsData() {
+  // Pass encoding, utf8, so `readFileSync` will return a string instead of a
+  // buffer
+  var glyphiconsFile = fs.readFileSync('less/glyphicons.less', 'utf8')
+  var glpyhiconsLines = glyphiconsFile.split('\n')
+
+  // Use any line that starts with ".glyphicon-" and capture the class name
+  var iconClassName = /^\.(glyphicon-[^\s]+)/
+  var glyphiconsData = '# This file is generated via Grunt task. **Do not edit directly.** \n' +
+                       '# See the \'build-glyphicons-data\' task in Gruntfile.js.\n\n';
+  for (var i = 0, len = glpyhiconsLines.length; i < len; i++) {
+    var match = glpyhiconsLines[i].match(iconClassName)
+
+    if (match != null) {
+      glyphiconsData += '- ' + match[1] + '\n'
+    }
+  }
+
+  // Create the `_data` directory if it doesn't already exist
+  if (!fs.existsSync('docs/_data')) fs.mkdirSync('docs/_data')
+
+  fs.writeFileSync('docs/_data/glyphicons.yml', glyphiconsData)
+}

docs/grunt/bs-lessdoc-parser.js

@@ -0,0 +1,228 @@
+/* jshint node: true */
+
+var markdown = require('markdown').markdown;
+
+function markdown2html(markdownString) {
+  // the slice removes the <p>...</p> wrapper output by Markdown processor
+  return markdown.toHTML(markdownString.trim()).slice(3, -4);
+}
+
+
+/*
+Mini-language:
+  //== This is a normal heading, which starts a section. Sections group variables together.
+  //## Optional description for the heading
+
+  //** Optional description for the following variable. You **can** use Markdown in descriptions to discuss `<html>` stuff.
+  @foo: #ffff;
+
+  //-- This is a heading for a section whose variables shouldn't be customizable
+
+  All other lines are ignored completely.
+*/
+
+
+var CUSTOMIZABLE_HEADING = /^[/]{2}={2}(.*)$/;
+var UNCUSTOMIZABLE_HEADING = /^[/]{2}-{2}(.*)$/;
+var SUBSECTION_HEADING = /^[/]{2}={3}(.*)$/;
+var SECTION_DOCSTRING = /^[/]{2}#{2}(.*)$/;
+var VAR_ASSIGNMENT = /^(@[a-zA-Z0-9_-]+):[ ]*([^ ;][^;]+);[ ]*$/;
+var VAR_DOCSTRING = /^[/]{2}[*]{2}(.*)$/;
+
+function Section(heading, customizable) {
+  this.heading = heading.trim();
+  this.id = this.heading.replace(/\s+/g, '-').toLowerCase();
+  this.customizable = customizable;
+  this.docstring = null;
+  this.subsections = [];
+}
+
+Section.prototype.addSubSection = function (subsection) {
+  this.subsections.push(subsection);
+}
+
+function SubSection(heading) {
+  this.heading = heading.trim();
+  this.id = this.heading.replace(/\s+/g, '-').toLowerCase();
+  this.variables = [];
+}
+
+SubSection.prototype.addVar = function (variable) {
+  this.variables.push(variable);
+};
+
+function VarDocstring(markdownString) {
+  this.html = markdown2html(markdownString);
+}
+
+function SectionDocstring(markdownString) {
+  this.html = markdown2html(markdownString);
+}
+
+function Variable(name, defaultValue) {
+  this.name = name;
+  this.defaultValue = defaultValue;
+  this.docstring = null;
+}
+
+function Tokenizer(fileContent) {
+  this._lines = fileContent.split('\n');
+  this._next = undefined;
+}
+
+Tokenizer.prototype.unshift = function (token) {
+  if (this._next !== undefined) {
+    throw new Error('Attempted to unshift twice!');
+  }
+  this._next = token;
+};
+
+Tokenizer.prototype._shift = function () {
+  // returning null signals EOF
+  // returning undefined means the line was ignored
+  if (this._next !== undefined) {
+    var result = this._next;
+    this._next = undefined;
+    return result;
+  }
+  if (this._lines.length <= 0) {
+    return null;
+  }
+  var line = this._lines.shift();
+  var match = null;
+  match = SUBSECTION_HEADING.exec(line);
+  if (match !== null) {
+    return new SubSection(match[1]);
+  }
+  match = CUSTOMIZABLE_HEADING.exec(line);
+  if (match !== null) {
+    return new Section(match[1], true);
+  }
+  match = UNCUSTOMIZABLE_HEADING.exec(line);
+  if (match !== null) {
+    return new Section(match[1], false);
+  }
+  match = SECTION_DOCSTRING.exec(line);
+  if (match !== null) {
+    return new SectionDocstring(match[1]);
+  }
+  match = VAR_DOCSTRING.exec(line);
+  if (match !== null) {
+    return new VarDocstring(match[1]);
+  }
+  var commentStart = line.lastIndexOf('//');
+  var varLine = (commentStart === -1) ? line : line.slice(0, commentStart);
+  match = VAR_ASSIGNMENT.exec(varLine);
+  if (match !== null) {
+    return new Variable(match[1], match[2]);
+  }
+  return undefined;
+};
+
+Tokenizer.prototype.shift = function () {
+  while (true) {
+    var result = this._shift();
+    if (result === undefined) {
+      continue;
+    }
+    return result;
+  }
+};
+
+function Parser(fileContent) {
+  this._tokenizer = new Tokenizer(fileContent);
+}
+
+Parser.prototype.parseFile = function () {
+  var sections = [];
+  while (true) {
+    var section = this.parseSection();
+    if (section === null) {
+      if (this._tokenizer.shift() !== null) {
+        throw new Error('Unexpected unparsed section of file remains!');
+      }
+      return sections;
+    }
+    sections.push(section);
+  }
+};
+
+Parser.prototype.parseSection = function () {
+  var section = this._tokenizer.shift();
+  if (section === null) {
+    return null;
+  }
+  if (!(section instanceof Section)) {
+    throw new Error('Expected section heading; got: ' + JSON.stringify(section));
+  }
+  var docstring = this._tokenizer.shift();
+  if (docstring instanceof SectionDocstring) {
+    section.docstring = docstring;
+  }
+  else {
+    this._tokenizer.unshift(docstring);
+  }
+  this.parseSubSections(section);
+
+  return section;
+};
+
+Parser.prototype.parseSubSections = function (section) {
+  while (true) {
+    var subsection = this.parseSubSection();
+    if (subsection === null) {
+      if (section.subsections.length === 0) {
+        // Presume an implicit initial subsection
+        subsection = new SubSection('');
+        this.parseVars(subsection);
+      }
+      else {
+        break;
+      }
+    }
+    section.addSubSection(subsection);
+  }
+
+  if (section.subsections.length === 1 && !(section.subsections[0].heading) && section.subsections[0].variables.length === 0) {
+    // Ignore lone empty implicit subsection
+    section.subsections = [];
+  }
+};
+
+Parser.prototype.parseSubSection = function () {
+  var subsection = this._tokenizer.shift();
+  if (subsection instanceof SubSection) {
+    this.parseVars(subsection);
+    return subsection;
+  }
+  this._tokenizer.unshift(subsection);
+  return null;
+};
+
+Parser.prototype.parseVars = function (subsection) {
+  while (true) {
+    var variable = this.parseVar();
+    if (variable === null) {
+      return;
+    }
+    subsection.addVar(variable);
+  }
+};
+
+Parser.prototype.parseVar = function () {
+  var docstring = this._tokenizer.shift();
+  if (!(docstring instanceof VarDocstring)) {
+    this._tokenizer.unshift(docstring);
+    docstring = null;
+  }
+  var variable = this._tokenizer.shift();
+  if (variable instanceof Variable) {
+    variable.docstring = docstring;
+    return variable;
+  }
+  this._tokenizer.unshift(variable);
+  return null;
+};
+
+
+module.exports = Parser;

docs/grunt/bs-raw-files-generator.js

@@ -0,0 +1,22 @@
+/* jshint node: true */
+
+var btoa = require('btoa') // jshint ignore:line
+var fs = require('fs')
+
+function getFiles(type) {
+  var files = {}
+  fs.readdirSync(type)
+    .filter(function (path) {
+      return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
+    })
+    .forEach(function (path) {
+      var fullPath = type + '/' + path
+      return files[path] = (type == 'fonts' ? btoa(fs.readFileSync(fullPath)) : fs.readFileSync(fullPath, 'utf8'))
+    })
+  return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
+}
+
+module.exports = function generateRawFilesJs() {
+  var files = getFiles('js') + getFiles('less') + getFiles('fonts')
+  fs.writeFileSync('docs/assets/js/raw-files.js', files)
+}

js/.jscs.json

@@ -3,7 +3,7 @@
   "requireLeftStickedOperators": [","],
   "disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
   "disallowRightStickedOperators": ["?", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
-  "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
+  "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~"],
   "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
   "requireLineFeedAtFileEnd": true,
   "requireRightStickedOperators": ["!"],

js/affix.js

@@ -2,12 +2,13 @@
  * Bootstrap: affix.js v3.0.3
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // AFFIX CLASS DEFINITION
   // ======================

js/alert.js

@@ -2,12 +2,13 @@
  * Bootstrap: alert.js v3.0.3
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // ALERT CLASS DEFINITION
   // ======================

js/button.js

@@ -2,12 +2,13 @@
  * Bootstrap: button.js v3.0.3
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // BUTTON PUBLIC CLASS DEFINITION
   // ==============================

js/carousel.js

@@ -2,12 +2,13 @@
  * Bootstrap: carousel.js v3.0.3
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // CAROUSEL CLASS DEFINITION
   // =========================

js/collapse.js

@@ -2,12 +2,13 @@
  * Bootstrap: collapse.js v3.0.3
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // COLLAPSE PUBLIC CLASS DEFINITION
   // ================================

js/dropdown.js

@@ -2,12 +2,13 @@
  * Bootstrap: dropdown.js v3.0.3
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // DROPDOWN CLASS DEFINITION
   // =========================

js/modal.js

@@ -2,12 +2,13 @@
  * Bootstrap: modal.js v3.0.3
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // MODAL CLASS DEFINITION
   // ======================

js/popover.js

@@ -2,12 +2,13 @@
  * Bootstrap: popover.js v3.0.3
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // POPOVER PUBLIC CLASS DEFINITION
   // ===============================

js/scrollspy.js

@@ -2,12 +2,13 @@
  * Bootstrap: scrollspy.js v3.0.3
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // SCROLLSPY CLASS DEFINITION
   // ==========================

js/tab.js

@@ -2,12 +2,13 @@
  * Bootstrap: tab.js v3.0.3
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // TAB CLASS DEFINITION
   // ====================

js/tooltip.js

@@ -3,12 +3,13 @@
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // TOOLTIP PUBLIC CLASS DEFINITION
   // ===============================

js/transition.js

@@ -2,12 +2,13 @@
  * Bootstrap: transition.js v3.0.3
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
- * Copyright 2014 Twitter, Inc.
+ * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */
 
 
-+function ($) { 'use strict';
++function ($) {
+  'use strict';
 
   // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
   // ============================================================

less/.csslintrc

@@ -11,6 +11,7 @@
   "outline-none": false,
   "qualified-headings": false,
   "regex-selectors": false,
+  "shorthand": false,
   "text-indent": false,
   "unique-headings": false,
   "universal-selector": false,

less/buttons.less

@@ -60,6 +60,10 @@
 .btn-success {
   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
+// Info appears as blue-green
+.btn-info {
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+}
 // Warning appears as orange
 .btn-warning {
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
@@ -68,10 +72,6 @@
 .btn-danger {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
-// Info appears as blue-green
-.btn-info {
-  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
-}
 
 
 // Link buttons

less/forms.less

@@ -52,6 +52,12 @@ input[type="file"] {
   display: block;
 }
 
+// Make range inputs behave like textual form controls
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
+
 // Make multiple select elements height not fixed
 select[multiple],
 select[size] {
@@ -276,15 +282,15 @@ input[type="checkbox"],
 }
 
 // Feedback states
+.has-success {
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
 .has-warning {
   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
-.has-success {
-  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
-}
 
 
 // Static form control text

less/glyphicons.less

@@ -14,7 +14,7 @@
   src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')",
        ~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')",
        ~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')",
-       ~"url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg')";
+       ~"url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg')";
 }
 
 // Catchall baseclass

less/list-group.less

@@ -91,9 +91,9 @@ a.list-group-item {
 // Organizationally, this must come after the `:hover` states.
 
 .list-group-item-variant(success; @state-success-bg; @state-success-text);
+.list-group-item-variant(info; @state-info-bg; @state-info-text);
 .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
 .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
-.list-group-item-variant(info; @state-info-bg; @state-info-text);
 
 
 // Custom content options

less/mixins.less

@@ -851,7 +851,7 @@
     border-color: @border-color;
     background-color: @background-color;
   }
-  // Optional feedack icon
+  // Optional feedback icon
   .form-control-feedback {
     color: @text-color;
   }

less/panels.less

@@ -59,7 +59,7 @@
   > .table,
   > .table-responsive > .table {
     margin-bottom: 0;
-    
+
     > tbody:last-child,
     > tfoot:last-child {
       > tr:last-child {
@@ -185,12 +185,12 @@
 .panel-success {
   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 }
+.panel-info {
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+}
 .panel-warning {
   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 }
 .panel-danger {
   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 }
-.panel-info {
-  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
-}

less/tables.less

@@ -157,9 +157,9 @@ table {
 // Generate the contextual variants
 .table-row-variant(active; @table-bg-active);
 .table-row-variant(success; @state-success-bg);
+.table-row-variant(info; @state-info-bg);
 .table-row-variant(warning; @state-warning-bg);
 .table-row-variant(danger; @state-danger-bg);
-.table-row-variant(info; @state-info-bg);
 
 
 // Responsive tables

less/theme.less

@@ -63,9 +63,9 @@
 .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
 .btn-primary { .btn-styles(@btn-primary-bg); }
 .btn-success { .btn-styles(@btn-success-bg); }
+.btn-info    { .btn-styles(@btn-info-bg); }
 .btn-warning { .btn-styles(@btn-warning-bg); }
 .btn-danger  { .btn-styles(@btn-danger-bg); }
-.btn-info    { .btn-styles(@btn-info-bg); }
 
 
 

less/type.less

@@ -97,18 +97,6 @@ cite    { font-style: normal; }
     color: darken(@brand-primary, 10%);
   }
 }
-.text-warning {
-  color: @state-warning-text;
-  &:hover {
-    color: darken(@state-warning-text, 10%);
-  }
-}
-.text-danger {
-  color: @state-danger-text;
-  &:hover {
-    color: darken(@state-danger-text, 10%);
-  }
-}
 .text-success {
   color: @state-success-text;
   &:hover {
@@ -121,6 +109,18 @@ cite    { font-style: normal; }
     color: darken(@state-info-text, 10%);
   }
 }
+.text-warning {
+  color: @state-warning-text;
+  &:hover {
+    color: darken(@state-warning-text, 10%);
+  }
+}
+.text-danger {
+  color: @state-danger-text;
+  &:hover {
+    color: darken(@state-danger-text, 10%);
+  }
+}
 
 // Contextual backgrounds
 // For now we'll leave these alongside the text classes until v4 when we can
@@ -134,18 +134,6 @@ cite    { font-style: normal; }
     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 {
@@ -158,6 +146,18 @@ cite    { font-style: normal; }
     background-color: darken(@state-info-bg, 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%);
+  }
+}
 
 
 // Page header

less/variables.less

@@ -3,11 +3,9 @@
 // --------------------------------------------------
 
 
-// Global values
-// --------------------------------------------------
-
-// Grays
-// -------------------------
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
 
 @gray-darker:            lighten(#000, 13.5%); // #222
 @gray-dark:              lighten(#000, 20%);   // #333
@@ -15,32 +13,35 @@
 @gray-light:             lighten(#000, 60%);   // #999
 @gray-lighter:           lighten(#000, 93.5%); // #eee
 
-// Brand colors
-// -------------------------
-
 @brand-primary:         #428bca;
 @brand-success:         #5cb85c;
+@brand-info:            #5bc0de;
 @brand-warning:         #f0ad4e;
 @brand-danger:          #d9534f;
-@brand-info:            #5bc0de;
 
-// Scaffolding
-// -------------------------
 
+//== Scaffolding
+//
+// ## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
 @body-bg:               #fff;
+//** Global text color on `<body>`.
 @text-color:            @gray-dark;
 
-// Links
-// -------------------------
-
+//** Global textual link color.
 @link-color:            @brand-primary;
+//** Link hover color set via `darken()` function.
 @link-hover-color:      darken(@link-color, 15%);
 
-// Typography
-// -------------------------
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
 
 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
@@ -55,67 +56,84 @@
 @font-size-h5:            @font-size-base;
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
+//** Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` &times; `line-height`) for use with `margin`, `padding`, etc.
 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
+//** By default, this inherits from the `<body>`.
 @headings-font-family:    inherit;
 @headings-font-weight:    500;
 @headings-line-height:    1.1;
 @headings-color:          inherit;
 
 
-// Iconography
-// -------------------------
+//-- Iconography
+//
+//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
 @icon-font-path:          "../fonts/";
 @icon-font-name:          "glyphicons-halflings-regular";
+@icon-font-svg-id:				"glyphicons_halflingsregular";
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
+
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.33;
+@line-height-small:         1.5;
+
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
 
 
-// Components
-// -------------------------
-// Based on 14px font-size and 1.428 line-height (~20px to start)
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
 
-@padding-base-vertical:          6px;
-@padding-base-horizontal:        12px;
+//** Padding for `<th>`s and `<td>`s.
+@table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding:  5px;
 
-@padding-large-vertical:         10px;
-@padding-large-horizontal:       16px;
+//** Default background color used for all tables.
+@table-bg:                      transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent:               #f9f9f9;
+//** Background color used for `.table-hover`.
+@table-bg-hover:                #f5f5f5;
+@table-bg-active:               @table-bg-hover;
 
-@padding-small-vertical:         5px;
-@padding-small-horizontal:       10px;
-
-@padding-xs-vertical:            1px;
-@padding-xs-horizontal:          5px;
-
-@line-height-large:              1.33;
-@line-height-small:              1.5;
-
-@border-radius-base:             4px;
-@border-radius-large:            6px;
-@border-radius-small:            3px;
-
-@component-active-color:         #fff;
-@component-active-bg:            @brand-primary;
-
-@caret-width-base:               4px;
-@caret-width-large:              5px;
-
-// Tables
-// -------------------------
-
-@table-cell-padding:                 8px;
-@table-condensed-cell-padding:       5px;
-
-@table-bg:                           transparent; // overall background-color
-@table-bg-accent:                    #f9f9f9; // for striping
-@table-bg-hover:                     #f5f5f5;
-@table-bg-active:                    @table-bg-hover;
-
-@table-border-color:                 #ddd; // table and cell border
+//** Border color for table and cell borders.
+@table-border-color:            #ddd;
 
 
-// Buttons
-// -------------------------
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
 
 @btn-font-weight:                normal;
 
@@ -131,6 +149,10 @@
 @btn-success-bg:                 @brand-success;
 @btn-success-border:             darken(@btn-success-bg, 5%);
 
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
 @btn-warning-color:              #fff;
 @btn-warning-bg:                 @brand-warning;
 @btn-warning-border:             darken(@btn-warning-bg, 5%);
@@ -139,68 +161,87 @@
 @btn-danger-bg:                  @brand-danger;
 @btn-danger-border:              darken(@btn-danger-bg, 5%);
 
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 5%);
-
 @btn-link-disabled-color:        @gray-light;
 
 
-// Forms
-// -------------------------
+//== Forms
+//
+//##
 
+//** `<input>` background color
 @input-bg:                       #fff;
+//** `<input disabled>` background color
 @input-bg-disabled:              @gray-lighter;
 
+//** Text color for `<input>`s
 @input-color:                    @gray;
+//** `<input>` border color
 @input-border:                   #ccc;
+//** `<input>` border radius
 @input-border-radius:            @border-radius-base;
+//** Border color for inputs on focus
 @input-border-focus:             #66afe9;
 
+//** Placeholder text color
 @input-color-placeholder:        @gray-light;
 
+//** Default `.form-control` height
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
 @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
 @legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
 
+//** Background color for textual input addons
 @input-group-addon-bg:           @gray-lighter;
+//** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
 
 
-// Dropdowns
-// -------------------------
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
 
+//** Background for the dropdown menu.
 @dropdown-bg:                    #fff;
+//** Dropdown menu `border-color`.
 @dropdown-border:                rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
 @dropdown-fallback-border:       #ccc;
+//** Divider color for between dropdown items.
 @dropdown-divider-bg:            #e5e5e5;
 
+//** Dropdown link text color.
 @dropdown-link-color:            @gray-dark;
+//** Hover color for dropdown links.
 @dropdown-link-hover-color:      darken(@gray-dark, 5%);
+//** Hover background for dropdown links.
 @dropdown-link-hover-bg:         #f5f5f5;
 
+//** Active dropdown menu item text color.
 @dropdown-link-active-color:     @component-active-color;
+//** Active dropdown menu item background color.
 @dropdown-link-active-bg:        @component-active-bg;
 
+//** Disabled dropdown menu item background color.
 @dropdown-link-disabled-color:   @gray-light;
 
+//** Text color for headers within dropdown menus.
 @dropdown-header-color:          @gray-light;
 
 // Note: Deprecated @dropdown-caret-color as of v3.1
 @dropdown-caret-color:           #000;
 
 
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
+//-- 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.
+//
+// Note: These variables are not generated into the Customizer.
 
 @zindex-navbar:            1000;
 @zindex-dropdown:          1000;
@@ -210,8 +251,10 @@
 @zindex-modal-background:  1040;
 @zindex-modal:             1050;
 
-// Media queries breakpoints
-// --------------------------------------------------
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
 // Extra small screen / phone
 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@@ -243,24 +286,24 @@
 @screen-md-max:              (@screen-lg-min - 1);
 
 
-// Grid system
-// --------------------------------------------------
+//== Grid system
+//
+//## Define your custom responsive grid.
 
-// Number of columns in the grid system
+//** Number of columns in the grid.
 @grid-columns:              12;
-// Padding, to be divided by two and applied to the left and right of all columns
+//** Padding between columns. Gets divided in half for the left and right.
 @grid-gutter-width:         30px;
-
 // Navbar collapse
-
-// Point at which the navbar becomes uncollapsed
+//** Point at which the navbar becomes uncollapsed.
 @grid-float-breakpoint:     @screen-sm-min;
-// Point at which the navbar begins collapsing
+//** Point at which the navbar begins collapsing.
 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 
 
-// Navbar
-// -------------------------
+//== Navbar
+//
+//##
 
 // Basics of a navbar
 @navbar-height:                    50px;
@@ -294,7 +337,6 @@
 
 
 // Inverted navbar
-//
 // Reset inverted navbar basics
 @navbar-inverse-color:                      @gray-light;
 @navbar-inverse-bg:                         #222;
@@ -320,9 +362,11 @@
 @navbar-inverse-toggle-border-color:        #333;
 
 
-// Navs
-// -------------------------
+//== Navs
+//
+//##
 
+//=== Shared nav styles
 @nav-link-padding:                          10px 15px;
 @nav-link-hover-bg:                         @gray-lighter;
 
@@ -331,7 +375,7 @@
 
 @nav-open-link-hover-color:                 #fff;
 
-// Tabs
+//== Tabs
 @nav-tabs-border-color:                     #ddd;
 
 @nav-tabs-link-hover-border-color:          @gray-lighter;
@@ -343,14 +387,15 @@
 @nav-tabs-justified-link-border-color:            #ddd;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
-// Pills
+//== Pills
 @nav-pills-border-radius:                   @border-radius-base;
 @nav-pills-active-link-hover-bg:            @component-active-bg;
 @nav-pills-active-link-hover-color:         @component-active-color;
 
 
-// Pagination
-// -------------------------
+//== Pagination
+//
+//##
 
 @pagination-color:                     @link-color;
 @pagination-bg:                        #fff;
@@ -369,8 +414,9 @@
 @pagination-disabled-border:           #ddd;
 
 
-// Pager
-// -------------------------
+//== Pager
+//
+//##
 
 @pager-bg:                             @pagination-bg;
 @pager-border:                         @pagination-border;
@@ -384,8 +430,9 @@
 @pager-disabled-color:                 @pagination-disabled-color;
 
 
-// Jumbotron
-// -------------------------
+//== Jumbotron
+//
+//##
 
 @jumbotron-padding:              30px;
 @jumbotron-color:                inherit;
@@ -394,8 +441,9 @@
 @jumbotron-font-size:            ceil((@font-size-base * 1.5));
 
 
-// Form states and alerts
-// -------------------------
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
 
 @state-success-text:             #3c763d;
 @state-success-bg:               #dff0d8;
@@ -414,70 +462,112 @@
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
 
 
-// Tooltips
-// -------------------------
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
 @tooltip-max-width:           200px;
+//** Tooltip text color
 @tooltip-color:               #fff;
+//** Tooltip background color
 @tooltip-bg:                  #000;
 @tooltip-opacity:             .9;
 
+//** Tooltip arrow width
 @tooltip-arrow-width:         5px;
+//** Tooltip arrow color
 @tooltip-arrow-color:         @tooltip-bg;
 
 
-// Popovers
-// -------------------------
+//== Popovers
+//
+//##
+
+//** Popover body background color
 @popover-bg:                          #fff;
+//** Popover maximum width
 @popover-max-width:                   276px;
+//** Popover border color
 @popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
 @popover-fallback-border-color:       #ccc;
 
+//** Popover title background color
 @popover-title-bg:                    darken(@popover-bg, 3%);
 
+//** Popover arrow width
 @popover-arrow-width:                 10px;
+//** Popover arrow color
 @popover-arrow-color:                 #fff;
 
+//** Popover outer arrow width
 @popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
 @popover-arrow-outer-color:           rgba(0,0,0,.25);
+//** Popover outer arrow fallback color
 @popover-arrow-outer-fallback-color:  #999;
 
 
-// Labels
-// -------------------------
+//== Labels
+//
+//##
 
+//** Default label background color
 @label-default-bg:            @gray-light;
+//** Primary label background color
 @label-primary-bg:            @brand-primary;
+//** Success label background color
 @label-success-bg:            @brand-success;
+//** Info label background color
 @label-info-bg:               @brand-info;
+//** Warning label background color
 @label-warning-bg:            @brand-warning;
+//** Danger label background color
 @label-danger-bg:             @brand-danger;
 
+//** Default label text color
 @label-color:                 #fff;
+//** Default text color of a linked label
 @label-link-hover-color:      #fff;
 
 
-// Modals
-// -------------------------
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
 @modal-inner-padding:         20px;
 
+//** Padding applied to the modal title
 @modal-title-padding:         15px;
+//** Modal title line-height
 @modal-title-line-height:     @line-height-base;
 
+//** Background color of modal content area
 @modal-content-bg:                             #fff;
+//** Modal content border color
 @modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color <strong>for IE8</strong>
 @modal-content-fallback-border-color:          #999;
 
+//** Modal backdrop background color
 @modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
 @modal-backdrop-opacity:      .5;
+//** Modal header border color
 @modal-header-border-color:   #e5e5e5;
+//** Modal footer border color
 @modal-footer-border-color:   @modal-header-border-color;
 
 @modal-lg:                    900px;
 @modal-sm:                    300px;
 
 
-// Alerts
-// -------------------------
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
 @alert-padding:               15px;
 @alert-border-radius:         @border-radius-base;
 @alert-link-font-weight:      bold;
@@ -499,39 +589,61 @@
 @alert-danger-border:         @state-danger-border;
 
 
-// Progress bars
-// -------------------------
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
 @progress-bg:                 #f5f5f5;
+//** Progress bar text color
 @progress-bar-color:          #fff;
 
+//** Default progress bar color
 @progress-bar-bg:             @brand-primary;
+//** Success progress bar color
 @progress-bar-success-bg:     @brand-success;
+//** Warning progress bar color
 @progress-bar-warning-bg:     @brand-warning;
+//** Danger progress bar color
 @progress-bar-danger-bg:      @brand-danger;
+//** Info progress bar color
 @progress-bar-info-bg:        @brand-info;
 
 
-// List group
-// -------------------------
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
 @list-group-bg:                 #fff;
+//** `.list-group-item` border color
 @list-group-border:             #ddd;
+//** List group border radius
 @list-group-border-radius:      @border-radius-base;
 
+//** Background color of single list elements on hover
 @list-group-hover-bg:           #f5f5f5;
+//** Text color of active list elements
 @list-group-active-color:       @component-active-color;
+//** Background color of active list elements
 @list-group-active-bg:          @component-active-bg;
+//** Border color of active list elements
 @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
-// -------------------------
+
+//== Panels
+//
+//##
+
 @panel-bg:                    #fff;
 @panel-body-padding:          15px;
 @panel-border-radius:         @border-radius-base;
 
+//** Border color for elements within panels
 @panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
@@ -547,6 +659,10 @@
 @panel-success-border:        @state-success-border;
 @panel-success-heading-bg:    @state-success-bg;
 
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
 @panel-warning-text:          @state-warning-text;
 @panel-warning-border:        @state-warning-border;
 @panel-warning-heading-bg:    @state-warning-bg;
@@ -555,35 +671,46 @@
 @panel-danger-border:         @state-danger-border;
 @panel-danger-heading-bg:     @state-danger-bg;
 
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
 
+//== Thumbnails
+//
+//##
 
-// Thumbnails
-// -------------------------
+//** Padding around the thumbnail image
 @thumbnail-padding:           4px;
+//** Thumbnail background color
 @thumbnail-bg:                @body-bg;
+//** Thumbnail border color
 @thumbnail-border:            #ddd;
+//** Thumbnail border radius
 @thumbnail-border-radius:     @border-radius-base;
 
+//** Custom text color for thumbnail captions
 @thumbnail-caption-color:     @text-color;
+//** Padding around the thumbnail caption
 @thumbnail-caption-padding:   9px;
 
 
-// Wells
-// -------------------------
+//== Wells
+//
+//##
+
 @well-bg:                     #f5f5f5;
 @well-border:                 darken(@well-bg, 7%);
 
 
-// Badges
-// -------------------------
+//== Badges
+//
+//##
+
 @badge-color:                 #fff;
+//** Linked badge text color on hover
 @badge-link-hover-color:      #fff;
 @badge-bg:                    @gray-light;
 
+//** Badge text color in active nav link
 @badge-active-color:          @link-color;
+//** Badge background color in active nav link
 @badge-active-bg:             #fff;
 
 @badge-font-weight:           bold;
@@ -591,18 +718,25 @@
 @badge-border-radius:         10px;
 
 
-// Breadcrumbs
-// -------------------------
+//== Breadcrumbs
+//
+//##
+
 @breadcrumb-padding-vertical:   8px;
 @breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
 @breadcrumb-bg:                 #f5f5f5;
+//** Breadcrumb text color
 @breadcrumb-color:              #ccc;
+//** Text color of current page in the breadcrumb
 @breadcrumb-active-color:       @gray-light;
+//** Textual separator for between breadcrumb elements
 @breadcrumb-separator:          "/";
 
 
-// Carousel
-// ------------------------
+//== Carousel
+//
+//##
 
 @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
 
@@ -617,15 +751,19 @@
 @carousel-caption-color:                      #fff;
 
 
-// Close
-// ------------------------
+//== Close
+//
+//##
+
 @close-font-weight:           bold;
 @close-color:                 #000;
 @close-text-shadow:           0 1px 0 #fff;
 
 
-// Code
-// ------------------------
+//== Code
+//
+//##
+
 @code-color:                  #c7254e;
 @code-bg:                     #f9f2f4;
 
@@ -637,36 +775,51 @@
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
-// Type
-// ------------------------
+
+//== Type
+//
+//##
+
+//** Text muted color
 @text-muted:                  @gray-light;
+//** Abbreviations and acronyms border color
 @abbr-border-color:           @gray-light;
+//** Headings small color
 @headings-small-color:        @gray-light;
+//** Blockquote small color
 @blockquote-small-color:      @gray-light;
+//** Blockquote border color
 @blockquote-border-color:     @gray-lighter;
+//** Page header border color
 @page-header-border-color:    @gray-lighter;
 
-// Miscellaneous
-// -------------------------
 
-// Hr border color
+//== Miscellaneous
+//
+//##
+
+//** Horizontal line color.
 @hr-border:                   @gray-lighter;
 
-// Horizontal forms & lists
+//** Horizontal offset for forms and lists.
 @component-offset-horizontal: 180px;
 
 
-// Container sizes
-// --------------------------------------------------
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / tablet
 @container-tablet:             ((720px + @grid-gutter-width));
+//** For `@screen-sm-min` and up.
 @container-sm:                 @container-tablet;
 
 // Medium screen / desktop
 @container-desktop:            ((940px + @grid-gutter-width));
+//** For `@screen-md-min` and up.
 @container-md:                 @container-desktop;
 
 // Large screen / wide desktop
 @container-large-desktop:      ((1140px + @grid-gutter-width));
+//** For `@screen-lg-min` and up.
 @container-lg:                 @container-large-desktop;

package.json

@@ -33,8 +33,9 @@
     "grunt-contrib-connect": "~0.6.0",
     "grunt-contrib-copy": "~0.5.0",
     "grunt-contrib-csslint": "~0.2.0",
+    "grunt-contrib-jade": "~0.9.1",
     "grunt-contrib-jshint": "~0.8.0",
-    "grunt-contrib-less": "~0.8.3",
+    "grunt-contrib-less": "~0.9.0",
     "grunt-contrib-qunit": "~0.3.0",
     "grunt-contrib-uglify": "~0.2.7",
     "grunt-contrib-watch": "~0.5.3",
@@ -44,7 +45,8 @@
     "grunt-jscs-checker": "~0.3.0",
     "grunt-saucelabs": "~4.1.2",
     "grunt-sed": "~0.1.1",
-    "load-grunt-tasks": "~0.2.1"
+    "load-grunt-tasks": "~0.2.1",
+    "markdown": "~0.5.0"
   },
   "jspm": {
     "main": "js/bootstrap",