Merge branch 'master' into fix-12154

Conflicts:
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css

.editorconfig

@@ -11,5 +11,4 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.py]
-indent_style = space
 indent_size = 4

.travis.yml

@@ -7,10 +7,10 @@ before_install:
   - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $(rvm gemdir)) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
 install:
   - time npm install -g grunt-cli
-  - time ./test-infra/s3_cache.py download 'node.js packages' package.json ./node_modules || time npm install
+  - time ./test-infra/s3_cache.py download 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules || time ./test-infra/uncached-npm-install.sh
   - if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py download rubygems pseudo_Gemfile.lock $(rvm gemdir) || gem install -N jekyll -v $JEKYLL_VERSION; fi
 after_script:
-  - if [ "$TWBS_TEST" = core ]; then time ./test-infra/s3_cache.py upload 'node.js packages' package.json ./node_modules; fi
+  - if [ "$TWBS_TEST" = core ]; then time ./test-infra/s3_cache.py upload 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules; fi
   - if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py upload rubygems pseudo_Gemfile.lock $(rvm gemdir); fi
 env:
   global:
@@ -20,9 +20,12 @@ env:
     - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
     - secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
     - secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
+    - secure: "Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w="
+    - secure: "Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew="
   matrix:
     - TWBS_TEST=core
     - TWBS_TEST=validate-html
     - TWBS_TEST=sauce-js-unit
+#    - TWBS_TEST=browserstack-js-unit
 matrix:
   fast_finish: true

CONTRIBUTING.md

@@ -19,7 +19,7 @@ and [submitting pull requests](#pull-requests), but please respect the following
 restrictions:
 
 * Please **do not** use the issue tracker for personal support requests.  Stack
-  Overflow ([`twitter-boostrap`](http://stackoverflow.com/questions/tagged/twitter-bootstrap) tag) or [IRC](https://github.com/twbs/bootstrap/blob/master/README.md#community) are better places to get help.
+  Overflow ([`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag) or [IRC](https://github.com/twbs/bootstrap/blob/master/README.md#community) are better places to get help.
 
 * Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.
@@ -159,6 +159,7 @@ license your work under the terms of the [MIT License](LICENSE.md).
 - 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://`.
+- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
 
 ### CSS
 
@@ -172,15 +173,20 @@ license your work under the terms of the [MIT License](LICENSE.md).
 - 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`).
 - Avoid inheritance and over nesting—use single, explicit classes whenever possible.
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
 
 ### JS
 
 - No semicolons
-- Comma first
 - 2 spaces (no tabs)
 - strict mode
 - "Attractive"
 
+### Checking coding style
+
+Run `grunt test` before committing to ensure your changes follow our coding standards.
+
 
 ## License
 

Gruntfile.js

@@ -1,4 +1,9 @@
-/* jshint node: true */
+/*!
+ * Bootstrap's Gruntfile
+ * http://getbootstrap.com
+ * Copyright 2013-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
 
 module.exports = function (grunt) {
   'use strict';
@@ -7,14 +12,15 @@ module.exports = function (grunt) {
   grunt.util.linefeed = '\n';
 
   RegExp.quote = function (string) {
-    return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+    return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-  }
+  };
 
-  var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js')
+  var fs = require('fs');
-  var fs = require('fs')
+  var path = require('path');
-  var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js')
+  var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js');
-  var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js')
+  var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
-  var path = require('path')
+  var generateRawFilesJs = require('./grunt/bs-raw-files-generator.js');
+  var updateShrinkwrap = require('./grunt/shrinkwrap.js');
 
   // Project configuration.
   grunt.initConfig({
@@ -24,39 +30,33 @@ module.exports = function (grunt) {
     banner: '/*!\n' +
             ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
             ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
-              ' * Licensed under <%= _.pluck(pkg.licenses, "type") %> (<%= _.pluck(pkg.licenses, "url") %>)\n' +
+            ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
             ' */\n',
-    bannerDocs: '/*!\n' +
+    jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\') }\n\n',
-              ' * Bootstrap Docs (<%= pkg.homepage %>)\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',
-    jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap requires jQuery\') }\n\n',
 
     // Task configuration.
     clean: {
-      dist: ['dist']
+      dist: ['dist', 'docs/dist']
     },
 
     jshint: {
       options: {
         jshintrc: 'js/.jshintrc'
       },
-      gruntfile: {
+      grunt: {
-        src: 'Gruntfile.js'
+        options: {
+          node: true
+        },
+        src: ['Gruntfile.js', 'grunt/*.js']
       },
       src: {
-        src: ['js/*.js']
+        src: 'js/*.js'
       },
       test: {
-        src: ['js/tests/unit/*.js']
+        src: 'js/tests/unit/*.js'
       },
       assets: {
         src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
-      },
-      docsGrunt: {
-        src: ['docs/grunt/*.js']
       }
     },
 
@@ -64,20 +64,17 @@ module.exports = function (grunt) {
       options: {
         config: 'js/.jscs.json',
       },
-      gruntfile: {
+      grunt: {
-        src: ['Gruntfile.js']
+        src: ['Gruntfile.js', 'grunt/*.js']
       },
       src: {
-        src: ['js/*.js']
+        src: 'js/*.js'
       },
       test: {
-        src: ['js/tests/unit/*.js']
+        src: 'js/tests/unit/*.js'
       },
       assets: {
         src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
-      },
-      docsGrunt: {
-        src: ['docs/grunt/*.js']
       }
     },
 
@@ -88,7 +85,8 @@ module.exports = function (grunt) {
       src: [
         'dist/css/bootstrap.css',
         'dist/css/bootstrap-theme.css',
-        'docs/assets/css/docs.css'
+        'docs/assets/css/docs.css',
+        'docs/examples/**/*.css'
       ]
     },
 
@@ -117,36 +115,37 @@ module.exports = function (grunt) {
     },
 
     uglify: {
-      bootstrap: {
       options: {
-          banner: '<%= banner %>',
         report: 'min'
       },
-        src: ['<%= concat.bootstrap.dest %>'],
+      bootstrap: {
+        options: {
+          banner: '<%= banner %>'
+        },
+        src: '<%= concat.bootstrap.dest %>',
         dest: 'dist/js/<%= pkg.name %>.min.js'
       },
       customize: {
         options: {
-          banner: '<%= bannerDocs %>',
+          preserveComments: 'some'
-          report: 'min'
         },
         src: [
-          'docs/assets/js/less.js',
+          'docs/assets/js/vendor/less.min.js',
-          'docs/assets/js/jszip.js',
+          'docs/assets/js/vendor/jszip.js',
-          'docs/assets/js/uglify.js',
+          'docs/assets/js/vendor/uglify.min.js',
-          'docs/assets/js/filesaver.js',
+          'docs/assets/js/vendor/blob.js',
-          'docs/assets/js/raw-files.js',
+          'docs/assets/js/vendor/filesaver.js',
+          'docs/assets/js/raw-files.min.js',
           'docs/assets/js/customizer.js'
         ],
         dest: 'docs/assets/js/customize.min.js'
       },
       docsJs: {
         options: {
-          banner: '<%= bannerDocs %>',
+          preserveComments: 'some'
-          report: 'min'
         },
         src: [
-          'docs/assets/js/holder.js',
+          'docs/assets/js/vendor/holder.js',
           'docs/assets/js/application.js'
         ],
         dest: 'docs/assets/js/docs.min.js'
@@ -193,9 +192,8 @@ module.exports = function (grunt) {
     cssmin: {
       compress: {
         options: {
-          banner: '<%= bannerDocs %>',
           keepSpecialComments: '*',
-          noAdvanced: true, // turn advanced optimizations off until it's fixed in clean-css
+          noAdvanced: true, // turn advanced optimizations off until the issue is fixed in clean-css
           report: 'min',
           selectorsMergeMode: 'ie8'
         },
@@ -203,7 +201,7 @@ module.exports = function (grunt) {
           'docs/assets/css/docs.css',
           'docs/assets/css/pygments-manni.css'
         ],
-        dest: 'docs/assets/css/pack.min.css'
+        dest: 'docs/assets/css/docs.min.css'
       }
     },
 
@@ -218,28 +216,34 @@ module.exports = function (grunt) {
             'dist/css/<%= pkg.name %>.css',
             'dist/css/<%= pkg.name %>.min.css',
             'dist/css/<%= pkg.name %>-theme.css',
-            'dist/css/<%= pkg.name %>-theme.min.css',
+            'dist/css/<%= pkg.name %>-theme.min.css'
           ]
         }
       }
     },
 
     csscomb: {
-      sort: {
       options: {
         config: 'less/.csscomb.json'
       },
+      dist: {
         files: {
-          'dist/css/<%= pkg.name %>.css': ['dist/css/<%= pkg.name %>.css'],
+          'dist/css/<%= pkg.name %>.css': 'dist/css/<%= pkg.name %>.css',
-          'dist/css/<%= pkg.name %>-theme.css': ['dist/css/<%= pkg.name %>-theme.css']
+          'dist/css/<%= pkg.name %>-theme.css': 'dist/css/<%= pkg.name %>-theme.css'
         }
+      },
+      examples: {
+          expand: true,
+          cwd: 'docs/examples/',
+          src: ['**/*.css'],
+          dest: 'docs/examples/'
       }
     },
 
     copy: {
       fonts: {
         expand: true,
-        src: ['fonts/*'],
+        src: 'fonts/*',
         dest: 'dist/'
       },
       docs: {
@@ -258,7 +262,7 @@ module.exports = function (grunt) {
       options: {
         inject: 'js/tests/unit/phantom.js'
       },
-      files: ['js/tests/*.html']
+      files: 'js/tests/index.html'
     },
 
     connect: {
@@ -286,7 +290,8 @@ module.exports = function (grunt) {
           }
         },
         files: {
-          'docs/_includes/customizer-variables.html': 'docs/customizer-variables.jade'
+          'docs/_includes/customizer-variables.html': 'docs/jade/customizer-variables.jade',
+          'docs/_includes/nav-customize.html': 'docs/jade/customizer-nav.jade'
         }
       }
     },
@@ -303,7 +308,7 @@ module.exports = function (grunt) {
         ]
       },
       files: {
-        src: ['_gh_pages/**/*.html']
+        src: '_gh_pages/**/*.html'
       }
     },
 
@@ -318,15 +323,15 @@ module.exports = function (grunt) {
       },
       less: {
         files: 'less/*.less',
-        tasks: ['less']
+        tasks: 'less'
       }
     },
 
     sed: {
       versionNumber: {
         pattern: (function () {
-          var old = grunt.option('oldver')
+          var old = grunt.option('oldver');
-          return old ? RegExp.quote(old) : old
+          return old ? RegExp.quote(old) : old;
         })(),
         replacement: grunt.option('newver'),
         recursive: true
@@ -337,17 +342,27 @@ module.exports = function (grunt) {
       all: {
         options: {
           build: process.env.TRAVIS_JOB_ID,
-          concurrency: 3,
+          concurrency: 10,
           urls: ['http://127.0.0.1:3000/js/tests/index.html'],
           browsers: grunt.file.readYAML('test-infra/sauce_browsers.yml')
         }
       }
+    },
+
+    exec: {
+      npmUpdate: {
+        command: 'npm update'
+      },
+      npmShrinkWrap: {
+        command: 'npm shrinkwrap --dev'
+      }
     }
   });
 
 
   // These plugins provide necessary tasks.
   require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+  grunt.loadNpmTasks('browserstack-runner');
 
   // Docs HTML validation task
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
@@ -356,19 +371,25 @@ 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', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-vars-form']);
+    testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-html']);
   }
   // Skip HTML validation if running a different subset of the test suite
   if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
     testSubtasks.push('validate-html');
   }
   // Only run Sauce Labs tests if there's a Sauce access key
-  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
+  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
       // Skip Sauce if running a different subset of the test suite
-      && (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
+      (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
     testSubtasks.push('connect');
     testSubtasks.push('saucelabs-qunit');
   }
+  // Only run BrowserStack tests if there's a BrowserStack access key
+  if (typeof process.env.BROWSERSTACK_KEY !== 'undefined' &&
+      // Skip BrowserStack if running a different subset of the test suite
+      (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'browserstack-js-unit')) {
+    testSubtasks.push('browserstack_runner');
+  }
   grunt.registerTask('test', testSubtasks);
 
   // JS distribution task.
@@ -378,23 +399,30 @@ module.exports = function (grunt) {
   grunt.registerTask('dist-css', ['less', 'cssmin', 'csscomb', 'usebanner']);
 
   // Docs distribution task.
-  grunt.registerTask('dist-docs', ['copy:docs']);
+  grunt.registerTask('dist-docs', 'copy:docs');
 
   // Full distribution task.
-  grunt.registerTask('dist', ['clean', 'dist-css', 'copy:fonts', 'dist-docs', 'dist-js']);
+  grunt.registerTask('dist', ['clean', 'dist-css', 'copy:fonts', 'dist-js', 'dist-docs']);
 
   // Default task.
-  grunt.registerTask('default', ['test', 'dist', 'build-glyphicons-data', 'build-customizer']);
+  grunt.registerTask('default', ['test', 'dist', 'build-glyphicons-data', 'build-customizer', 'update-shrinkwrap']);
 
   // Version numbering task.
   // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
   // This can be overzealous, so its changes should always be manually reviewed!
-  grunt.registerTask('change-version-number', ['sed']);
+  grunt.registerTask('change-version-number', 'sed');
 
   grunt.registerTask('build-glyphicons-data', generateGlyphiconsData);
 
   // task for building customizer
-  grunt.registerTask('build-customizer', ['build-customizer-vars-form', 'build-raw-files']);
+  grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
-  grunt.registerTask('build-customizer-vars-form', ['jade']);
+  grunt.registerTask('build-customizer-html', 'jade');
-  grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', generateRawFilesJs);
+  grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
+    var banner = grunt.template.process('<%= banner %>');
+    generateRawFilesJs(banner);
+  });
+
+  // Task for updating the npm packages used by the Travis build.
+  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']);
+  grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
 };

README.md

@@ -1,4 +1,4 @@
-# [Bootstrap](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
+# [Bootstrap](http://getbootstrap.com) [![Bower version](https://badge.fury.io/bo/bootstrap.png)](http://badge.fury.io/bo/bootstrap) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
 [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
 
 Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
@@ -21,7 +21,7 @@ To get started, check out <http://getbootstrap.com>!
 
 Three quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.0.3.zip).
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.1.0.zip).
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
 - Install with [Bower](http://bower.io): `bower install bootstrap`.
 
@@ -64,9 +64,9 @@ Bootstrap's documentation, included in this repo in the root directory, is built
 ### Running documentation locally
 
 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
-  - **Windows users:** read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems.
+  - **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
 2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
-  - **Windows users:** For Ruby 2.0.0 run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 1.9.3 you can alternatively do `SET LANG=en_EN.UTF-8`. In addition, ensure you have Python installed and added in your `PATH` or the build will fail due to our Pygments dependency.
+  - **Windows users:** While we use Jekyll's `encoding` setting, you might still need to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 2.0.0, run `chcp 65001` first. For Ruby 1.9.3, you can alternatively do `SET LANG=en_EN.UTF-8`.
 3. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@@ -131,7 +131,7 @@ Keep track of development and community news.
 - Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
 - Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
 - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
-- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap`](http://stackoverflow.com/questions/tagged/twitter-bootstrap)).
+- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
 
 
 
@@ -170,4 +170,4 @@ For more information on SemVer, please visit <http://semver.org/>.
 
 ## Copyright and license
 
-Copyright 2011-2014 Twitter, Inc. under [the MIT license](LICENSE).
+Code and documentation copyright 2011-2014 Twitter, Inc. Code released under [the MIT license](LICENSE). Docs released under [Creative Commons](docs/LICENSE).

_config.yml

@@ -12,20 +12,26 @@ host:             0.0.0.0
 port:             9001
 baseurl:          /
 url:              http://localhost:9001
+encoding:         UTF-8
+
+exclude:
+  - "jade"
+  - "vendor"
 
 # Custom vars
-current_version:  3.0.3
+current_version:  3.1.0
 repo:             https://github.com/twbs/bootstrap
 sass_repo:        https://github.com/twbs/bootstrap-sass
 
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v3.0.3.zip
+  source:         https://github.com/twbs/bootstrap/archive/v3.1.0.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
+  dist:           https://github.com/twbs/bootstrap/releases/download/v3.1.0/bootstrap-3.1.0-dist.zip
+  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.1.0.tar.gz
 
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
 cdn:
-  css:            //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
+  css:            //netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css
-  css_theme:      //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css
+  css_theme:      //netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css
-  js:             //netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
+  js:             //netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "main": [
     "./dist/css/bootstrap.css",
     "./dist/js/bootstrap.js",

browserstack.json

@@ -0,0 +1,38 @@
+{
+  "username": "--secure--",
+  "key": "--secure--",
+  "test_path": "js/tests/index.html",
+  "debug": true,
+  "browsers": [
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mavericks"
+    },
+    {
+      "browser": "safari",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mavericks"
+    },
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "8.1"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "8.1"
+    },
+    {
+      "browser": "Mobile Safari",
+      "os": "ios",
+      "os_version": "7.0",
+      "device": "iPhone 5S"
+    }
+  ]
+}

dist/css/bootstrap-theme.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Bootstrap v3.1.0 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */

dist/css/bootstrap-theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Bootstrap v3.1.0 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */

dist/js/bootstrap.js

@@ -1,13 +1,13 @@
 /*!
- * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Bootstrap v3.1.0 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
-if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery') }
+if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') }
 
 /* ========================================================================
- * Bootstrap: transition.js v3.0.3
+ * Bootstrap: transition.js v3.1.0
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -56,7 +56,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: alert.js v3.0.3
+ * Bootstrap: alert.js v3.1.0
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -145,7 +145,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: button.js v3.0.3
+ * Bootstrap: button.js v3.1.0
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -253,7 +253,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: carousel.js v3.0.3
+ * Bootstrap: carousel.js v3.1.0
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -322,7 +322,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
   Carousel.prototype.pause = function (e) {
     e || (this.paused = true)
 
-    if (this.$element.find('.next, .prev').length && $.support.transition.end) {
+    if (this.$element.find('.next, .prev').length && $.support.transition) {
       this.$element.trigger($.support.transition.end)
       this.cycle(true)
     }
@@ -459,7 +459,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: collapse.js v3.0.3
+ * Bootstrap: collapse.js v3.1.0
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -587,6 +587,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
       var data    = $this.data('bs.collapse')
       var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
 
+      if (!data && options.toggle && option == 'show') option = !option
       if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
       if (typeof option == 'string') data[option]()
     })
@@ -629,7 +630,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: dropdown.js v3.0.3
+ * Bootstrap: dropdown.js v3.1.0
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -777,7 +778,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: modal.js v3.0.3
+ * Bootstrap: modal.js v3.1.0
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -828,7 +829,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 
     this.escape()
 
-    this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
+    this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
 
     this.backdrop(function () {
       var transition = $.support.transition && that.$element.hasClass('fade')
@@ -881,7 +882,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
     this.$element
       .removeClass('in')
       .attr('aria-hidden', true)
-      .off('click.dismiss.modal')
+      .off('click.dismiss.bs.modal')
 
     $.support.transition && this.$element.hasClass('fade') ?
       this.$element
@@ -933,7 +934,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
         .appendTo(document.body)
 
-      this.$element.on('click.dismiss.modal', $.proxy(function (e) {
+      this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
         if (e.target !== e.currentTarget) return
         this.options.backdrop == 'static'
           ? this.$element[0].focus.call(this.$element[0])
@@ -1021,7 +1022,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tooltip.js v3.0.3
+ * Bootstrap: tooltip.js v3.1.0
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
@@ -1421,7 +1422,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: popover.js v3.0.3
+ * Bootstrap: popover.js v3.1.0
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1532,7 +1533,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: scrollspy.js v3.0.3
+ * Bootstrap: scrollspy.js v3.1.0
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1686,7 +1687,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tab.js v3.0.3
+ * Bootstrap: tab.js v3.1.0
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1812,7 +1813,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: affix.js v3.0.3
+ * Bootstrap: affix.js v3.1.0
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.

docs/_data/showcase.yml

@@ -0,0 +1,19 @@
+- name: Coinbase
+  url: https://coinbase.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/06/coinbase/
+  img: http://expo.getbootstrap.com/screenshots/coinbase.jpg
+
+- name: Localcrime
+  url: http://www.localcrimeapp.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/08/localcrime/
+  img: http://expo.getbootstrap.com/screenshots/localcrime.jpg
+
+- name: Sentry
+  url: https://www.getsentry.com/
+  expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
+  img: http://expo.getbootstrap.com/screenshots/sentry.jpg
+
+- name: Fortrabbit
+  url: http://fortrabbit.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/05/fortrabbit/
+  img: http://expo.getbootstrap.com/screenshots/fortrabbit.jpg

docs/_includes/customizer-variables.html

@@ -1,5 +1,5 @@
 
-<!-- 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.-->
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` 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">
@@ -131,7 +131,7 @@
   <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>
+    <p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <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>
@@ -572,6 +572,37 @@
     <p class="help-block">Point at which the navbar begins collapsing.</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>
 <h2 id="navbar">Navbar</h2>
 <p></p>
 <div class="row">
@@ -595,6 +626,10 @@
     <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-collapse-max-height">@navbar-collapse-max-height</label>
+    <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" 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"/>
@@ -1117,7 +1152,7 @@
   <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>
+    <p class="help-block">Modal content border color <strong>for IE8</strong></p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
@@ -1143,6 +1178,10 @@
     <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-md">@modal-md</label>
+    <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" 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"/>
@@ -1623,6 +1662,11 @@
     <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-font-size">@blockquote-font-size</label>
+    <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/>
+    <p class="help-block">Blockquote font size</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"/>
@@ -1648,35 +1692,4 @@
     <p class="help-block">Horizontal offset for forms and lists.</p>
   </div>
 </div>
-<h2 id="container-sizes">Container sizes</h2>
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
-<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

@@ -1,11 +1,42 @@
+<!-- Footer
+================================================== -->
+<footer class="bs-footer" role="contentinfo">
+  <div class="container">
+    {% include social-buttons.html %}
+
+    <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+    <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
+    <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+    <ul class="footer-links muted">
+      <li>Currently v{{ site.current_version }}</li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}">GitHub</a></li>
+      <li>&middot;</li>
+      <li><a href="../getting-started/#examples">Examples</a></li>
+      <li>&middot;</li>
+      <li><a href="../2.3.2/">v2.3.2 docs</a></li>
+      <li>&middot;</li>
+      <li><a href="../about/">About</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.expo }}">Expo</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.blog }}">Blog</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/releases">Releases</a></li>
+    </ul>
+  </div>
+</footer>
+
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="{{ site.baseurl }}dist/js/bootstrap.min.js"></script>
+<script src="../dist/js/bootstrap.min.js"></script>
-<script src="{{ site.baseurl }}assets/js/docs.min.js"></script>
+<script src="../assets/js/docs.min.js"></script>
 {% if page.slug == "customize" %}
-<script src="{{ site.baseurl }}assets/js/customize.min.js"></script>
+<script src="../assets/js/customize.min.js"></script>
 {% endif %}
 
 {% comment %}

docs/_includes/header.html

@@ -1,6 +1,6 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
 <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
@@ -14,11 +14,11 @@
 </title>
 
 <!-- Bootstrap core CSS -->
-<link href="{{ site.baseurl }}dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
 
 <!-- Documentation extras -->
-<link href="{{ site.baseurl }}assets/css/pack.min.css" rel="stylesheet">
+<link href="../assets/css/docs.min.css" rel="stylesheet">
-<!--[if lt IE 9]><script src="{{ site.baseurl }}assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
@@ -27,8 +27,8 @@
 <![endif]-->
 
 <!-- Favicons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}assets/ico/apple-touch-icon-144-precomposed.png">
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
-                               <link rel="shortcut icon" href="{{ site.baseurl }}assets/ico/favicon.ico">
+                               <link rel="shortcut icon" href="../assets/ico/favicon.ico">
 
 <script>
   var _gaq = _gaq || [];

docs/_includes/nav-about.html

@@ -5,8 +5,5 @@
   <a href="#team">Team</a>
 </li>
 <li>
-  <a href="#community">Community</a>
+  <a href="#brand">Brand guidelines</a>
-</li>
-<li>
-  <a href="#translations">Translations</a>
 </li>

docs/_includes/nav-components.html

@@ -102,6 +102,7 @@
   <a href="#progress">Progress bars</a>
   <ul class="nav">
     <li><a href="#progress-basic">Basic example</a></li>
+    <li><a href="#progress-label">With label</a></li>
     <li><a href="#progress-alternatives">Contextual alternatives</a></li>
     <li><a href="#progress-striped">Striped</a></li>
     <li><a href="#progress-animated">Animated</a></li>

docs/_includes/nav-css.html

@@ -3,9 +3,8 @@
   <ul class="nav">
     <li><a href="#overview-doctype">HTML5 doctype</a></li>
     <li><a href="#overview-mobile">Mobile first</a></li>
-    <li><a href="#overview-responsive-images">Responsive images</a></li>
     <li><a href="#overview-type-links">Typography and links</a></li>
-    <li><a href="#overview-normalize">Normalize</a></li>
+    <li><a href="#overview-normalize">Normalize.css</a></li>
     <li><a href="#overview-container">Containers</a></li>
   </ul>
 </li>
@@ -15,7 +14,7 @@
     <li><a href="#grid-intro">Introduction</a></li>
     <li><a href="#grid-media-queries">Media queries</a></li>
     <li><a href="#grid-options">Grid options</a></li>
-    <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
+    <li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
     <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
     <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
@@ -23,7 +22,7 @@
     <li><a href="#grid-offsetting">Offsetting columns</a></li>
     <li><a href="#grid-nesting">Nesting columns</a></li>
     <li><a href="#grid-column-ordering">Column ordering</a></li>
-    <li><a href="#grid-less">LESS mixins and variables</a></li>
+    <li><a href="#grid-less">Less mixins and variables</a></li>
   </ul>
 </li>
 <li>
@@ -85,6 +84,10 @@
 </li>
 <li>
   <a href="#images">Images</a>
+  <ul class="nav">
+    <li><a href="#images-responsive">Responsive images</a></li>
+    <li><a href="#images-shapes">Image shapes</a></li>
+  </ul>
 </li>
 <li>
   <a href="#helper-classes">Helper classes</a>
@@ -112,6 +115,7 @@
 <li>
   <a href="#less">Using Less</a>
   <ul class="nav">
+    <li><a href="#less-bootstrap">Compiling Bootstrap</a></li>
     <li><a href="#less-variables">Variables</a></li>
     <li><a href="#less-mixins-vendor">Vendor mixins</a></li>
     <li><a href="#less-mixins-utility">Utility mixins</a></li>
@@ -121,9 +125,6 @@
   <a href="#sass">Using Sass</a>
   <ul class="nav">
     <li><a href="#sass-contents">What's included</a></li>
-    <li><a href="#sass-installation-rails">Rails install</a></li>
+    <li><a href="#sass-installation">Rails install</a></li>
-    <li><a href="#sass-installation-compass">Compass install</a></li>
-    <li><a href="#sass-installation-sass-only">Sass install</a></li>
-    <li><a href="#sass-usage">Usage</a></li>
   </ul>
 </li>

docs/_includes/nav-customize.html

@@ -1,40 +1,46 @@
-<li>
+
-  <a href="#less">LESS components</a>
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
-</li>
+<li><a href="#less">Less components</a></li>
-<li>
+<li><a href="#plugins">jQuery plugins</a></li>
-  <a href="#plugins">jQuery plugins</a>
+<li><a href="#less-variables">Less variables</a>
-</li>
-<li>
-  <a href="#less-variables">LESS variables</a>
   <ul class="nav">
-    <li><a href="#variables-basics">Basics</a></li>
+    <li><a href="#colors">Colors</a></li>
-    <li><a href="#variables-buttons">Buttons</a></li>
+    <li><a href="#scaffolding">Scaffolding</a></li>
-    <li><a href="#variables-form-states">Form states</a></li>
+    <li><a href="#typography">Typography</a></li>
-    <li><a href="#variables-alerts">Alerts</a></li>
+    <li><a href="#components">Components</a></li>
-    <li><a href="#variables-navbar">Navbar</a></li>
+    <li><a href="#tables">Tables</a></li>
-    <li><a href="#variables-nav">Nav</a></li>
+    <li><a href="#buttons">Buttons</a></li>
-    <li><a href="#variables-tables">Tables</a></li>
+    <li><a href="#forms">Forms</a></li>
-    <li><a href="#variables-forms">Forms</a></li>
+    <li><a href="#dropdowns">Dropdowns</a></li>
-    <li><a href="#variables-dropdowns">Dropdowns</a></li>
+    <li><a href="#media-queries-breakpoints">Media queries breakpoints</a></li>
-    <li><a href="#variables-panels-wells">Panels and wells</a></li>
+    <li><a href="#grid-system">Grid system</a></li>
-    <li><a href="#variables-accordion">Accordion</a></li>
+    <li><a href="#container-sizes">Container sizes</a></li>
-    <li><a href="#variables-badges">Badges</a></li>
+    <li><a href="#navbar">Navbar</a></li>
-    <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#navs">Navs</a></li>
-    <li><a href="#variables-jumbotron">Jumbotron</a></li>
+    <li><a href="#tabs">Tabs</a></li>
-    <li><a href="#variables-modals">Modals</a></li>
+    <li><a href="#pills">Pills</a></li>
-    <li><a href="#variables-carousel">Carousel</a></li>
+    <li><a href="#pagination">Pagination</a></li>
-    <li><a href="#variables-list-group">List group</a></li>
+    <li><a href="#pager">Pager</a></li>
-    <li><a href="#variables-thumbnails">Thumbnails</a></li>
+    <li><a href="#jumbotron">Jumbotron</a></li>
-    <li><a href="#variables-progress">Progress bars</a></li>
+    <li><a href="#form-states-and-alerts">Form states and alerts</a></li>
-    <li><a href="#variables-pagination">Pagination</a></li>
+    <li><a href="#tooltips">Tooltips</a></li>
-    <li><a href="#variables-pager">Pager</a></li>
+    <li><a href="#popovers">Popovers</a></li>
-    <li><a href="#variables-labels">Labels</a></li>
+    <li><a href="#labels">Labels</a></li>
-    <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
+    <li><a href="#modals">Modals</a></li>
-    <li><a href="#variables-close">Close button</a></li>
+    <li><a href="#alerts">Alerts</a></li>
-    <li><a href="#variables-type">Type</a></li>
+    <li><a href="#progress-bars">Progress bars</a></li>
-    <li><a href="#variables-other">Other</a></li>
+    <li><a href="#list-group">List group</a></li>
+    <li><a href="#panels">Panels</a></li>
+    <li><a href="#thumbnails">Thumbnails</a></li>
+    <li><a href="#wells">Wells</a></li>
+    <li><a href="#badges">Badges</a></li>
+    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#carousel">Carousel</a></li>
+    <li><a href="#close">Close</a></li>
+    <li><a href="#code">Code</a></li>
+    <li><a href="#type">Type</a></li>
+    <li><a href="#miscellaneous">Miscellaneous</a></li>
   </ul>
 </li>
-<li>
+<li><a href="#download">Download</a></li>
-  <a href="#download">Download</a>
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
-</li>

docs/_includes/nav-getting-started.html

@@ -1,10 +1,5 @@
 <li>
-  <a href="#download">Download Bootstrap</a>
+  <a href="#download">Download</a>
-  <ul class="nav">
-    <li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
-    <li><a href="#download-additional">Additional downloads</a></li>
-    <li><a href="#download-cdn">Bootstrap CDN</a></li>
-  </ul>
 </li>
 <li>
   <a href="#whats-included">What's included</a>
@@ -18,18 +13,21 @@
 </li>
 <li>
   <a href="#examples">Examples</a>
+  <ul class="nav">
+    <li><a href="#examples-framework">Using the framework</a></li>
+    <li><a href="#examples-navbars">Navbars in action</a></li>
+    <li><a href="#examples-custom">Custom components</a></li>
+    <li><a href="#examples-experiments">Experiments</a></li>
+  </ul>
+</li>
+<li>
+  <a href="#community">Community</a>
 </li>
 <li>
   <a href="#disable-responsive">Disabling responsiveness</a>
 </li>
 <li>
   <a href="#migration">Migrating from 2.x to 3.0</a>
-  <ul class="nav">
-    <li><a href="#migration-classes">Major class changes</a></li>
-    <li><a href="#migration-new">What's new</a></li>
-    <li><a href="#migration-dropped">What's removed</a></li>
-    <li><a href="#migration-notes">Additional notes</a></li>
-  </ul>
 </li>
 <li>
   <a href="#support">Browser and device support</a>
@@ -43,6 +41,7 @@
     <li><a href="#support-safari-percentages">Safari percent rounding</a></li>
     <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
     <li><a href="#support-browser-zooming">Browser zooming</a></li>
+    <li><a href="#support-printing">Printer viewports</a></li>
     <li><a href="#support-android-stock-browser">Android stock browser</a></li>
   </ul>
 </li>
@@ -58,3 +57,6 @@
 <li>
   <a href="#customizing">Customizing Bootstrap</a>
 </li>
+<li>
+  <a href="#translations">Translations</a>
+</li>

docs/_includes/nav-main.html

@@ -1,4 +1,4 @@
-<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
+<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
   <div class="container">
     <div class="navbar-header">
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
@@ -7,30 +7,29 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a href="{{ site.baseurl }}" class="navbar-brand">Bootstrap</a>
+      <a href="../" class="navbar-brand">Bootstrap</a>
     </div>
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
       <ul class="nav navbar-nav">
         <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}getting-started">Getting started</a>
+          <a href="../getting-started">Getting started</a>
         </li>
         <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}css">CSS</a>
+          <a href="../css">CSS</a>
         </li>
         <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}components">Components</a>
+          <a href="../components">Components</a>
         </li>
         <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}javascript">JavaScript</a>
+          <a href="../javascript">JavaScript</a>
         </li>
         <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}customize">Customize</a>
+          <a href="../customize">Customize</a>
         </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
-        <li{% if page.slug == "about" %} class="active"{% endif %}>
+        <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
-          <a href="{{ site.baseurl }}about">About</a>
+        <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
-        </li>
       </ul>
     </nav>
   </div>

docs/_includes/nav-migration.html

@@ -0,0 +1,12 @@
+<li>
+  <a href="#classes">Major class changes</a>
+</li>
+<li>
+  <a href="#new">What's new</a>
+</li>
+<li>
+  <a href="#dropped">What's removed</a>
+</li>
+<li>
+  <a href="#notes">Additional notes</a>
+</li>

docs/_includes/old-bs-docs.html

@@ -1,8 +0,0 @@
-<div class="bs-old-docs">
-  <div class="container">
-    <strong>
-      <a href="{{ site.baseurl }}2.3.2/">Looking for Bootstrap 2.3.2 docs?</a>
-    </strong>
-    We've moved it to a new home while we push forward with Bootstrap 3. <a href="http://blog.getbootstrap.com/">Read the blog</a> for details.
-  </div>
-</div>

docs/_includes/social-buttons.html

@@ -10,7 +10,7 @@
       <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
     </li>
     <li class="tweet-btn">
-      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a>
     </li>
   </ul>
 </div>

docs/_layouts/default.html

@@ -19,12 +19,12 @@
       </div>
     </div>
 
-    <!-- Callout for the old docs link -->
-    {% include old-bs-docs.html %}
-
     <div class="container bs-docs-container">
 
       <div class="row">
+        <div class="col-md-9" role="main">
+          {{ content }}
+        </div>
         <div class="col-md-3">
           <div class="bs-sidebar hidden-print" role="complementary">
             <ul class="nav bs-sidenav">
@@ -40,48 +40,19 @@
                 {% include nav-customize.html %}
               {% elsif page.slug == "about" %}
                 {% include nav-about.html %}
+              {% elsif page.slug == "migration" %}
+                {% include nav-migration.html %}
               {% endif %}
             </ul>
+            <a class="back-to-top" href="#top">
+              Back to top
+            </a>
           </div>
         </div>
-        <div class="col-md-9" role="main">
-          {{ content }}
-        </div>
       </div>
 
     </div>
 
-    <!-- Footer
-    ================================================== -->
-    <footer class="bs-footer" role="contentinfo">
-      <div class="container">
-        {% include social-buttons.html %}
-
-        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
-        <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
-        <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <ul class="footer-links">
-          <li>Currently v{{ site.current_version }}</li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}">GitHub project</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.baseurl }}getting-started/#examples">Examples</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.expo }}">Expo</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.blog }}">Blog</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}/releases">Releases</a></li>
-        </ul>
-      </div>
-    </footer>
-
-    <!-- JS and analytics only. -->
     {% include footer.html %}
-
   </body>
 </html>

docs/_layouts/home.html

@@ -13,41 +13,6 @@
     <!-- Page content of course! -->
     {{ content }}
 
-    <footer class="container" role="contentinfo">
-      {% include ads.html %}
-
-      {% include social-buttons.html %}
-
-      <ul class="bs-masthead-links">
-        <li class="current-version">
-          Currently v{{ site.current_version }}
-        </li>
-        <li>
-          <a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
-        </li>
-        <li>
-          <a href="{{ site.baseurl }}getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
-        </li>
-        <li>
-          <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
-        </li>
-        <li>
-          <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}/issues?state=open" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Issues']);">Issues</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}/releases" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Releases']);">Releases</a>
-        </li>
-      </ul>
-    </footer>
-
-    <!-- JS and analytics only. -->
     {% include footer.html %}
-
   </body>
 </html>

docs/about.html

@@ -2,16 +2,15 @@
 layout: default
 title: About
 slug: about
-lead: "Learn about the history of Bootstrap, meet the core team, and check out the ever-growing community resources."
+lead: "Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand."
 ---
 
 
 <!-- History
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
+  <h1 id="history" class="page-header">History</h1>
-    <h1 id="history">History</h1>
+
-  </div>
   <p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
   <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
   <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
@@ -21,9 +20,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
 <!-- Team
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
+  <h1 id="team" class="page-header">Team</h1>
-    <h1 id="team">Team</h1>
+
-  </div>
   <p class="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
 
   <h2 id="team-core">Core team</h2>
@@ -90,39 +88,62 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
       </a>
     </div>
   </div>
-  <p>The <a href="{{ site.sass_repo }}">official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.</p>
+  <p>The <a href="{{ site.sass_repo }}">official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href="https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how the Sass port is developed.</p>
 </div>
 
 
-<!-- Community
+<!-- Brand
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
+  <h1 id="brand" class="page-header">Brand guidelines</h1>
-    <h1 id="community">Community</h1>
+
+  <p class="lead">Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href="http://mailchimp.com/about/brand-assets/" target="_blank">Brand Assets</a>.</p>
+
+  <h2>Mark and logo</h2>
+  <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <div class="bs-booticon bs-booticon-lg">B</div>
+    </div>
+    <div class="bs-brand-item inverse">
+      <div class="bs-booticon bs-booticon-lg bs-booticon-inverse">B</div>
+    </div>
+  </div>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h1>Bootstrap</h1>
+    </div>
+    <div class="bs-brand-item inverse">
+      <h1>Bootstrap</h1>
     </div>
-  <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
-  <ul>
-    <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
-    <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
-    <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
-  </ul>
-  <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
   </div>
 
+  <h2>Name</h2>
+  <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h3>Bootstrap</h3>
+      <span class="glyphicon glyphicon-ok"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">BootStrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">Twitter Bootstrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+  </div>
 
-<!-- Translations
+  <h2>Colors</h2>
-================================================== -->
+  <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p>
-<div class="bs-docs-section">
+  <div class="bs-brand">
-  <div class="page-header">
+    <div class="color-swatches">
-    <h1 id="translations">Translations</h1>
+      <div class="color-swatch bs-purple"></div>
+      <div class="color-swatch bs-purple-light"></div>
+      <div class="color-swatch bs-purple-lighter"></div>
+      <div class="color-swatch bs-gray"></div>
     </div>
-  <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and may not always be up to date.</p>
+  </div>
-  <ul>
+
-    <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
-    <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
-  </ul>
-  <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
 </div>

docs/assets/css/pygments-manni.css

@@ -4,7 +4,7 @@
 .err { color: #AA0000; background-color: #FFAAAA } /* Error */
 .k { color: #006699; } /* Keyword */
 .o { color: #555555 } /* Operator */
-.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
+.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
 .cp { color: #009999 } /* Comment.Preproc */
 .c1 { color: #999; } /* Comment.Single */
 .cs { color: #999; } /* Comment.Special */

docs/assets/js/application.js

@@ -3,8 +3,8 @@
 // ++++++++++++++++++++++++++++++++++++++++++
 
 /*!
+ * JavaScript for Bootstrap's docs (http://getbootstrap.com)
  * 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/.
  */
@@ -18,14 +18,13 @@
     //
     // See Getting Started docs for more information
     if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
-      var msViewportStyle = document.createElement('style');
+      var msViewportStyle = document.createElement('style')
       msViewportStyle.appendChild(
         document.createTextNode(
           '@-ms-viewport{width:auto!important}'
         )
-      );
+      )
-      document.querySelector('head').
+      document.querySelector('head').appendChild(msViewportStyle)
-        appendChild(msViewportStyle);
     }
 
 
@@ -36,7 +35,7 @@
 
     $body.scrollspy({
       target: '.bs-sidebar',
-      offset: navHeight
+      // offset: navHeight
     })
 
     $window.on('load', function () {
@@ -86,8 +85,7 @@
     })
 
     // popover demo
-    $('[data-toggle=popover]')
+    $('[data-toggle=popover]').popover()
-      .popover()
 
     // button state demo
     $('#loading-example-btn')

docs/assets/js/customizer.js

@@ -1,4 +1,5 @@
 /*!
+ * Bootstrap Customizer (http://getbootstrap.com/customize/)
  * Copyright 2011-2014 Twitter, Inc.
  *
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
@@ -9,10 +10,10 @@
 
 window.onload = function () { // wait for load in a dumb way because B-0
   var cw = '/*!\n' +
-           ' * Bootstrap v3.0.3 (http://getbootstrap.com)\n' +
+           ' * Bootstrap v3.1.0 (http://getbootstrap.com)\n' +
            ' * Copyright 2011-2014 Twitter, Inc.\n' +
            ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
-           ' */\n\n';
+           ' */\n\n'
 
   function showError(msg, err) {
     $('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
@@ -39,9 +40,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
   }
 
   function getQueryParam(key) {
-    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&'); // escape RegEx meta chars
+    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&') // escape RegEx meta chars
-    var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'));
+    var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'))
-    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+    return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
   }
 
   function createGist(configJson) {

docs/assets/js/vendor/blob.js

@@ -0,0 +1,166 @@
+/* Blob.js
+ * A Blob implementation.
+ * 2013-12-27
+ * 
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
+if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
+else var Blob = (function (view) {
+	"use strict";
+
+	var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
+		var
+			  get_class = function(object) {
+				return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+			}
+			, FakeBlobBuilder = function BlobBuilder() {
+				this.data = [];
+			}
+			, FakeBlob = function Blob(data, type, encoding) {
+				this.data = data;
+				this.size = data.length;
+				this.type = type;
+				this.encoding = encoding;
+			}
+			, FBB_proto = FakeBlobBuilder.prototype
+			, FB_proto = FakeBlob.prototype
+			, FileReaderSync = view.FileReaderSync
+			, FileException = function(type) {
+				this.code = this[this.name = type];
+			}
+			, file_ex_codes = (
+				  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+				+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+			).split(" ")
+			, file_ex_code = file_ex_codes.length
+			, real_URL = view.URL || view.webkitURL || view
+			, real_create_object_URL = real_URL.createObjectURL
+			, real_revoke_object_URL = real_URL.revokeObjectURL
+			, URL = real_URL
+			, btoa = view.btoa
+			, atob = view.atob
+			
+			, ArrayBuffer = view.ArrayBuffer
+			, Uint8Array = view.Uint8Array
+		;
+		FakeBlob.fake = FB_proto.fake = true;
+		while (file_ex_code--) {
+			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+		}
+		if (!real_URL.createObjectURL) {
+			URL = view.URL = {};
+		}
+		URL.createObjectURL = function(blob) {
+			var
+				  type = blob.type
+				, data_URI_header
+			;
+			if (type === null) {
+				type = "application/octet-stream";
+			}
+			if (blob instanceof FakeBlob) {
+				data_URI_header = "data:" + type;
+				if (blob.encoding === "base64") {
+					return data_URI_header + ";base64," + blob.data;
+				} else if (blob.encoding === "URI") {
+					return data_URI_header + "," + decodeURIComponent(blob.data);
+				} if (btoa) {
+					return data_URI_header + ";base64," + btoa(blob.data);
+				} else {
+					return data_URI_header + "," + encodeURIComponent(blob.data);
+				}
+			} else if (real_create_object_URL) {
+				return real_create_object_URL.call(real_URL, blob);
+			}
+		};
+		URL.revokeObjectURL = function(object_URL) {
+			if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+				real_revoke_object_URL.call(real_URL, object_URL);
+			}
+		};
+		FBB_proto.append = function(data/*, endings*/) {
+			var bb = this.data;
+			// decode data to a binary string
+			if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+				var
+					  str = ""
+					, buf = new Uint8Array(data)
+					, i = 0
+					, buf_len = buf.length
+				;
+				for (; i < buf_len; i++) {
+					str += String.fromCharCode(buf[i]);
+				}
+				bb.push(str);
+			} else if (get_class(data) === "Blob" || get_class(data) === "File") {
+				if (FileReaderSync) {
+					var fr = new FileReaderSync;
+					bb.push(fr.readAsBinaryString(data));
+				} else {
+					// async FileReader won't work as BlobBuilder is sync
+					throw new FileException("NOT_READABLE_ERR");
+				}
+			} else if (data instanceof FakeBlob) {
+				if (data.encoding === "base64" && atob) {
+					bb.push(atob(data.data));
+				} else if (data.encoding === "URI") {
+					bb.push(decodeURIComponent(data.data));
+				} else if (data.encoding === "raw") {
+					bb.push(data.data);
+				}
+			} else {
+				if (typeof data !== "string") {
+					data += ""; // convert unsupported types to strings
+				}
+				// decode UTF-16 to binary string
+				bb.push(unescape(encodeURIComponent(data)));
+			}
+		};
+		FBB_proto.getBlob = function(type) {
+			if (!arguments.length) {
+				type = null;
+			}
+			return new FakeBlob(this.data.join(""), type, "raw");
+		};
+		FBB_proto.toString = function() {
+			return "[object BlobBuilder]";
+		};
+		FB_proto.slice = function(start, end, type) {
+			var args = arguments.length;
+			if (args < 3) {
+				type = null;
+			}
+			return new FakeBlob(
+				  this.data.slice(start, args > 1 ? end : this.data.length)
+				, type
+				, this.encoding
+			);
+		};
+		FB_proto.toString = function() {
+			return "[object Blob]";
+		};
+		return FakeBlobBuilder;
+	}(view));
+
+	return function Blob(blobParts, options) {
+		var type = options ? (options.type || "") : "";
+		var builder = new BlobBuilder();
+		if (blobParts) {
+			for (var i = 0, len = blobParts.length; i < len; i++) {
+				builder.append(blobParts[i]);
+			}
+		}
+		return builder.getBlob(type);
+	};
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

docs/assets/js/vendor/filesaver.js

@@ -1,173 +1,6 @@
-/* Blob.js
- * A Blob implementation.
- * 2013-06-20
- *
- * By Eli Grey, http://eligrey.com
- * By Devin Samarin, https://github.com/eboyjr
- * License: X11/MIT
- *   See LICENSE.md
- */
-
-/*global self, unescape */
-/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
-  plusplus: true */
-
-/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
-
-if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
-if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
-else var Blob = (function (view) {
-	"use strict";
-
-	var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
-		var
-			  get_class = function(object) {
-				return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-			}
-			, FakeBlobBuilder = function BlobBuilder() {
-				this.data = [];
-			}
-			, FakeBlob = function Blob(data, type, encoding) {
-				this.data = data;
-				this.size = data.length;
-				this.type = type;
-				this.encoding = encoding;
-			}
-			, FBB_proto = FakeBlobBuilder.prototype
-			, FB_proto = FakeBlob.prototype
-			, FileReaderSync = view.FileReaderSync
-			, FileException = function(type) {
-				this.code = this[this.name = type];
-			}
-			, file_ex_codes = (
-				  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
-				+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-			).split(" ")
-			, file_ex_code = file_ex_codes.length
-			, real_URL = view.URL || view.webkitURL || view
-			, real_create_object_URL = real_URL.createObjectURL
-			, real_revoke_object_URL = real_URL.revokeObjectURL
-			, URL = real_URL
-			, btoa = view.btoa
-			, atob = view.atob
-
-			, ArrayBuffer = view.ArrayBuffer
-			, Uint8Array = view.Uint8Array
-		;
-		FakeBlob.fake = FB_proto.fake = true;
-		while (file_ex_code--) {
-			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
-		}
-		if (!real_URL.createObjectURL) {
-			URL = view.URL = {};
-		}
-		URL.createObjectURL = function(blob) {
-			var
-				  type = blob.type
-				, data_URI_header
-			;
-			if (type === null) {
-				type = "application/octet-stream";
-			}
-			if (blob instanceof FakeBlob) {
-				data_URI_header = "data:" + type;
-				if (blob.encoding === "base64") {
-					return data_URI_header + ";base64," + blob.data;
-				} else if (blob.encoding === "URI") {
-					return data_URI_header + "," + decodeURIComponent(blob.data);
-				} if (btoa) {
-					return data_URI_header + ";base64," + btoa(blob.data);
-				} else {
-					return data_URI_header + "," + encodeURIComponent(blob.data);
-				}
-			} else if (real_create_object_URL) {
-				return real_create_object_URL.call(real_URL, blob);
-			}
-		};
-		URL.revokeObjectURL = function(object_URL) {
-			if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
-				real_revoke_object_URL.call(real_URL, object_URL);
-			}
-		};
-		FBB_proto.append = function(data/*, endings*/) {
-			var bb = this.data;
-			// decode data to a binary string
-			if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
-				var
-					  str = ""
-					, buf = new Uint8Array(data)
-					, i = 0
-					, buf_len = buf.length
-				;
-				for (; i < buf_len; i++) {
-					str += String.fromCharCode(buf[i]);
-				}
-				bb.push(str);
-			} else if (get_class(data) === "Blob" || get_class(data) === "File") {
-				if (FileReaderSync) {
-					var fr = new FileReaderSync;
-					bb.push(fr.readAsBinaryString(data));
-				} else {
-					// async FileReader won't work as BlobBuilder is sync
-					throw new FileException("NOT_READABLE_ERR");
-				}
-			} else if (data instanceof FakeBlob) {
-				if (data.encoding === "base64" && atob) {
-					bb.push(atob(data.data));
-				} else if (data.encoding === "URI") {
-					bb.push(decodeURIComponent(data.data));
-				} else if (data.encoding === "raw") {
-					bb.push(data.data);
-				}
-			} else {
-				if (typeof data !== "string") {
-					data += ""; // convert unsupported types to strings
-				}
-				// decode UTF-16 to binary string
-				bb.push(unescape(encodeURIComponent(data)));
-			}
-		};
-		FBB_proto.getBlob = function(type) {
-			if (!arguments.length) {
-				type = null;
-			}
-			return new FakeBlob(this.data.join(""), type, "raw");
-		};
-		FBB_proto.toString = function() {
-			return "[object BlobBuilder]";
-		};
-		FB_proto.slice = function(start, end, type) {
-			var args = arguments.length;
-			if (args < 3) {
-				type = null;
-			}
-			return new FakeBlob(
-				  this.data.slice(start, args > 1 ? end : this.data.length)
-				, type
-				, this.encoding
-			);
-		};
-		FB_proto.toString = function() {
-			return "[object Blob]";
-		};
-		return FakeBlobBuilder;
-	}(view));
-
-	return function Blob(blobParts, options) {
-		var type = options ? (options.type || "") : "";
-		var builder = new BlobBuilder();
-		if (blobParts) {
-			for (var i = 0, len = blobParts.length; i < len; i++) {
-				builder.append(blobParts[i]);
-			}
-		}
-		return builder.getBlob(type);
-	};
-}(self));
-
 /* FileSaver.js
  * A saveAs() FileSaver implementation.
- * 2013-10-21
+ * 2014-01-24
  *
  * By Eli Grey, http://eligrey.com
  * License: X11/MIT
@@ -181,9 +14,15 @@ else var Blob = (function (view) {
 /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
 
 var saveAs = saveAs
-  || (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // IE 10+ (native saveAs)
+  || (navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // Everyone else
   || (function(view) {
 	"use strict";
+	// IE <10 is explicitly unsupported
+	if (/MSIE [1-9]\./.test(navigator.userAgent)) {
+		return;
+	}
 	var
 		  doc = view.document
 		  // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
@@ -391,9 +230,13 @@ var saveAs = saveAs
 
 	view.addEventListener("unload", process_deletion_queue, false);
 	return saveAs;
-}(this.self || this.window || this.content));
+}(
+	   typeof self !== "undefined" && self
+	|| typeof window !== "undefined" && window
+	|| this.content
+));
 // `self` is undefined in Firefox for Android content script context
 // while `this` is nsIContentFrameMessageManager
 // with an attribute `content` that corresponds to the window
 
-if (typeof module !== 'undefined') module.exports = saveAs;
+if (typeof module !== "undefined") module.exports = saveAs;

docs/assets/js/vendor/holder.js

@@ -1,35 +1,43 @@
-/*
+/*!
 
-Holder - 2.2 - client side image placeholders
+Holder - 2.3.1 - client side image placeholders
-(c) 2012-2013 Ivan Malopinsky / http://imsky.co
+(c) 2012-2014 Ivan Malopinsky / http://imsky.co
 
 Provided under the MIT License.
 Commercial use requires attribution.
 
 */
-
 var Holder = Holder || {};
 (function (app, win) {
-
+var system_config = {
-var preempted = false,
+	use_svg: false,
-fallback = false,
+	use_canvas: false,
+	use_fallback: false
+};
+var instance_config = {};
+var preempted = false;
 canvas = document.createElement('canvas');
 var dpr = 1, bsr = 1;
 var resizable_images = [];
 
 if (!canvas.getContext) {
-	fallback = true;
+	system_config.use_fallback = true;
 } else {
 	if (canvas.toDataURL("image/png")
 		.indexOf("data:image/png") < 0) {
 		//Android doesn't support data URI
-		fallback = true;
+		system_config.use_fallback = true;
 	} else {
 		var ctx = canvas.getContext("2d");
 	}
 }
 
-if(!fallback){
+if(!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect){
+	system_config.use_svg = true;
+	system_config.use_canvas = false;
+}
+
+if(!system_config.use_fallback){
     dpr = window.devicePixelRatio || 1,
     bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
 }
@@ -129,46 +137,6 @@ app.flags = {
 	}
 }
 
-//getElementsByClassName polyfill
-document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
-
-//getComputedStyle polyfill
-window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
-
-//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
-function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
-
-//https://gist.github.com/991057 by Jed Schmidt with modifications
-function selector(a){
-	a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
-	var ret=[];	b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]);	return ret;
-}
-
-//shallow object property extend
-function extend(a,b){
-	var c={};
-	for(var i in a){
-		if(a.hasOwnProperty(i)){
-			c[i]=a[i];
-		}
-	}
-	for(var i in b){
-		if(b.hasOwnProperty(i)){
-			c[i]=b[i];
-		}
-	}
-	return c
-}
-
-//hasOwnProperty polyfill
-if (!Object.prototype.hasOwnProperty)
-    /*jshint -W001, -W103 */
-    Object.prototype.hasOwnProperty = function(prop) {
-		var proto = this.__proto__ || this.constructor.prototype;
-		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
-	}
-    /*jshint +W001, +W103 */
-
 function text_size(width, height, template) {
 	height = parseInt(height, 10);
 	width = parseInt(width, 10);
@@ -181,20 +149,68 @@ function text_size(width, height, template) {
 	}
 }
 
-function draw(args) {
+var svg_el = (function(){
-	var ctx = args.ctx;
+	//Prevent IE <9 from initializing SVG renderer
-	var dimensions = args.dimensions;
+	if(!window.XMLSerializer) return;
-	var template = args.template;
+	var serializer = new XMLSerializer();
-	var ratio = args.ratio;
+	var svg_ns = "http://www.w3.org/2000/svg"
-	var holder = args.holder;
+	var svg = document.createElementNS(svg_ns, "svg");
-	var literal = holder.textmode == "literal";
+	//IE throws an exception if this is set and Chrome requires it to be set
-	var exact = holder.textmode == "exact";
+	if(svg.webkitMatchesSelector){
+		svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+	}
+	var bg_el = document.createElementNS(svg_ns, "rect")
+	var text_el = document.createElementNS(svg_ns, "text")
+	var textnode_el = document.createTextNode(null)
+	text_el.setAttribute("text-anchor", "middle")
+	text_el.appendChild(textnode_el)
+	svg.appendChild(bg_el)
+	svg.appendChild(text_el)
+
+	return function(props){
+		svg.setAttribute("width",props.width);
+		svg.setAttribute("height", props.height);
+		bg_el.setAttribute("width", props.width);
+		bg_el.setAttribute("height", props.height);
+		bg_el.setAttribute("fill", props.template.background);
+		text_el.setAttribute("x", props.width/2)
+		text_el.setAttribute("y", props.height/2)
+		textnode_el.nodeValue=props.text
+		text_el.setAttribute("style", css_properties({
+		"fill": props.template.foreground,
+		"font-weight": "bold",
+		"font-size": props.text_height+"px",
+		"font-family":props.font,
+		"dominant-baseline":"central"
+		}))
+		return serializer.serializeToString(svg)
+	}
+})()
+
+function css_properties(props){
+	var ret = [];
+	for(p in props){
+		if(props.hasOwnProperty(p)){
+			ret.push(p+":"+props[p])
+		}
+	}
+	return ret.join(";")
+}
+
+function draw_canvas(args) {
+	var ctx = args.ctx,
+		dimensions = args.dimensions,
+		template = args.template,
+		ratio = args.ratio,
+		holder = args.holder,
+		literal = holder.textmode == "literal",
+		exact = holder.textmode == "exact";
 
 	var ts = text_size(dimensions.width, dimensions.height, template);
 	var text_height = ts.height;
 	var width = dimensions.width * ratio,
 		height = dimensions.height * ratio;
-	var font = template.font ? template.font : "sans-serif";
+	var font = template.font ? template.font : "Arial,Helvetica,sans-serif";
 	canvas.width = width;
 	canvas.height = height;
 	ctx.textAlign = "center";
@@ -222,8 +238,50 @@ function draw(args) {
 	return canvas.toDataURL("image/png");
 }
 
-function render(mode, el, holder, src) {
+function draw_svg(args){
+	var dimensions = args.dimensions,
+		template = args.template,
+		holder = args.holder,
+		literal = holder.textmode == "literal",
+		exact = holder.textmode == "exact";
 
+	var ts = text_size(dimensions.width, dimensions.height, template);
+	var text_height = ts.height;
+	var width = dimensions.width,
+		height = dimensions.height;
+		
+	var font = template.font ? template.font : "Arial,Helvetica,sans-serif";
+	var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
+	
+	if (literal) {
+		var dimensions = holder.dimensions;
+		text = dimensions.width + "x" + dimensions.height;
+	}
+	else if(exact && holder.exact_dimensions){
+		var dimensions = holder.exact_dimensions;
+		text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
+	}
+	var string = svg_el({
+		text: text, 
+		width:width, 
+		height:height, 
+		text_height:text_height, 
+		font:font, 
+		template:template
+	})
+	return "data:image/svg+xml;base64,"+btoa(string);
+}
+
+function draw(args) {
+	if(instance_config.use_canvas && !instance_config.use_svg){
+		return draw_canvas(args);
+	}
+	else{
+		return draw_svg(args);
+	}
+}
+
+function render(mode, el, holder, src) {
 	var dimensions = holder.dimensions,
 		theme = holder.theme,
 		text = holder.text ? decodeURIComponent(holder.text) : holder.text;
@@ -240,11 +298,11 @@ function render(mode, el, holder, src) {
 	
 	if (mode == "image") {
 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
-		if (fallback || !holder.auto) {
+		if (instance_config.use_fallback || !holder.auto) {
 			el.style.width = dimensions.width + "px";
 			el.style.height = dimensions.height + "px";
 		}
-		if (fallback) {
+		if (instance_config.use_fallback) {
 			el.style.backgroundColor = theme.background;
 		} else {
 			el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
@@ -256,7 +314,7 @@ function render(mode, el, holder, src) {
 			
 		}
 	} else if (mode == "background") {
-		if (!fallback) {
+		if (!instance_config.use_fallback) {
 			el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
 			el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
 		}
@@ -264,18 +322,21 @@ function render(mode, el, holder, src) {
 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
 		if (dimensions.height.slice(-1) == "%") {
 			el.style.height = dimensions.height
-		} else {
+		} else if(holder.auto == null || !holder.auto){
 			el.style.height = dimensions.height + "px"
 		}
 		if (dimensions.width.slice(-1) == "%") {
 			el.style.width = dimensions.width
-		} else {
+		} else if(holder.auto == null || !holder.auto){
 			el.style.width = dimensions.width + "px"
 		}
 		if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
 			el.style.display = "block";
 		}
-		if (fallback) {
+		
+		set_initial_dimensions(el)
+		
+		if (instance_config.use_fallback) {
 			el.style.backgroundColor = theme.background;
 		} else {
 			resizable_images.push(el);
@@ -290,20 +351,37 @@ function dimension_check(el, callback) {
 		width: el.clientWidth
 	};
 	if (!dimensions.height && !dimensions.width) {
-		if (el.hasAttribute("data-holder-invisible")) {
-			throw new Error("Holder: placeholder is not visible");
-		} else {
 		el.setAttribute("data-holder-invisible", true)
-			setTimeout(function () {
 		callback.call(this, el)
-			}, 1)
-			return null;
 	}
-	} else {
+	else{
 		el.removeAttribute("data-holder-invisible")
-	}
 		return dimensions;
 	}
+}
+
+function set_initial_dimensions(el){
+	if(el.holder_data){
+		var dimensions = dimension_check(el, app.invisible_error_fn( set_initial_dimensions))
+		if(dimensions){
+			var holder = el.holder_data;
+			holder.initial_dimensions = dimensions;
+			holder.fluid_data = {
+				fluid_height: holder.dimensions.height.slice(-1) == "%",
+				fluid_width: holder.dimensions.width.slice(-1) == "%",
+				mode: null
+			}
+			if(holder.fluid_data.fluid_width && !holder.fluid_data.fluid_height){
+				holder.fluid_data.mode = "width"
+				holder.fluid_data.ratio = holder.initial_dimensions.width / parseFloat(holder.dimensions.height)
+			}
+			else if(!holder.fluid_data.fluid_width && holder.fluid_data.fluid_height){
+				holder.fluid_data.mode = "height";
+				holder.fluid_data.ratio = parseFloat(holder.dimensions.width) / holder.initial_dimensions.height
+			}
+		}
+	}
+}
 
 function resizable_update(element) {
 	var images;
@@ -319,9 +397,19 @@ function resizable_update(element) {
 		var el = images[i]
 		if (el.holder_data) {
 			var holder = el.holder_data;
-			var dimensions = dimension_check(el, resizable_update)
+			var dimensions = dimension_check(el, app.invisible_error_fn( resizable_update))
 			if(dimensions){
 				if(holder.fluid){
+					if(holder.auto){
+						switch(holder.fluid_data.mode){
+							case "width":
+								dimensions.height = dimensions.width / holder.fluid_data.ratio;
+							break;
+							case "height":
+								dimensions.width = dimensions.height * holder.fluid_data.ratio;
+							break;
+						}
+					}
 					el.setAttribute("src", draw({
 						ctx: ctx,
 						dimensions: dimensions,
@@ -350,7 +438,7 @@ function parse_flags(flags, options) {
 		theme: extend(settings.themes.gray, {})
 	};
 	var render = false;
-	for (sl = flags.length, j = 0; j < sl; j++) {
+	for (var fl = flags.length, j = 0; j < fl; j++) {
 		var flag = flags[j];
 		if (app.flags.dimensions.match(flag)) {
 			render = true;
@@ -385,10 +473,20 @@ for (var flag in app.flags) {
 		return val.match(this.regex)
 	}
 }
+
+app.invisible_error_fn = function(fn){
+	return function(el){
+		if(el.hasAttribute("data-holder-invisible")){
+			throw new Error("Holder: invisible placeholder")
+		}
+	}
+}
+
 app.add_theme = function (name, theme) {
 	name != null && theme != null && (settings.themes[name] = theme);
 	return app;
 };
+
 app.add_image = function (src, el) {
 	var node = selector(el);
 	if (node.length) {
@@ -400,19 +498,29 @@ app.add_image = function (src, el) {
 	}
 	return app;
 };
+
 app.run = function (o) {
+	instance_config = extend({}, system_config)
 	preempted = true;
 
 	var options = extend(settings, o),
 		images = [],
 		imageNodes = [],
 		bgnodes = [];
+		
+	if(options.use_canvas != null && options.use_canvas){
+		instance_config.use_canvas = true;
+		instance_config.use_svg = false;
+	}
+		
 	if (typeof (options.images) == "string") {
 		imageNodes = selector(options.images);
 	} else if (window.NodeList && options.images instanceof window.NodeList) {
 		imageNodes = options.images;
 	} else if (window.Node && options.images instanceof window.Node) {
 		imageNodes = [options.images];
+	} else if(window.HTMLCollection && options.images instanceof window.HTMLCollection){
+		imageNodes = options.images
 	}
 
 	if (typeof (options.bgnodes) == "string") {
@@ -469,8 +577,7 @@ app.run = function (o) {
 			src = attr_datasrc;
 		}
 		if (src) {
-			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
+			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1).split("/"), options);
-				.split("/"), options);
 			if (holder) {
 				if (holder.fluid) {
 					render("fluid", images[i], holder, src)
@@ -482,6 +589,7 @@ app.run = function (o) {
 	}
 	return app;
 };
+
 contentLoaded(win, function () {
 	if (window.addEventListener) {
 		window.addEventListener("resize", resizable_update, false);
@@ -489,7 +597,7 @@ contentLoaded(win, function () {
 	} else {
 		window.attachEvent("onresize", resizable_update)
 	}
-	preempted || app.run();
+	preempted || app.run({});
 });
 if (typeof define === "function" && define.amd) {
 	define([], function () {
@@ -497,4 +605,44 @@ if (typeof define === "function" && define.amd) {
 	});
 }
 
+//github.com/davidchambers/Base64.js
+(function(){function t(t){this.message=t}var e="undefined"!=typeof exports?exports:this,r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t.prototype=Error(),t.prototype.name="InvalidCharacterError",e.btoa||(e.btoa=function(e){for(var o,n,a=0,i=r,c="";e.charAt(0|a)||(i="=",a%1);c+=i.charAt(63&o>>8-8*(a%1))){if(n=e.charCodeAt(a+=.75),n>255)throw new t("'btoa' failed");o=o<<8|n}return c}),e.atob||(e.atob=function(e){if(e=e.replace(/=+$/,""),1==e.length%4)throw new t("'atob' failed");for(var o,n,a=0,i=0,c="";n=e.charAt(i++);~n&&(o=a%4?64*o+n:n,a++%4)?c+=String.fromCharCode(255&o>>(6&-2*a)):0)n=r.indexOf(n);return c})})();
+
+//getElementsByClassName polyfill
+document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
+
+//getComputedStyle polyfill
+window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
+
+//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
+function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
+
+//https://gist.github.com/991057 by Jed Schmidt with modifications
+function selector(a,b){var a=a.match(/^(\W)?(.*)/),b=b||document,c=b["getElement"+(a[1]?"#"==a[1]?"ById":"sByClassName":"sByTagName")],d=c.call(b,a[2]),e=[];return null!==d&&(e=d.length||0===d.length?d:[d]),e}
+
+//shallow object property extend
+function extend(a,b){
+	var c={};
+	for(var i in a){
+		if(a.hasOwnProperty(i)){
+			c[i]=a[i];
+		}
+	}
+	for(var i in b){
+		if(b.hasOwnProperty(i)){
+			c[i]=b[i];
+		}
+	}
+	return c
+}
+
+//hasOwnProperty polyfill
+if (!Object.prototype.hasOwnProperty)
+    /*jshint -W001, -W103 */
+    Object.prototype.hasOwnProperty = function(prop) {
+		var proto = this.__proto__ || this.constructor.prototype;
+		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
+	}
+    /*jshint +W001, +W103 */
+
 })(Holder, window);

docs/assets/js/vendor/uglify.min.js

@@ -1,4 +1,4 @@
-/** @license uglifyweb Copyright (c) 2011, The Dojo Foundation All Rights Reserved.
+/*! @license uglifyweb Copyright (c) 2011, The Dojo Foundation All Rights Reserved.
  * The parts that are unique to this repo (not much, just some wrapper code) are
  * released under the new BSD and MIT licenses.
  *

docs/components.html

@@ -2,19 +2,17 @@
 layout: default
 title: Components
 slug: components
-lead: "Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more."
+lead: "Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more."
 ---
 
 
 <!-- Glyphicons
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="glyphicons" class="page-header">Glyphicons</h1>
-      <h1 id="glyphicons">Glyphicons</h1>
-    </div>
 
   <h2 id="glyphicons-glyphs">Available glyphs</h2>
-    <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
+  <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
   <div class="bs-glyphicons">
     <ul class="bs-glyphicons-list">
       {% for iconClassName in site.data.glyphicons %}
@@ -31,7 +29,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
   <div class="bs-callout bs-callout-danger">
     <h4>Don't mix with other components</h4>
-      <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
+    <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
   </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
@@ -61,16 +59,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <span class="glyphicon glyphicon-star"></span> Star
 </button>
 {% endhighlight %}
-
 </div>
 
 
+
 <!-- Dropdowns
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="dropdowns" class="page-header">Dropdowns</h1>
-      <h1 id="dropdowns">Dropdowns</h1>
+
-    </div>
   <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
 
   <h3 id="dropdowns-example">Example</h3>
@@ -114,7 +111,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Deprecated <code>.pull-right</code> alignment</h4>
-      <p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
+    <p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
   </div>
 {% highlight html %}
 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
@@ -180,12 +177,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 <!-- Button Groups
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="btn-groups" class="page-header">Button groups</h1>
-      <h1 id="btn-groups">Button groups</h1>
+
-    </div>
   <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
 
-    <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning">
     <h4>Tooltips &amp; popovers in button groups require special setting</h4>
     <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
   </div>
@@ -367,19 +363,16 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
-    <h3 id="btn-groups-justified">Justified link variation</h3>
+  <h3 id="btn-groups-justified">Justified button groups</h3>
-    <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
+  <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
 
   <div class="bs-callout bs-callout-warning">
     <h4>Handling borders</h4>
     <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
   </div>
 
-    <div class="bs-callout bs-callout-warning">
+  <h4>With <code>&lt;a&gt;</code> elements</h4>
-      <h4>Element-specific usage</h4>
+  <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
-      <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>
-    </div>
-
   <div class="bs-example">
     <div class="btn-group btn-group-justified">
       <a class="btn btn-default" role="button">Left</a>
@@ -410,6 +403,34 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
+  <h4>With <code>&lt;button&gt;</code> elements</h4>
+  <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p>
+  <div class="bs-example">
+    <div class="btn-group btn-group-justified">
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Left</button>
+      </div>
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Middle</button>
+      </div>
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="btn-group btn-group-justified">
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Left</button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Middle</button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-default">Right</button>
+  </div>
+</div>
+{% endhighlight %}
 </div>
 
 
@@ -417,9 +438,8 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 <!-- Split button dropdowns
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1>
-      <h1 id="btn-dropdowns">Button dropdowns</h1>
+
-    </div>
   <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
 
   <div class="bs-callout bs-callout-danger">
@@ -737,31 +757,28 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   </ul>
 </div>
 {% endhighlight %}
-
 </div>
 
 
 
-
 <!-- Input groups
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="input-groups" class="page-header">Input groups</h1>
-      <h1 id="input-groups">Input groups</h1>
+
-    </div>
   <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
 
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
     <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
   </div>
-    <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning">
     <h4>Tooltips &amp; popovers in input groups require special setting</h4>
     <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
   </div>
-    <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning">
     <h4>Don't mix with other components</h4>
-      <p>Do not mix form group or grid column classes directly with input groups.</p>
+    <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
   </div>
 
 
@@ -804,7 +821,6 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
-
   <h2 id="input-groups-sizing">Sizing</h2>
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
   <form class="bs-example bs-example-form" role="form">
@@ -1057,7 +1073,6 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   </div>
 </div>
 {% endhighlight %}
-
 </div>
 
 
@@ -1065,9 +1080,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 <!-- Navs
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="nav" class="page-header">Navs</h1>
-      <h1 id="nav">Navs</h1>
-    </div>
 
   <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
 
@@ -1127,7 +1140,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
   <div class="bs-callout bs-callout-warning">
     <h4>Safari and responsive justified navs</h4>
-      <p>Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
+    <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
   </div>
   <div class="bs-example">
     <ul class="nav nav-tabs nav-justified">
@@ -1153,7 +1166,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 
 
   <h2 id="nav-disabled-links">Disabled links</h2>
-    <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
+  <p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
 
   <div class="bs-callout bs-callout-warning">
     <h4>Link functionality not impacted</h4>
@@ -1246,7 +1259,6 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   ...
 </ul>
 {% endhighlight %}
-
 </div>
 
 
@@ -1254,16 +1266,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 <!-- Navbar
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="navbar" class="page-header">Navbar</h1>
-      <h1 id="navbar">Navbar</h1>
-    </div>
 
   <h2 id="navbar-default">Default navbar</h2>
   <p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
 
-    <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
-      <h4>Customize the collapsing point</h4>
+    <h4>Overflowing content</h4>
-      <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>
+    <p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
+    <ol type="a">
+      <li>Reduce the amount or width of navbar items.</li>
+      <li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
+      <li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
+    </ol>
   </div>
   <div class="bs-callout bs-callout-danger">
     <h4>Requires JavaScript</h4>
@@ -1432,7 +1447,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
     <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
   </div>
 
-    <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>
@@ -1559,7 +1574,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <div class="bs-callout bs-callout-danger">
     <h4>Body padding required</h4>
     <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
-{% highlight css %}
+{% highlight scss %}
 body { padding-top: 70px; }
 {% endhighlight %}
     <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
@@ -1603,7 +1618,7 @@ body { padding-top: 70px; }
   <div class="bs-callout bs-callout-danger">
     <h4>Body padding required</h4>
     <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
-{% highlight css %}
+{% highlight scss %}
 body { padding-bottom: 70px; }
 {% endhighlight %}
     <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
@@ -1679,7 +1694,6 @@ body { padding-bottom: 70px; }
   ...
 </nav>
 {% endhighlight %}
-
 </div>
 
 
@@ -1687,9 +1701,8 @@ body { padding-bottom: 70px; }
 <!-- Breadcrumbs
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="breadcrumbs" class="page-header">Breadcrumbs</h1>
-      <h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
+
-    </div>
   <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
   <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
   <div class="bs-example">
@@ -1720,9 +1733,8 @@ body { padding-bottom: 70px; }
 <!-- Pagination
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="pagination" class="page-header">Pagination</h1>
-      <h1 id="pagination">Pagination</h1>
+
-    </div>
   <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
 
   <h2 id="pagination-default">Default pagination</h2>
@@ -1879,10 +1891,7 @@ body { padding-bottom: 70px; }
 <!-- Labels
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="labels" class="page-header">Labels</h1>
-      <h1 id="labels">Labels</h1>
-    </div>
-    <p class="lead"></p>
 
   <h3>Example</h3>
   <div class="bs-example">
@@ -1915,7 +1924,6 @@ body { padding-bottom: 70px; }
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
 {% endhighlight %}
-
 </div>
 
 
@@ -1923,9 +1931,8 @@ body { padding-bottom: 70px; }
 <!-- Badges
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="badges" class="page-header">Badges</h1>
-      <h1 id="badges">Badges</h1>
+
-    </div>
   <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
 
   <div class="bs-example">
@@ -1944,7 +1951,7 @@ body { padding-bottom: 70px; }
   </div>
 
   <h4>Adapts to active nav states</h4>
-    <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
+  <p>Built-in styles are included for placing badges in active states in pill navigations.</p>
   <div class="bs-example">
     <ul class="nav nav-pills">
       <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
@@ -1990,9 +1997,8 @@ body { padding-bottom: 70px; }
 <!-- Jumbotron
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="jumbotron" class="page-header">Jumbotron</h1>
-      <h1 id="jumbotron">Jumbotron</h1>
+
-    </div>
   <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
   <div class="bs-example">
     <div class="jumbotron">
@@ -2016,7 +2022,6 @@ body { padding-bottom: 70px; }
   </div>
 </div>
 {% endhighlight %}
-
 </div>
 
 
@@ -2024,9 +2029,8 @@ body { padding-bottom: 70px; }
 <!-- Page header
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="page-header" class="page-header">Page header</h1>
-      <h1 id="page-header">Page header</h1>
+
-    </div>
   <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
   <div class="bs-example">
     <div class="page-header">
@@ -2045,9 +2049,8 @@ body { padding-bottom: 70px; }
 <!-- Thumbnails
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="thumbnails" class="page-header">Thumbnails</h1>
-      <h1 id="thumbnails">Thumbnails</h1>
+
-    </div>
   <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
 
   <h3 id="thumbnails-default">Default example</h3>
@@ -2141,13 +2144,11 @@ body { padding-bottom: 70px; }
 
 
 
-
 <!-- Alerts
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="alerts" class="page-header">Alerts</h1>
-      <h1 id="alerts">Alerts</h1>
+
-    </div>
   <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
 
   <h2 id="alerts-examples">Examples</h2>
@@ -2233,13 +2234,11 @@ body { padding-bottom: 70px; }
 
 
 
-
 <!-- Progress bars
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="progress" class="page-header">Progress bars</h1>
-      <h1 id="progress">Progress bars</h1>
+
-    </div>
   <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
   <div class="bs-callout bs-callout-danger">
@@ -2262,6 +2261,23 @@ body { padding-bottom: 70px; }
     <span class="sr-only">60% Complete</span>
   </div>
 </div>
+{% endhighlight %}
+
+  <h3 id="progress-label">With label</h3>
+  <p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
+  <div class="bs-example">
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+        60%
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+    60%
+  </div>
+</div>
 {% endhighlight %}
 
   <h3 id="progress-alternatives">Contextual alternatives</h3>
@@ -2359,7 +2375,7 @@ body { padding-bottom: 70px; }
 {% endhighlight %}
 
   <h3 id="progress-animated">Animated</h3>
-    <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
+  <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
   <div class="bs-example">
     <div class="progress progress-striped active">
       <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
@@ -2405,13 +2421,11 @@ body { padding-bottom: 70px; }
 
 
 
-
 <!-- Media object
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="media" class="page-header">Media object</h1>
-      <h1 id="media">Media object</h1>
+
-    </div>
   <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
 
   <h3 id="media-default">Default media</h3>
@@ -2531,9 +2545,8 @@ body { padding-bottom: 70px; }
 <!-- List group
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="list-group" class="page-header">List group</h1>
-      <h1 id="list-group">List group</h1>
+
-    </div>
   <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
 
   <h3 id="list-group-basic">Basic example</h3>
@@ -2676,13 +2689,11 @@ body { padding-bottom: 70px; }
 
 
 
-
 <!-- Panels
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="panels" class="page-header">Panels</h1>
-      <h1 id="panels">Panels</h1>
+
-    </div>
   <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
 
   <h3 id="panels-basic">Basic example</h3>
@@ -2919,7 +2930,6 @@ body { padding-bottom: 70px; }
 {% endhighlight %}
 
 
-
   <h3 id="panels-list-group">With list groups</h3>
   <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
   <div class="bs-example">
@@ -2958,19 +2968,14 @@ body { padding-bottom: 70px; }
   </ul>
 </div>
 {% endhighlight %}
-
 </div>
 
 
 
-
-
 <!-- Wells
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="wells" class="page-header">Wells</h1>
-      <h1 id="wells">Wells</h1>
-    </div>
 
   <h3>Default well</h3>
   <p>Use the well as a simple effect on an element to give it an inset effect.</p>

docs/css.html

@@ -9,9 +9,8 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 <!-- Global Bootstrap settings
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="overview" class="page-header">Overview</h1>
-      <h1 id="overview">Overview</h1>
+
-    </div>
   <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
 
   <h3 id="overview-doctype">HTML5 doctype</h3>
@@ -27,17 +26,11 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
   <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
 {% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 {% endhighlight %}
-    <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
+  <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
 {% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-{% endhighlight %}
-
-    <h3 id="overview-responsive-images">Responsive images</h3>
-    <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
-{% highlight html %}
-<img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}
 
   <h3 id="overview-type-links">Typography and links</h3>
@@ -49,8 +42,8 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   </ul>
   <p>These styles can be found within <code>scaffolding.less</code>.</p>
 
-    <h3 id="overview-normalize">Normalize</h3>
+  <h3 id="overview-normalize">Normalize.css</h3>
-    <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
+  <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
 
   <h3 id="overview-container">Containers</h3>
   <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
@@ -67,9 +60,8 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 <!-- Grid system
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="grid" class="page-header">Grid system</h1>
-      <h1 id="grid">Grid system</h1>
+
-    </div>
   <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
 
   <h3 id="grid-intro">Introduction</h3>
@@ -84,14 +76,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   </ul>
   <p>Look to the examples for applying these principles to your code.</p>
 
-    <div class="bs-callout bs-callout-info">
-      <h4>Grids and full-width layouts</h4>
-      <p>Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with <code>padding: 0 15px;</code> to offset the <code>margin: 0 -15px;</code> used on <code>.row</code>s.</p>
-    </div>
-
   <h3 id="grid-media-queries">Media queries</h3>
   <p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
-{% highlight css %}
+{% highlight scss %}
 /* Extra small devices (phones, less than 768px) */
 /* No media query since this is the default in Bootstrap */
 
@@ -105,7 +92,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 @media (min-width: @screen-lg-min) { ... }
 {% endhighlight %}
   <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
-{% highlight css %}
+{% highlight scss %}
 @media (max-width: @screen-xs-max) { ... }
 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@@ -162,7 +149,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
           <td colspan="4">12</td>
         </tr>
         <tr>
-            <th>Max column width</th>
+          <th>Column width</th>
           <td class="text-muted">Auto</td>
           <td>60px</td>
           <td>78px</td>
@@ -357,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 </div>
 {% endhighlight %}
-    <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
+  <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
 {% highlight html %}
 <div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
@@ -451,7 +438,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 
   <h4>Variables</h4>
   <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
-{% highlight css %}
+{% highlight scss %}
 @grid-columns:              12;
 @grid-gutter-width:         30px;
 @grid-float-breakpoint:     768px;
@@ -459,7 +446,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 
   <h4>Mixins</h4>
   <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
-{% highlight css %}
+{% highlight scss %}
 // Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
   // Then clear the floated columns
@@ -595,7 +582,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 
   <h4>Example usage</h4>
   <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
-{% highlight css %}
+{% highlight scss %}
 .wrapper {
   .make-row();
 }
@@ -613,18 +600,14 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   <div class="content-secondary">...</div>
 </div>
 {% endhighlight %}
-
 </div>
 
 
 
-
 <!-- Typography
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="type" class="page-header">Typography</h1>
-      <h1 id="type">Typography</h1>
-    </div>
 
   <!-- Headings -->
   <h2 id="type-headings">Headings</h2>
@@ -736,7 +719,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 
   <h3>Small text</h3>
   <p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
-    <p>You may alternatively use an inline element with <code>.small</code> in place of any <code>&lt;small&gt;</code></p>
+  <p>You may alternatively use an inline element with <code>.small</code> in place of any <code>&lt;small&gt;</code>.</p>
   <div class="bs-example">
     <p><small>This line of text is meant to be treated as fine print.</small></p>
   </div>
@@ -873,7 +856,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 {% endhighlight %}
 
   <h4>Alternate displays</h4>
-    <p>Add <code>.blockquote-reverse</code> for blockquote with right-aligned content.</p>
+  <p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
   <div class="bs-example" style="overflow: hidden;">
     <blockquote class="blockquote-reverse">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -1028,12 +1011,11 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 </div>
 
 
+
 <!-- Code
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="code" class="page-header">Code</h1>
-      <h1 id="code">Code</h1>
-    </div>
 
   <h2 id="code-inline">Inline</h2>
   <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
@@ -1047,10 +1029,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <h2 id="code-user-input">User input</h2>
   <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
 <div class="bs-example">
-  To switch directories, type <kbd>cd</kbd> followed the name of the directory.
+  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 </div>
 {% highlight html %}
-  To switch directories, type <kbd>cd</kbd> followed the name of the directory.
+  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 {% endhighlight %}
 
   <h2 id="code-block">Basic block</h2>
@@ -1070,9 +1052,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <!-- Tables
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="tables" class="page-header">Tables</h1>
-      <h1 id="tables">Tables</h1>
-    </div>
 
   <h2 id="tables-example">Basic example</h2>
   <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
@@ -1520,7 +1500,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   </table>
 </div>
 {% endhighlight %}
-
 </div>
 
 
@@ -1528,9 +1507,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <!-- Forms
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="forms" class="page-header">Forms</h1>
-      <h1 id="forms">Forms</h1>
-    </div>
 
   <h2 id="forms-example">Basic example</h2>
   <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
@@ -1580,6 +1557,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
 {% endhighlight %}
+    <div class="bs-callout bs-callout-warning">
+      <h4>Don't mix form groups with input groups</h4>
+      <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+    </div>
 
 
   <h2 id="forms-inline">Inline form</h2>
@@ -1588,7 +1569,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Requires custom widths</h4>
     <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
   </div>
-    <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>
@@ -1877,7 +1858,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-
   <h2 id="forms-control-focus">Input focus</h2>
   <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
   <div class="bs-example">
@@ -2078,7 +2058,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-
   <h2 id="forms-control-sizes">Control sizing</h2>
   <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
 
@@ -2155,7 +2134,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
-
 </div>
 
 
@@ -2163,9 +2141,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <!-- Buttons
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="buttons" class="page-header">Buttons</h1>
-      <h1 id="buttons">Buttons</h1>
-    </div>
 
   <h2 id="buttons-options">Options</h2>
   <p>Use any of the available button classes to quickly create a styled button.</p>
@@ -2254,7 +2230,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
   <h2 id="buttons-active">Active state</h2>
-    <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
+  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
 
   <h3>Button element</h3>
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
@@ -2341,7 +2317,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
     <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
   </div>
-
 </div>
 
 
@@ -2349,10 +2324,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <!-- Images
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="images" class="page-header">Images</h1>
-      <h1 id="images">Images</h1>
-    </div>
 
+  <h2 id="images-responsive">Responsive images</h2>
+  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
+{% highlight html %}
+<img src="..." class="img-responsive" alt="Responsive image">
+{% endhighlight %}
+
+  <h2 id="images-shapes">Image shapes</h2>
   <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
@@ -2368,21 +2348,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." alt="..." class="img-circle">
 <img src="..." alt="..." class="img-thumbnail">
 {% endhighlight %}
-
-    <div class="bs-callout bs-callout-warning">
-      <h4>Responsive images</h4>
-      <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
 </div>
 
-  </div>
 
 
 <!-- Helpers
 ================================================== -->
 <div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="helper-classes" class="page-header">Helper classes</h1>
-      <h1 id="helper-classes">Helper classes</h1>
-    </div>
 
   <h3 id="helper-classes-colors">Contextual colors</h3>
   <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
@@ -2451,7 +2424,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="pull-left">...</div>
 <div class="pull-right">...</div>
 {% endhighlight %}
-{% highlight css %}
+{% highlight scss %}
 // Classes
 .pull-left {
   float: left !important;
@@ -2480,7 +2453,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <div class="center-block">...</div>
 {% endhighlight %}
-{% highlight css %}
+{% highlight scss %}
 // Classes
 .center-block {
   display: block;
@@ -2495,14 +2468,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-
   <h3 id="helper-classes-clearfix">Clearfix</h3>
   <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}
 <!-- Usage as a class -->
 <div class="clearfix">...</div>
 {% endhighlight %}
-{% highlight css %}
+{% highlight scss %}
 // Mixin itself
 .clearfix() {
   &:before,
@@ -2530,7 +2502,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="show">...</div>
 <div class="hidden">...</div>
 {% endhighlight %}
-{% highlight css %}
+{% highlight scss %}
 // Classes
 .show {
   display: block !important;
@@ -2558,7 +2530,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <a class="sr-only" href="#content">Skip to main content</a>
 {% endhighlight %}
-{% highlight css %}
+{% highlight scss %}
 // Usage as a Mixin
 .skip-navigation {
   .sr-only();
@@ -2571,7 +2543,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <h1 class="text-hide">Custom heading</h1>
 {% endhighlight %}
-  {% highlight css %}
+  {% highlight scss %}
 // Usage as a Mixin
 .heading {
   .text-hide();
@@ -2583,10 +2555,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 <!-- Responsive utilities
 ================================================== -->
-  <div class="bs-docs-section" id="responsive-utilities">
+<div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
-      <h1>Responsive utilities</h1>
+
-    </div>
   <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
   <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
 
@@ -2809,22 +2780,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
     </div>
   </div>
-
 </div>
 
 
 
 <!-- Using Less
 ================================================== -->
-  <div class="bs-docs-section" id="less">
+<div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="less" class="page-header">Using Less</h1>
-      <h1>Using Less</h1>
+
-    </div>
   <p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
 
   <p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
 
 
+  <h2 id="less-bootstrap">Compiling Bootstrap</h2>
+  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p>
+  <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
+
   <h2 id="less-variables">Variables</h2>
   <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
 
@@ -2839,7 +2812,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="color-swatch gray-lighter"></div>
     </div>
   </div>
-{% highlight css %}
+{% highlight scss %}
 @gray-darker:  lighten(#000, 13.5%); // #222
 @gray-dark:    lighten(#000, 20%);   // #333
 @gray:         lighten(#000, 33.5%); // #555
@@ -2856,7 +2829,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="color-swatch brand-danger"></div>
     </div>
   </div>
-{% highlight css %}
+{% highlight scss %}
 @brand-primary: #428bca;
 @brand-success: #5cb85c;
 @brand-info:    #5bc0de;
@@ -2865,7 +2838,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
   <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
-{% highlight css %}
+{% highlight scss %}
 // Use as-is
 .masthead {
   background-color: @brand-primary;
@@ -2880,7 +2853,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <h3 id="less-variables-scaffolding">Scaffolding</h3>
   <p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
-{% highlight css %}
+{% highlight scss %}
 // Scaffolding
 @body-bg:    #fff;
 @text-color: @black-50;
@@ -2888,7 +2861,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <h3 id="less-variables-links">Links</h3>
   <p>Easily style your links with the right color with only one value.</p>
-{% highlight css %}
+{% highlight scss %}
 // Variables
 @link-color:       @brand-primary;
 @link-color-hover: darken(@link-color, 15%);
@@ -2908,7 +2881,7 @@ a {
 
   <h3 id="less-variables-typography">Typography</h3>
   <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
-{% highlight css %}
+{% highlight scss %}
 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -2936,14 +2909,14 @@ a {
 
   <h3 id="less-variables-icons">Icons</h3>
   <p>Two quick variables for customizing the location and filename of your icons.</p>
-{% highlight css %}
+{% highlight scss %}
 @icon-font-path:          "../fonts/";
 @icon-font-name:          "glyphicons-halflings-regular";
 {% endhighlight %}
 
   <h3 id="less-variables-components">Components</h3>
   <p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
-{% highlight css %}
+{% highlight scss %}
 @padding-base-vertical:          6px;
 @padding-base-horizontal:        12px;
 
@@ -2972,12 +2945,12 @@ a {
 
 
   <h2 id="less-mixins-vendor">Vendor mixins</h2>
-    <p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
+  <p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.</p>
 
 
   <h3 id="less-mixins-box-sizing">Box-sizing</h3>
   <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
-{% highlight css %}
+{% highlight scss %}
 .box-sizing(@box-model) {
   -webkit-box-sizing: @box-model; // Safari <= 5
      -moz-box-sizing: @box-model; // Firefox <= 19
@@ -2987,7 +2960,7 @@ a {
 
   <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 Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
-{% highlight css %}
+{% highlight scss %}
 .border-top-radius(@radius) {
   border-top-right-radius: @radius;
    border-top-left-radius: @radius;
@@ -3007,9 +2980,10 @@ a {
 {% endhighlight %}
 
   <h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
-    <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the mixin to pick up the required <code>-webkit</code> prefix.</p>
+  <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the <strong>deprecated</strong> mixin to pick up the required <code>-webkit</code> prefix.</p>
+  <p>The mixin is <strong>deprecated</strong> as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
   <p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
-{% highlight css %}
+{% highlight scss %}
 .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
           box-shadow: @shadow;
@@ -3018,7 +2992,7 @@ a {
 
   <h3 id="less-mixins-transitions">Transitions</h3>
   <p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
-{% highlight css %}
+{% highlight scss %}
 .transition(@transition) {
   -webkit-transition: @transition;
           transition: @transition;
@@ -3044,8 +3018,8 @@ a {
 {% endhighlight %}
 
   <h3 id="less-mixins-transformations">Transformations</h3>
-    <p>Rorate, scale, translate (move), or skew any object.</p>
+  <p>Rotate, scale, translate (move), or skew any object.</p>
-{% highlight css %}
+{% highlight scss %}
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
       -ms-transform: rotate(@degrees); // IE9 only
@@ -3100,8 +3074,8 @@ a {
 {% endhighlight %}
 
   <h3 id="less-mixins-animations">Animations</h3>
-    <p>A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.</p>
+  <p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
-{% highlight css %}
+{% highlight scss %}
 .animation(@animation) {
   -webkit-animation: @animation;
           animation: @animation;
@@ -3134,7 +3108,7 @@ a {
 
   <h3 id="less-mixins-opacity">Opacity</h3>
   <p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
-{% highlight css %}
+{% highlight scss %}
 .opacity(@opacity) {
   opacity: @opacity;
   // IE8 filter
@@ -3145,7 +3119,7 @@ a {
 
   <h3 id="less-mixins-placeholder">Placeholder text</h3>
   <p>Provide context for form controls within each field.</p>
-{% highlight css %}
+{% highlight scss %}
 .placeholder(@color: @input-color-placeholder) {
   &:-moz-placeholder            { color: @color; } // Firefox 4-18
   &::-moz-placeholder           { color: @color; } // Firefox 19+
@@ -3156,7 +3130,7 @@ a {
 
   <h3 id="less-mixins-columns">Columns</h3>
   <p>Generate columns via CSS within a single element.</p>
-{% highlight css %}
+{% highlight scss %}
 .content-columns(@width; @count; @gap) {
   -webkit-column-width: @width;
      -moz-column-width: @width;
@@ -3172,25 +3146,25 @@ a {
 
   <h3 id="less-mixins-gradients">Gradients</h3>
   <p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
-{% highlight css %}
+{% highlight scss %}
 #gradient > .vertical(#333; #000);
 #gradient > .horizontal(#333; #000);
 #gradient > .radial(#333; #000);
 {% endhighlight %}
   <p>You can also specify the angle of a standard two-color, linear gradient:</p>
-{% highlight css %}
+{% highlight scss %}
 #gradient > .directional(#333; #000; 45deg);
 {% endhighlight %}
   <p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
-{% highlight css %}
+{% highlight scss %}
 #gradient > .striped(#333; #000; 45deg);
 {% endhighlight %}
   <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
-{% highlight css %}
+{% highlight scss %}
 #gradient > .vertical-three-colors(#777; #333; .25; #000);
 #gradient > .horizontal-three-colors(#777; #333; .25; #000);
 {% endhighlight %}
-    <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alignside <code>background-image: none;</code>.</p>
+  <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
 
 
   <h2 id="less-mixins-utility">Utility mixins</h2>
@@ -3198,7 +3172,7 @@ a {
 
   <h3 id="less-mixins-clearfix">Clearfix</h3>
   <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
-{% highlight css %}
+{% highlight scss %}
 // Mixin
 .clearfix() {
   &:before,
@@ -3219,7 +3193,7 @@ a {
 
   <h3 id="less-mixins-centering">Horizontal centering</h3>
   <p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
-{% highlight css %}
+{% highlight scss %}
 // Mixin
 .center-block() {
   display: block;
@@ -3236,7 +3210,7 @@ a {
 
   <h3 id="less-mixins-sizing">Sizing helpers</h3>
   <p>Specify the dimensions of an object more easily.</p>
-{% highlight css %}
+{% highlight scss %}
 // Mixins
 .size(@width; @height) {
   width: @width;
@@ -3253,7 +3227,7 @@ a {
 
   <h3 id="less-mixins-resizable">Resizable textareas</h3>
   <p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
-{% highlight css %}
+{% highlight scss %}
 .resizable(@direction: both) {
   // Options: horizontal, vertical, both
   resize: @direction;
@@ -3264,9 +3238,9 @@ a {
 
   <h3 id="less-mixins-truncating">Truncating text</h3>
   <p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
-{% highlight css %}
+{% highlight scss %}
 // Mixin
-.text-truncate() {
+.text-overflow() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3276,13 +3250,13 @@ a {
 .branch-name {
   display: inline-block;
   max-width: 200px;
-  .text-truncate();
+  .text-overflow();
 }
 {% endhighlight %}
 
   <h3 id="less-mixins-retina-images">Retina images</h3>
   <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 %}
+{% highlight scss %}
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
@@ -3300,7 +3274,7 @@ a {
 
 // Usage
 .jumbotron {
-  .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
+  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
 }
 {% endhighlight %}
 </div>
@@ -3309,10 +3283,8 @@ a {
 
 <!-- Using Sass
 ================================================== -->
-  <div class="bs-docs-section" id="sass">
+<div class="bs-docs-section">
-    <div class="page-header">
+  <h1 id="sass" class="page-header">Using Sass</h1>
-      <h1>Using Sass</h1>
-    </div>
   <p class="lead">While Bootstrap is built on Less, it also has an <a href="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
 
   <h2 id="sass-contents">What's included</h2>
@@ -3354,159 +3326,12 @@ a {
       </tbody>
     </table>
   </div>
-    <p>Visit the <a href="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see this files in action.</p>
+  <p>Visit the <a href="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see these files in action.</p>
 
 
   <h2 id="sass-installation">Installation</h2>
-    <p>Use the appropriate guide for your environment of choice.</p>
+  <p>For information on how to install and use Bootstrap for Sass, consult the <a href="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
-
+  <p>
-    <h3 id="sass-installation-rails">Rails</h3>
+    <a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
-
+  </p>
-    <p><code>bootstrap-sass</code> is easy to drop into Rails with the asset pipeline.</p>
-
-    <p>In your Gemfile you need to add the <code>bootstrap-sass</code> gem, and ensure that the <code>sass-rails</code> gem is present&mdash;it is added to new Rails applications by default.</p>
-
-{% highlight ruby %}
-gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
-gem 'bootstrap-sass', '~> 3.0.3.0'
-{% endhighlight %}
-
-    <p><code>bundle install</code> and restart your server to make the files available through the pipeline.</p>
-
-
-    <h3 id="sass-installation-compass">Compass <small>without Rails</small></h3>
-
-    <p>Install the gem:</p>
-
-{% highlight bash %}
-gem install bootstrap-sass
-{% endhighlight %}
-
-    <p>If you have an existing Compass project:</p>
-
-{% highlight ruby %}
-# config.rb:
-require 'bootstrap-sass'
-{% endhighlight %}
-
-{% highlight bash %}
-bundle exec compass install bootstrap
-{% endhighlight %}
-
-    <p>If you are creating a new Compass project, you can generate it with <code>bootstrap-sass</code> support:</p>
-
-{% highlight bash %}
-bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
-{% endhighlight %}
-
-    <p>This will create a new Compass project with the following files in it:</p>
-
-    <ul>
-      <li><a href="{{ site.sass_repo }}/blob/master/templates/project/_variables.scss.erb">_variables.scss</a> &mdash; all of bootstrap variables (override them here).
-    </li>
-      <li><a href="{{ site.sass_repo }}/blob/master/templates/project/styles.scss">styles.scss</a> &mdash; main project SCSS file, import `variables` and `bootstrap`.</li>
-    </ul>
-
-
-    <h3 id="sass-installation-sass-only">Sass-only <small>without Compass or Rails</small></h3>
-
-    <p>Require the gem, and load paths and Sass helpers will be configured automatically:</p>
-
-{% highlight ruby %}
-require 'bootstrap-sass'
-{% endhighlight %}
-
-    <p>Using bootstrap-sass as a Bower package is still being tested. You can install it with:</p>
-
-{% highlight bash %}
-bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3.0'
-{% endhighlight %}
-
-    <h4>JS and fonts</h4>
-
-    <p>If you are using Rails or Sprockets, see Usage. If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:</p>
-
-{% highlight sass %}
-"#{$icon-font-path}/#{$icon-font-name}.eot"
-{% endhighlight %}
-
-    <p><code>$icon-font-path</code> defaults to <code>bootstrap/</code>. When not using an asset pipeline, you have to copy fonts and javascripts from the gem.</p>
-
-{% highlight bash %}
-mkdir public/fonts
-cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/
-mkdir public/javascripts
-cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/
-{% endhighlight %}
-
-    <p>In ruby you can get the assets' location in the filesystem like this:</p>
-
-{% highlight ruby %}
-Bootstrap.stylesheets_path
-Bootstrap.fonts_path
-Bootstrap.javascripts_path
-{% endhighlight %}
-
-
-    <h2 id="sass-usage">Usage</h2>
-
-    <h3 id="sass-usage-sass">Sass</h3>
-
-    <p>Import Bootstrap into a Sass file (for example, <code>application.css.scss</code>) to get all of Bootstrap's styles, mixins and variables! We recommend against using <code>//= require</code> directives, since none of your other stylesheets will be <a href="{{ site.sass_repo }}/issues/79#issuecomment-4428595">able to access</a> the Bootstrap mixins or variables.</p>
-
-{% highlight sass %}
-@import "bootstrap";
-{% endhighlight %}
-
-    <p>You can also include optional Bootstrap theme:</p>
-
-{% highlight sass %}
-@import "bootstrap/theme";
-{% endhighlight %}
-
-    <p>The full list of Bootstrap variables can be found <a href="../customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
-
-{% highlight sass %}
-$navbar-default-bg: #312312;
-$light-orange: #ff8c00;
-$navbar-default-color: $light-orange;
-
-@import "bootstrap";
-{% endhighlight %}
-
-    <p>You can also import components explicitly. To start with a full list of modules copy this file from the gem:</p>
-
-{% highlight bash %}
-# copy and prepend "bootstrap/" to the @import paths:
-sed 's/@import "/@import "bootstrap\//' \
-$(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss > \
-app/assets/stylesheets/bootstrap-custom.scss
-{% endhighlight %}
-
-    <p>In your <code>application.sass</code>, replace <code>@import 'bootstrap'</code> with:</p>
-
-{% highlight sass %}
-@import 'bootstrap-custom';
-{% endhighlight %}
-
-    <p>Comment out any components you do not want from <code>bootstrap-custom</code>.</p>
-
-    <h3 id="sass-usage-js">JavaScript</h3>
-
-    <p>We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in <code>application.js</code>) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):</p>
-
-{% highlight js %}
-// Loads all Bootstrap javascripts
-//= require bootstrap
-{% endhighlight %}
-
-    <p>You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].</p>
-
-{% highlight js %}
-//= require bootstrap/scrollspy
-//= require bootstrap/modal
-//= require bootstrap/dropdown
-{% endhighlight %}
-
-
 </div>

docs/customize.html

@@ -2,17 +2,16 @@
 layout: default
 title: Customize and download
 slug: customize
-lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
+lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
 ---
 
 <!-- Customizer form -->
 <form class="bs-customizer" role="form">
   <div class="bs-docs-section" id="less-section">
-    <div class="page-header">
     <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="less">LESS files</h1>
+    <h1 id="less" class="page-header">Less files</h1>
-    </div>
+
-    <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
+    <p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
 
     <div class="row">
       <div class="col-xs-6 col-sm-4">
@@ -71,13 +70,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
         </div>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less">
+            <input type="checkbox" checked value="button-groups.less" data-dependencies="buttons.less">
             Button groups
           </label>
         </div>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less">
+            <input type="checkbox" checked value="input-groups.less" data-dependencies="forms.less">
             Input groups
           </label>
         </div>
@@ -238,10 +237,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
 
   <div class="bs-docs-section" id="plugin-section">
-    <div class="page-header">
     <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="plugins">jQuery plugins</h1>
+    <h1 id="plugins" class="page-header">jQuery plugins</h1>
-    </div>
+
     <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
     <div class="row">
       <div class="col-lg-6">
@@ -284,7 +282,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
         </div>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js">
+            <input type="checkbox" checked value="popover.js" data-dependencies="tooltip.js">
             Popovers <small>(requires Tooltips)</small>
           </label>
         </div>
@@ -338,18 +336,18 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
 
   <div class="bs-docs-section" id="less-variables-section">
-    <div class="page-header">
     <button class="btn btn-default toggle" type="button">Reset to defaults</button>
-      <h1 id="less-variables">LESS variables</h1>
+    <h1 id="less-variables" class="page-header">Less variables</h1>
-    </div>
+
-    <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
+    <p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
     {% include customizer-variables.html %}
   </div>
 
+
+
   <div class="bs-docs-section">
-    <div class="page-header">
+    <h1 id="download" class="page-header">Download</h1>
-      <h1 id="download">Download</h1>
+
-    </div>
     <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
     <div class="bs-customize-download">
       <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>

docs/dist/css/bootstrap-theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Bootstrap v3.1.0 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */

docs/examples/blog/blog.css

@@ -13,10 +13,10 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  margin-top: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333;
-  margin-top: 0;
 }
 
 
@@ -41,9 +41,6 @@ h6, .h6 {
 }
 
 /* Nav links */
-.blog-nav {
-
-}
 .blog-nav-item {
   position: relative;
   display: inline-block;
@@ -65,15 +62,14 @@ h6, .h6 {
   position: absolute;
   bottom: 0;
   left: 50%;
-  display: block;
-  content: " ";
   width: 0;
   height: 0;
   margin-left: -5px;
   vertical-align: middle;
+  content: " ";
   border-right:  5px solid transparent;
-  border-left:   5px solid transparent;
   border-bottom: 5px solid;
+  border-left:   5px solid transparent;
 }
 
 
@@ -165,4 +161,3 @@ h6, .h6 {
   background-color: #f9f9f9;
   border-top: 1px solid #e5e5e5;
 }
-

docs/examples/blog/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -164,8 +164,8 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
   </body>
 </html>

docs/examples/carousel/carousel.css

@@ -16,19 +16,19 @@ body {
 .navbar-wrapper {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   z-index: 20;
 }
 
 /* Flip around the padding for proper display in narrow viewports */
 .navbar-wrapper .container {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 .navbar-wrapper .navbar {
-  padding-left: 15px;
   padding-right: 15px;
+  padding-left: 15px;
 }
 
 
@@ -65,21 +65,21 @@ body {
 
 /* Pad the edges of the mobile views a bit */
 .marketing {
-  padding-left: 15px;
   padding-right: 15px;
+  padding-left: 15px;
 }
 
 /* Center align the text within the three columns below the carousel */
 .marketing .col-lg-4 {
-  text-align: center;
   margin-bottom: 20px;
+  text-align: center;
 }
 .marketing h2 {
   font-weight: normal;
 }
 .marketing .col-lg-4 p {
-  margin-left: 10px;
   margin-right: 10px;
+  margin-left: 10px;
 }
 
 
@@ -106,8 +106,8 @@ body {
 
   /* Remove the edge padding needed for mobile */
   .marketing {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
   }
 
   /* Navbar positioning foo */
@@ -115,12 +115,12 @@ body {
     margin-top: 20px;
   }
   .navbar-wrapper .container {
-    padding-left:  15px;
     padding-right: 15px;
+    padding-left:  15px;
   }
   .navbar-wrapper .navbar {
-    padding-left:  0;
     padding-right: 0;
+    padding-left:  0;
   }
 
   /* The navbar becomes detached from the top, so we round the corners */
@@ -138,7 +138,6 @@ body {
   .featurette-heading {
     font-size: 50px;
   }
-
 }
 
 @media (min-width: 992px) {

docs/examples/carousel/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -199,8 +199,8 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
   </body>
 </html>

docs/examples/cover/cover.css

@@ -48,8 +48,8 @@ body {
   vertical-align: top;
 }
 .cover-container {
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 
 /* Padding for spacing */
@@ -73,8 +73,8 @@ body {
   margin-left: 20px;
 }
 .masthead-nav > li > a {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
   font-size: 16px;
   font-weight: bold;
   color: #fff; /* IE8 proofing */

docs/examples/cover/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -68,8 +68,8 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
   </body>
 </html>

docs/examples/dashboard/dashboard.css

@@ -29,12 +29,14 @@ body {
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
-    top: 0;
+    top: 51px;
-    left: 0;
     bottom: 0;
+    left: 0;
     z-index: 1000;
     display: block;
-    padding: 70px 20px 20px;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
     background-color: #f5f5f5;
     border-right: 1px solid #eee;
   }
@@ -42,13 +44,13 @@ body {
 
 /* Sidebar navigation */
 .nav-sidebar {
-  margin-left: -20px;
   margin-right: -21px; /* 20px padding + 1px border */
   margin-bottom: 20px;
+  margin-left: -20px;
 }
 .nav-sidebar > li > a {
-  padding-left: 20px;
   padding-right: 20px;
+  padding-left: 20px;
 }
 .nav-sidebar > .active > a {
   color: #fff;
@@ -65,8 +67,8 @@ body {
 }
 @media (min-width: 768px) {
   .main {
+    padding-right: 40px;
     padding-left: 40px;
-    pading-right: 40px;
   }
 }
 .main .page-header {
@@ -89,5 +91,6 @@ body {
   margin-bottom: 20px;
 }
 .placeholder img {
+  display: inline-block;
   border-radius: 50%;
 }

docs/examples/dashboard/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -236,8 +236,8 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
   </body>
 </html>

docs/examples/grid/grid.css

@@ -1,6 +1,6 @@
 .container {
-  padding-left: 15px;
   padding-right: 15px;
+  padding-left: 15px;
 }
 
 h4 {
@@ -17,8 +17,8 @@ h4 {
   padding-top: 15px;
   padding-bottom: 15px;
   background-color: #eee;
-  border: 1px solid #ddd;
   background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
   border: 1px solid rgba(86,61,124,.2);
 }
 

docs/examples/grid/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -63,7 +63,7 @@
       <hr>
 
       <h3>Two columns with two nested columns</h3>
-      <p>Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
+      <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
       <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
       <div class="row">
         <div class="col-md-8">

docs/examples/jumbotron-narrow/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

docs/examples/jumbotron-narrow/jumbotron-narrow.css

@@ -8,8 +8,8 @@ body {
 .header,
 .marketing,
 .footer {
-  padding-left: 15px;
   padding-right: 15px;
+  padding-left: 15px;
 }
 
 /* Custom page header */
@@ -18,10 +18,10 @@ body {
 }
 /* Make the masthead heading the same height as the navigation */
 .header h3 {
+  padding-bottom: 19px;
   margin-top: 0;
   margin-bottom: 0;
   line-height: 40px;
-  padding-bottom: 19px;
 }
 
 /* Custom page footer */
@@ -47,8 +47,8 @@ body {
   border-bottom: 1px solid #e5e5e5;
 }
 .jumbotron .btn {
-  font-size: 21px;
   padding: 14px 24px;
+  font-size: 21px;
 }
 
 /* Supporting marketing content */
@@ -65,8 +65,8 @@ body {
   .header,
   .marketing,
   .footer {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
   }
   /* Space out the masthead */
   .header {

docs/examples/jumbotron/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -93,7 +93,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/justified-nav/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -53,7 +53,7 @@
       <div class="row">
         <div class="col-lg-4">
           <h2>Safari bug warning!</h2>
-          <p class="text-danger">Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
+          <p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
         </div>

docs/examples/justified-nav/justified-nav.css

@@ -3,10 +3,10 @@ body {
 }
 
 .footer {
-  border-top: 1px solid #eee;
-  margin-top: 40px;
   padding-top: 40px;
   padding-bottom: 40px;
+  margin-top: 40px;
+  border-top: 1px solid #eee;
 }
 
 /* Main marketing message and sign up button */
@@ -15,33 +15,33 @@ body {
   background-color: transparent;
 }
 .jumbotron .btn {
-  font-size: 21px;
   padding: 14px 24px;
+  font-size: 21px;
 }
 
 /* Customize the nav-justified links to be fill the entire space of the .navbar */
 
 .nav-justified {
   background-color: #eee;
-  border-radius: 5px;
   border: 1px solid #ccc;
+  border-radius: 5px;
 }
 .nav-justified > li > a {
-  margin-bottom: 0;
   padding-top: 15px;
   padding-bottom: 15px;
-  color: #777;
+  margin-bottom: 0;
   font-weight: bold;
+  color: #777;
   text-align: center;
-  border-bottom: 1px solid #d5d5d5;
   background-color: #e5e5e5; /* Old browsers */
-  background-repeat: repeat-x; /* Repeat the gradient */
   background-image:    -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
   background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
   background-image:      -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
   background-image:         linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  border-bottom: 1px solid #d5d5d5;
 }
 .nav-justified > .active > a,
 .nav-justified > .active > a:hover,
@@ -63,16 +63,16 @@ body {
     max-height: 52px;
   }
   .nav-justified > li > a {
-    border-left: 1px solid #fff;
     border-right: 1px solid #d5d5d5;
+    border-left: 1px solid #fff;
   }
   .nav-justified > li:first-child > a {
     border-left: 0;
     border-radius: 5px 0 0 5px;
   }
   .nav-justified > li:last-child > a {
-    border-radius: 0 5px 5px 0;
     border-right: 0;
+    border-radius: 0 5px 5px 0;
   }
 }
 
@@ -82,7 +82,7 @@ body {
   .masthead,
   .marketing,
   .footer {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
   }
 }

docs/examples/navbar-fixed-top/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -85,7 +85,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/navbar-static-top/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -86,7 +86,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/navbar/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -84,7 +84,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/non-responsive/index.html

@@ -77,7 +77,7 @@
       </div>
 
       <h3>What changes</h3>
-      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
+      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
 
       <h3>Regarding navbars</h3>
       <p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
@@ -99,7 +99,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/non-responsive/non-responsive.css

@@ -6,9 +6,9 @@
 
 /* Account for fixed navbar */
 body {
+  min-width: 970px;
   padding-top: 70px;
   padding-bottom: 30px;
-  min-width: 970px;
 }
 
 /* Finesse the page header spacing */
@@ -28,8 +28,8 @@ body {
 
 /* Reset the container */
 .container {
-  max-width: none !important;
   width: 970px;
+  max-width: none !important;
 }
 
 /* Demonstrate the grids */
@@ -37,8 +37,8 @@ body {
   padding-top: 15px;
   padding-bottom: 15px;
   background-color: #eee;
-  border: 1px solid #ddd;
   background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
   border: 1px solid rgba(86,61,124,.2);
 }
 
@@ -94,12 +94,12 @@ body {
   position: absolute;
   float: left;
   background-color: #fff;
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, .15);
   border-width: 0 1px 1px;
   border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
   color: #333;

docs/examples/offcanvas/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -123,7 +123,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="offcanvas.js"></script>
   </body>

docs/examples/offcanvas/offcanvas.css

@@ -20,9 +20,9 @@ footer {
 @media screen and (max-width: 767px) {
   .row-offcanvas {
     position: relative;
-    -webkit-transition: all 0.25s ease-out;
+    -webkit-transition: all .25s ease-out;
-    -moz-transition: all 0.25s ease-out;
+       -moz-transition: all .25s ease-out;
-    transition: all 0.25s ease-out;
+            transition: all .25s ease-out;
   }
 
   .row-offcanvas-right

docs/examples/offcanvas/offcanvas.js

@@ -1,5 +1,5 @@
 $(document).ready(function () {
   $('[data-toggle=offcanvas]').click(function () {
-    $('.row-offcanvas').toggleClass('active');
+    $('.row-offcanvas').toggleClass('active')
   });
 });

docs/examples/signin/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -32,7 +32,7 @@
 
       <form class="form-signin" role="form">
         <h2 class="form-signin-heading">Please sign in</h2>
-        <input type="text" class="form-control" placeholder="Email address" required autofocus>
+        <input type="email" class="form-control" placeholder="Email address" required autofocus>
         <input type="password" class="form-control" placeholder="Password" required>
         <label class="checkbox">
           <input type="checkbox" value="remember-me"> Remember me

docs/examples/signin/signin.css

@@ -18,20 +18,20 @@ body {
 }
 .form-signin .form-control {
   position: relative;
-  font-size: 16px;
   height: auto;
-  padding: 10px;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
 }
 .form-signin .form-control:focus {
   z-index: 2;
 }
-.form-signin input[type="text"] {
+.form-signin input[type="email"] {
   margin-bottom: -1px;
-  border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .form-signin input[type="password"] {
   margin-bottom: 10px;

docs/examples/starter-template/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -62,7 +62,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/sticky-footer-navbar/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -28,9 +28,6 @@
 
   <body>
 
-    <!-- Wrap all page content here -->
-    <div id="wrap">
-
     <!-- Fixed navbar -->
     <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
@@ -70,10 +67,9 @@
       <div class="page-header">
         <h1>Sticky footer with fixed navbar</h1>
       </div>
-        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
+      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
       <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
     </div>
-    </div>
 
     <div id="footer">
       <div class="container">
@@ -85,7 +81,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/sticky-footer-navbar/sticky-footer-navbar.css

@@ -1,24 +1,18 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-
+html {
-html,
+  position: relative;
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
   min-height: 100%;
-  height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
-
+body {
-/* Set the fixed height of the footer here */
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
 #footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
   height: 60px;
   background-color: #f5f5f5;
 }
@@ -28,7 +22,7 @@ body {
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */
 
-#wrap > .container {
+body > .container {
   padding: 60px 15px 0;
 }
 .container .text-muted {
@@ -36,8 +30,8 @@ body {
 }
 
 #footer > .container {
-  padding-left: 15px;
   padding-right: 15px;
+  padding-left: 15px;
 }
 
 code {