bump version to v3.3.1

Fixed a typo in Sign-in page example

.editorconfig

@@ -3,12 +3,12 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true
 
 [*.py]
 indent_size = 4

.gitignore

@@ -6,37 +6,37 @@ _site
 # Numerous always-ignore extensions
 *.diff
 *.err
-*.orig
 *.log
+*.orig
 *.rej
 *.swo
 *.swp
-*.zip
 *.vi
+*.zip
 *~
 
 # OS or Editor folders
-.DS_Store
 ._*
-Thumbs.db
 .cache
+.DS_Store
+.idea
 .project
 .settings
 .tmproj
 *.esproj
-nbproject
 *.sublime-project
 *.sublime-workspace
-.idea
+nbproject
+Thumbs.db
 
 # Komodo
-*.komodoproject
 .komodotools
+*.komodoproject
 
 # grunt-html-validation
-validation-status.json
 validation-report.json
+validation-status.json
 
 # Folders to ignore
-node_modules
 bower_components
+node_modules

.travis.yml

@@ -1,20 +1,27 @@
 language: node_js
+git:
+  depth: 10
 node_js:
   - "0.10"
 before_install:
-  - time sudo pip install --use-mirrors -r test-infra/requirements.txt
+  - travis_retry sudo pip install -r test-infra/requirements.txt
   - rvm use 1.9.3 --fuzzy
-  - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $(rvm gemdir)) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
+  - export GEMDIR=$(rvm gemdir)
+  - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $GEMDIR) jekyll=$JEKYLL_VERSION rouge=$ROUGE_VERSION" > pseudo_Gemfile.lock; fi
+  - "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
+  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
+  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
 install:
-  - time npm install -g grunt-cli
-  - 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
+  - npm install -g grunt-cli
+  - ./test-infra/s3_cache.py download npm-modules
+  - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py download rubygems; fi
 after_script:
-  - 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
+  - if [ "$TWBS_TEST" = core ]; then ./test-infra/s3_cache.py upload npm-modules; fi
+  - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi
 env:
   global:
-    - JEKYLL_VERSION: 1.4.2
+    - JEKYLL_VERSION: 2.5.1
+    - ROUGE_VERSION: 1.7.2
     - SAUCE_USERNAME: bootstrap
     - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
     - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
@@ -26,3 +33,5 @@ env:
     - TWBS_TEST=sauce-js-unit
 matrix:
   fast_finish: true
+notifications:
+  slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH

CONTRIBUTING.md

@@ -29,6 +29,25 @@ restrictions:
   their respective repositories).
 
 
+## Issues and labels
+
+Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
+
+- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in a issue opened on that browser's own bug tracker.
+- `confirmed` - Issues that have been confirmed with a reduced test case and idenfity a bug in Bootstrap.
+- `css` - Issues stemming from our compiled CSS or source Less files.
+- `customizer` - Issues with our web-based Customizer.
+- `docs` - Issues for improving or updating our documentation.
+- `examples` - Issues involving the example templates included in our docs.
+- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
+- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
+- `help wanted` - Issues we need or would love help from the community to resolve.
+- `js` - Issues stemming from our compiled or source JavaScript files.
+- `meta` - Issues with the project itself or our GitHub repository.
+
+For a complete look at our labels, see the [project labels page](/twbs/bootstrap/labels).
+
+
 ## Bug reports
 
 A bug is a _demonstrable problem_ that is caused by the code in the repository.
@@ -36,6 +55,10 @@ Good bug reports are extremely helpful, so thanks!
 
 Guidelines for bug reports:
 
+0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
+   and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
+   problem isn't caused by a simple error in your own code.
+
 1. **Use the GitHub issue search** — check if the issue has already been
    reported.
 
@@ -44,7 +67,7 @@ Guidelines for bug reports:
 
 3. **Isolate the problem** — ideally create a [reduced test
    case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
-   [This JS Bin](http://jsbin.com/EBAwOkOK/1) is a helpful template.
+   [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
 
 
 A good bug report shouldn't leave others needing to chase you up for more
@@ -72,6 +95,22 @@ Example:
 > causing the bug, and potential solutions (and your opinions on their
 > merits).
 
+### Reporting upstream browser bugs
+
+Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
+When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](http://getbootstrap.com/browser-bugs/).
+
+| Vendor(s)     | Browser(s)                   | Rendering engine | Bug reporting website(s)                                                              | Notes                                                    |
+| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| Mozilla       | Firefox                      | Gecko            | https://bugzilla.mozilla.org/enter_bug.cgi                                            | "Core" is normally the right product option to choose.   |
+| Apple         | Safari                       | WebKit           | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
+| Google, Opera | Chrome, Chromium, Opera v15+ | Blink            | https://code.google.com/p/chromium/issues/list                                        | Click the "New issue" button.                            |
+| Microsoft     | Internet Explorer            | Trident          | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm                      |                                                          |
+
+### Issues bots
+
+[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
+
 
 ## Feature requests
 
@@ -96,6 +135,17 @@ Please adhere to the [coding guidelines](#code-guidelines) used throughout the
 project (indentation, accurate comments, etc.) and any other requirements
 (such as test coverage).
 
+**Do not edit `bootstrap.css`, `bootstrap-theme.css`, or `bootstrap.js`
+directly!** Those files are automatically generated. You should edit the
+source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/master/less)
+and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.
+
+Similarly, when contributing to Bootstrap's documentation, you should edit the
+documentation source files in
+[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/docs).
+**Do not edit the `gh-pages` branch.** That branch is generated from the
+documentation source files and is managed separately by the Bootstrap Core Team.
+
 Adhering to the following process is the best way to get your work
 included in the project:
 
@@ -149,31 +199,28 @@ included in the project:
 **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
 license your work under the terms of the [MIT License](LICENSE.md).
 
+### Pull request checker bot: Rorschach
+
+[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
+
+* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
+* Or you can just open a new pull request for your revised version.
+
 
 ## Code guidelines
 
 ### HTML
 
-- Two spaces for indentation, never tabs.
-- Double quotes only, never single quotes.
-- Always use proper indentation.
+[Adhere to the Code Guide.](http://codeguide.co/#html)
+
 - 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
 
-- CSS changes must be done in `.less` files first, never just in the compiled `.css` files.
-- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/).
-- Multiple-line approach (one property and value per line).
-- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`).
-- End all lines with a semi-colon.
-- For multiple, comma-separated selectors, place each selector on its own line.
-- Don't add vendor prefixed properties to their unprefixed counterparts (e.g., only `box-sizing` and not also include `-webkit-box-sizing`), as this is done automagically at build time.
-- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
-- Attribute selectors should only be used where absolutely necessary (e.g., form controls) and should be avoided on custom components for performance and explicitness.
-- Series of classes for a component should include a base class (e.g., `.component`) and use the base class as a prefix for modifier and sub-components (e.g., `.component-lg`).
-- Avoid inheritance and over nesting—use single, explicit classes whenever possible.
+[Adhere to the Code Guide.](http://codeguide.co/#css)
+
 - 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.
 
@@ -194,4 +241,3 @@ Run `grunt test` before committing to ensure your changes follow our coding stan
 By contributing your code, you agree to license your contribution under the [MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE).
 
 Prior to v3.1.0, Bootstrap was released under the Apache License v2.0.
-

Gruntfile.js

@@ -17,10 +17,23 @@ module.exports = function (grunt) {
 
   var fs = require('fs');
   var path = require('path');
-  var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js');
+  var npmShrinkwrap = require('npm-shrinkwrap');
   var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
+  var getLessVarsData = function () {
+    var filePath = path.join(__dirname, 'less/variables.less');
+    var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
+    var parser = new BsLessdocParser(fileContent);
+    return { sections: parser.parseFile() };
+  };
   var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
-  var updateShrinkwrap = require('./grunt/shrinkwrap.js');
+  var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
+  var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
+
+  Object.keys(configBridge.paths).forEach(function (key) {
+    configBridge.paths[key].forEach(function (val, i, arr) {
+      arr[i] = path.join('./docs/assets', val);
+    });
+  });
 
   // Project configuration.
   grunt.initConfig({
@@ -32,11 +45,13 @@ module.exports = function (grunt) {
             ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
             ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
             ' */\n',
-    jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\') }\n\n',
+    jqueryCheck: configBridge.config.jqueryCheck.join('\n'),
+    jqueryVersionCheck: configBridge.config.jqueryVersionCheck.join('\n'),
 
     // Task configuration.
     clean: {
-      dist: ['dist', 'docs/dist']
+      dist: 'dist',
+      docs: 'docs/dist'
     },
 
     jshint: {
@@ -49,14 +64,17 @@ module.exports = function (grunt) {
         },
         src: ['Gruntfile.js', 'grunt/*.js']
       },
-      src: {
+      core: {
         src: 'js/*.js'
       },
       test: {
+        options: {
+          jshintrc: 'js/tests/unit/.jshintrc'
+        },
         src: 'js/tests/unit/*.js'
       },
       assets: {
-        src: 'docs/assets/js/src/*.js'
+        src: ['docs/assets/js/src/*.js', 'docs/assets/js/*.js', '!docs/assets/js/*.min.js']
       }
     },
 
@@ -65,26 +83,25 @@ module.exports = function (grunt) {
         config: 'js/.jscsrc'
       },
       grunt: {
-        options: {
-          requireCamelCaseOrUpperCaseIdentifiers: null,
-          requireParenthesesAroundIIFE: true
-        },
         src: '<%= jshint.grunt.src %>'
       },
-      src: {
-        src: '<%= jshint.src.src %>'
+      core: {
+        src: '<%= jshint.core.src %>'
       },
       test: {
         src: '<%= jshint.test.src %>'
       },
       assets: {
+        options: {
+          requireCamelCaseOrUpperCaseIdentifiers: null
+        },
         src: '<%= jshint.assets.src %>'
       }
     },
 
     concat: {
       options: {
-        banner: '<%= banner %>\n<%= jqueryCheck %>',
+        banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>',
         stripBanners: false
       },
       bootstrap: {
@@ -108,38 +125,18 @@ module.exports = function (grunt) {
 
     uglify: {
       options: {
-        report: 'min'
+        preserveComments: 'some'
       },
-      bootstrap: {
-        options: {
-          banner: '<%= banner %>'
-        },
+      core: {
         src: '<%= concat.bootstrap.dest %>',
         dest: 'dist/js/<%= pkg.name %>.min.js'
       },
       customize: {
-        options: {
-          preserveComments: 'some'
-        },
-        src: [
-          'docs/assets/js/vendor/less.min.js',
-          'docs/assets/js/vendor/jszip.min.js',
-          'docs/assets/js/vendor/uglify.min.js',
-          'docs/assets/js/vendor/blob.js',
-          'docs/assets/js/vendor/filesaver.js',
-          'docs/assets/js/raw-files.min.js',
-          'docs/assets/js/src/customizer.js'
-        ],
+        src: configBridge.paths.customizerJs,
         dest: 'docs/assets/js/customize.min.js'
       },
       docsJs: {
-        options: {
-          preserveComments: 'some'
-        },
-        src: [
-          'docs/assets/js/vendor/holder.js',
-          'docs/assets/js/src/application.js'
-        ],
+        src: configBridge.paths.docsJs,
         dest: 'docs/assets/js/docs.min.js'
       }
     },
@@ -160,9 +157,8 @@ module.exports = function (grunt) {
           sourceMapURL: '<%= pkg.name %>.css.map',
           sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
         },
-        files: {
-          'dist/css/<%= pkg.name %>.css': 'less/bootstrap.less'
-        }
+        src: 'less/bootstrap.less',
+        dest: 'dist/css/<%= pkg.name %>.css'
       },
       compileTheme: {
         options: {
@@ -172,26 +168,14 @@ module.exports = function (grunt) {
           sourceMapURL: '<%= pkg.name %>-theme.css.map',
           sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
         },
-        files: {
-          'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
-        }
-      },
-      minify: {
-        options: {
-          cleancss: true,
-          report: 'min'
-        },
-        files: {
-          'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
-          'dist/css/<%= pkg.name %>-rtl.min.css': 'dist/css/<%= pkg.name %>-rtl.css',
-          'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
-        }
+        src: 'less/theme.less',
+        dest: 'dist/css/<%= pkg.name %>-theme.css'
       }
     },
 
     autoprefixer: {
       options: {
-        browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12']
+        browsers: configBridge.config.autoprefixerBrowsers
       },
       core: {
         options: {
@@ -216,19 +200,11 @@ module.exports = function (grunt) {
       }
     },
 
-    cssflip: {
-      rtl: {
-        files: {
-          'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>.css'
-        }
-      }
-    },
-
     csslint: {
       options: {
         csslintrc: 'less/.csslintrc'
       },
-      src: [
+      dist: [
         'dist/css/bootstrap.css',
         'dist/css/bootstrap-theme.css'
       ],
@@ -246,10 +222,17 @@ module.exports = function (grunt) {
 
     cssmin: {
       options: {
+        compatibility: 'ie8',
         keepSpecialComments: '*',
-        noAdvanced: true, // turn advanced optimizations off until the issue is fixed in clean-css
-        report: 'min',
-        compatibility: 'ie8'
+        noAdvanced: true
+      },
+      minifyCore: {
+        src: 'dist/css/<%= pkg.name %>.css',
+        dest: 'dist/css/<%= pkg.name %>.min.css'
+      },
+      minifyTheme: {
+        src: 'dist/css/<%= pkg.name %>-theme.css',
+        dest: 'dist/css/<%= pkg.name %>-theme.min.css'
       },
       docs: {
         src: [
@@ -287,27 +270,19 @@ module.exports = function (grunt) {
         dest: 'docs/examples/'
       },
       docs: {
-        files: {
-          'docs/assets/css/src/docs.css': 'docs/assets/css/src/docs.css'
-        }
+        src: 'docs/assets/css/src/docs.css',
+        dest: 'docs/assets/css/src/docs.css'
       }
     },
 
     copy: {
       fonts: {
-        expand: true,
         src: 'fonts/*',
         dest: 'dist/'
       },
       docs: {
-        expand: true,
-        cwd: './dist',
-        src: [
-          '{css,js}/*.min.*',
-          'css/*.map',
-          'fonts/*'
-        ],
-        dest: 'docs/dist'
+        src: 'dist/*/*',
+        dest: 'docs/'
       }
     },
 
@@ -325,20 +300,17 @@ module.exports = function (grunt) {
     },
 
     jade: {
-      compile: {
-        options: {
-          pretty: true,
-          data: function () {
-            var filePath = path.join(__dirname, 'less/variables.less');
-            var fileContent = fs.readFileSync(filePath, {encoding: 'utf8'});
-            var parser = new BsLessdocParser(fileContent);
-            return {sections: parser.parseFile()};
-          }
-        },
-        files: {
-          'docs/_includes/customizer-variables.html': 'docs/jade/customizer-variables.jade',
-          'docs/_includes/nav/customize.html': 'docs/jade/customizer-nav.jade'
-        }
+      options: {
+        pretty: true,
+        data: getLessVarsData
+      },
+      customizerVars: {
+        src: 'docs/_jade/customizer-variables.jade',
+        dest: 'docs/_includes/customizer-variables.html'
+      },
+      customizerNav: {
+        src: 'docs/_jade/customizer-nav.jade',
+        dest: 'docs/_includes/nav/customize.html'
       }
     },
 
@@ -349,8 +321,9 @@ module.exports = function (grunt) {
         failHard: true,
         reset: true,
         relaxerror: [
-          'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
-          'Element img is missing required attribute src.'
+          'Element img is missing required attribute src.',
+          'Attribute autocomplete not allowed on element input at this point.',
+          'Attribute autocomplete not allowed on element button at this point.'
         ]
       },
       files: {
@@ -360,15 +333,15 @@ module.exports = function (grunt) {
 
     watch: {
       src: {
-        files: '<%= jshint.src.src %>',
-        tasks: ['jshint:src', 'qunit']
+        files: '<%= jshint.core.src %>',
+        tasks: ['jshint:src', 'qunit', 'concat']
       },
       test: {
         files: '<%= jshint.test.src %>',
         tasks: ['jshint:test', 'qunit']
       },
       less: {
-        files: 'less/*.less',
+        files: 'less/**/*.less',
         tasks: 'less'
       }
     },
@@ -389,6 +362,7 @@ module.exports = function (grunt) {
         options: {
           build: process.env.TRAVIS_JOB_ID,
           concurrency: 10,
+          maxRetries: 3,
           urls: ['http://127.0.0.1:3000/js/tests/index.html'],
           browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
         }
@@ -398,72 +372,101 @@ module.exports = function (grunt) {
     exec: {
       npmUpdate: {
         command: 'npm update'
-      },
-      npmShrinkWrap: {
-        command: 'npm shrinkwrap --dev'
       }
     }
   });
 
 
   // These plugins provide necessary tasks.
-  require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+  require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
   require('time-grunt')(grunt);
 
   // Docs HTML validation task
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
 
+  var runSubset = function (subset) {
+    return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
+  };
+  var isUndefOrNonZero = function (val) {
+    return val === undefined || val !== '0';
+  };
+
   // Test task.
   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-html']);
+  if (runSubset('core')) {
+    testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'csslint:dist', 'test-js', 'docs']);
   }
   // Skip HTML validation if running a different subset of the test suite
-  if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
+  if (runSubset('validate-html') &&
+      // Skip HTML5 validator on Travis when [skip validator] is in the commit message
+      isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
     testSubtasks.push('validate-html');
   }
   // Only run Sauce Labs tests if there's a Sauce access key
   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')) {
+      runSubset('sauce-js-unit') &&
+      // Skip Sauce on Travis when [skip sauce] is in the commit message
+      isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
     testSubtasks.push('connect');
     testSubtasks.push('saucelabs-qunit');
   }
   grunt.registerTask('test', testSubtasks);
+  grunt.registerTask('test-js', ['jshint:core', 'jshint:test', 'jshint:grunt', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
 
   // JS distribution task.
-  grunt.registerTask('dist-js', ['concat', 'uglify']);
+  grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
 
   // CSS distribution task.
   grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
-  grunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'cssflip', 'usebanner', 'csscomb', 'less:minify', 'cssmin']);
-
-  // Docs distribution task.
-  grunt.registerTask('dist-docs', 'copy:docs');
+  grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'usebanner', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme']);
 
   // Full distribution task.
-  grunt.registerTask('dist', ['clean', 'dist-css', 'copy:fonts', 'dist-js', 'dist-docs']);
+  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
 
   // Default task.
-  grunt.registerTask('default', ['test', 'dist', 'build-glyphicons-data', 'build-customizer', 'update-shrinkwrap']);
+  grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'test']);
 
   // 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('build-glyphicons-data', generateGlyphiconsData);
-
   // task for building customizer
   grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
   grunt.registerTask('build-customizer-html', 'jade');
   grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
     var banner = grunt.template.process('<%= banner %>');
-    generateRawFiles(banner);
+    generateRawFiles(grunt, banner);
   });
 
-  // Task for updating the npm packages used by the Travis build.
-  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']);
-  grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
+  grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
+    var srcFiles = grunt.config.get('concat.bootstrap.src');
+    var destFilepath = 'dist/js/npm.js';
+    generateCommonJSModule(grunt, srcFiles, destFilepath);
+  });
+
+  // Docs task.
+  grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
+  grunt.registerTask('lint-docs-css', ['csslint:docs', 'csslint:examples']);
+  grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
+  grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
+  grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-customizer']);
+
+  // Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
+  // This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
+  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
+  grunt.registerTask('_update-shrinkwrap', function () {
+    var done = this.async();
+    npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
+      if (err) {
+        grunt.fail.warn(err);
+      }
+      var dest = 'test-infra/npm-shrinkwrap.json';
+      fs.renameSync('npm-shrinkwrap.json', dest);
+      grunt.log.writeln('File ' + dest.cyan + ' updated.');
+      done();
+    });
+  });
 };

README.md

@@ -1,29 +1,33 @@
-# [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)
+# [Bootstrap](http://getbootstrap.com)
+[![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
+[![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap)
+[![Build Status](https://secure.travis-ci.org/twbs/bootstrap.svg?branch=master)](https://travis-ci.org/twbs/bootstrap)
+[![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
 [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
 
-Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
+Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
 
 To get started, check out <http://getbootstrap.com>!
 
 ## Table of contents
 
- - [Quick start](#quick-start)
- - [Bugs and feature requests](#bugs-and-feature-requests)
- - [Documentation](#documentation)
- - [Compiling CSS and JavaScript](#compiling-css-and-javascript)
- - [Contributing](#contributing)
- - [Community](#community)
- - [Versioning](#versioning)
- - [Authors](#authors)
- - [Copyright and license](#copyright-and-license)
+- [Quick start](#quick-start)
+- [Bugs and feature requests](#bugs-and-feature-requests)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [Community](#community)
+- [Versioning](#versioning)
+- [Creators](#creators)
+- [Copyright and license](#copyright-and-license)
 
 ## Quick start
 
-Three quick start options are available:
+Four quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.1.1.zip).
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.1.zip).
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
 - Install with [Bower](http://bower.io): `bower install bootstrap`.
+- Install with [npm](https://www.npmjs.org): `npm install bootstrap`.
 
 Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
 
@@ -63,11 +67,11 @@ 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. 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:** 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à.
+1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x).
+  - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
+2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`.
+3. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
+4. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
 
@@ -79,46 +83,11 @@ Documentation for v2.3.2 has been made available for the time being at <http://g
 
 
 
-## Compiling CSS and JavaScript
-
-Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
-
-### Install Grunt
-
-From the command line:
-
-1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
-2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
-
-When completed, you'll be able to run the various Grunt commands provided from the command line.
-
-**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
-
-### Available Grunt commands
-
-#### Build - `grunt`
-Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
-
-#### Only compile CSS and JavaScript - `grunt dist`
-`grunt dist` creates the `/dist` directory with compiled files. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
-
-#### Tests - `grunt test`
-Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
-
-#### Watch - `grunt watch`
-This is a convenience method for watching just Less files and automatically building them whenever you save.
-
-### Troubleshooting dependencies
-
-Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
-
-
-
 ## Contributing
 
 Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 
-Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
+Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
 
 Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
 
@@ -128,43 +97,30 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
 
 Keep track of development and community news.
 
-- Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
+- Follow [@twbootstrap on Twitter](https://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.
+- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
 
 
 
-
 ## Versioning
 
-For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.
-
-Releases will be numbered with the following format:
-
-`<major>.<minor>.<patch>`
-
-And constructed with the following guidelines:
-
-- Breaking backward compatibility **bumps the major** while resetting minor and patch
-- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
-- Bug fixes and misc changes **bumps only the patch**
-
-For more information on SemVer, please visit <http://semver.org/>.
+For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
 
 
 
-## Authors
+## Creators
 
 **Mark Otto**
 
-- <http://twitter.com/mdo>
-- <http://github.com/mdo>
+- <https://twitter.com/mdo>
+- <https://github.com/mdo>
 
 **Jacob Thornton**
 
-- <http://twitter.com/fat>
-- <http://github.com/fat>
+- <https://twitter.com/fat>
+- <https://github.com/fat>
 
 
 

_config.yml

@@ -1,6 +1,6 @@
 # Dependencies
-markdown:         rdiscount
-pygments:         true
+markdown:         kramdown
+highlighter:      rouge
 
 # Permalinks
 permalink:        pretty
@@ -10,29 +10,23 @@ source:           docs
 destination:      _gh_pages
 host:             0.0.0.0
 port:             9001
-baseurl:          /
 url:              http://getbootstrap.com
 encoding:         UTF-8
 
-exclude:
-  - jade
-  - src
-  - vendor
-
 # Custom vars
-current_version:  3.1.1
+current_version:  3.3.1
 repo:             https://github.com/twbs/bootstrap
 sass_repo:        https://github.com/twbs/bootstrap-sass
 
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v3.1.1.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip
-  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.1.1.tar.gz
+  source:         https://github.com/twbs/bootstrap/archive/v3.3.1.zip
+  dist:           https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip
+  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.3.1.tar.gz
 
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
 cdn:
-  css:            //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
-  css_theme:      //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css
-  js:             //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
+  css:            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
+  css_theme:      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css
+  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

bower.json

@@ -1,6 +1,7 @@
 {
   "name": "bootstrap",
-  "version": "3.1.1",
+  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
+  "version": "3.3.1",
   "keywords": [
     "css",
     "js",
@@ -11,7 +12,9 @@
     "framework",
     "web"
   ],
+  "homepage": "http://getbootstrap.com",
   "main": [
+    "less/bootstrap.less",
     "dist/css/bootstrap.css",
     "dist/js/bootstrap.js",
     "dist/fonts/glyphicons-halflings-regular.eot",
@@ -20,7 +23,7 @@
     "dist/fonts/glyphicons-halflings-regular.woff"
   ],
   "ignore": [
-    ".*",
+    "/.*",
     "_config.yml",
     "CNAME",
     "composer.json",
@@ -30,6 +33,6 @@
     "test-infra"
   ],
   "dependencies": {
-    "jquery": ">= 1.9.0"
+    "jquery": ">= 1.9.1"
   }
 }

composer.json

@@ -28,7 +28,10 @@
   "license": "MIT",
   "extra": {
     "branch-alias": {
-      "dev-master": "3.0.x-dev"
+      "dev-master": "3.3.x-dev"
     }
+  },
+  "replace": {
+    "twitter/bootstrap": "self.version"
   }
 }

dist/css/bootstrap-theme.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.1.1 (http://getbootstrap.com)
+ * Bootstrap v3.3.1 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
@@ -29,6 +29,14 @@
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 }
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
 .btn:active,
 .btn.active {
   background-image: none;
@@ -55,25 +63,35 @@
   background-color: #e0e0e0;
   border-color: #dbdbdb;
 }
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
 .btn-primary {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #2b669a;
+  border-color: #245580;
 }
 .btn-primary:hover,
 .btn-primary:focus {
-  background-color: #2d6ca2;
+  background-color: #265a88;
   background-position: 0 -15px;
 }
 .btn-primary:active,
 .btn-primary.active {
-  background-color: #2d6ca2;
-  border-color: #2b669a;
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #265a88;
+  background-image: none;
 }
 .btn-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
@@ -95,6 +113,11 @@
   background-color: #419641;
   border-color: #3e8f3e;
 }
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
 .btn-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
   background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
@@ -115,6 +138,11 @@
   background-color: #2aabd2;
   border-color: #28a4c9;
 }
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
 .btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
   background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
@@ -135,6 +163,11 @@
   background-color: #eb9316;
   border-color: #e38d13;
 }
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
 .btn-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
   background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
@@ -155,6 +188,11 @@
   background-color: #c12e2a;
   border-color: #b92c28;
 }
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
 .thumbnail,
 .img-thumbnail {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
@@ -173,12 +211,12 @@
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  background-color: #357ebd;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+  background-color: #2e6da4;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
   background-repeat: repeat-x;
 }
 .navbar-default {
@@ -193,12 +231,13 @@
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
 }
+.navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f3f3f3));
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
   background-repeat: repeat-x;
   -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
           box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
@@ -216,12 +255,13 @@
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
 }
+.navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
-  background-image:      -o-linear-gradient(top, #222 0%, #282828 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#282828));
-  background-image:         linear-gradient(to bottom, #222 0%, #282828 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
   background-repeat: repeat-x;
   -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
           box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
@@ -235,6 +275,19 @@
 .navbar-fixed-bottom {
   border-radius: 0;
 }
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
 .alert {
   text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
@@ -285,11 +338,11 @@
   background-repeat: repeat-x;
 }
 .progress-bar {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-success {
@@ -324,6 +377,11 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
   background-repeat: repeat-x;
 }
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
 .list-group {
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
@@ -332,14 +390,19 @@
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
-  text-shadow: 0 -1px 0 #3071a9;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #3278b3;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
 }
 .panel {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@@ -354,11 +417,11 @@
   background-repeat: repeat-x;
 }
 .panel-primary > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-success > .panel-heading {

dist/fonts/glyphicons-halflings-regular.svg

@@ -226,4 +226,4 @@
 <glyph unicode="&#xe199;" d="M100 200h400v-155l-75 -45h350l-75 45v155h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170z" />
 <glyph unicode="&#xe200;" d="M121 700q0 -53 28.5 -97t75.5 -65q-4 -16 -4 -38q0 -74 52.5 -126.5t126.5 -52.5q56 0 100 30v-306l-75 -45h350l-75 45v306q46 -30 100 -30q74 0 126.5 52.5t52.5 126.5q0 24 -9 55q50 32 79.5 83t29.5 112q0 90 -61.5 155.5t-150.5 71.5q-26 89 -99.5 145.5 t-167.5 56.5q-116 0 -197.5 -81.5t-81.5 -197.5q0 -4 1 -11.5t1 -11.5q-14 2 -23 2q-74 0 -126.5 -52.5t-52.5 -126.5z" />
 </font>
-</defs></svg> 
+</defs></svg>

dist/js/npm.js

@@ -0,0 +1,13 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+require('../../js/transition.js')
+require('../../js/alert.js')
+require('../../js/button.js')
+require('../../js/carousel.js')
+require('../../js/collapse.js')
+require('../../js/dropdown.js')
+require('../../js/modal.js')
+require('../../js/tooltip.js')
+require('../../js/popover.js')
+require('../../js/scrollspy.js')
+require('../../js/tab.js')
+require('../../js/affix.js')

docs/_data/browser-bugs.yml

@@ -0,0 +1,201 @@
+-
+  browser: >
+    Internet Explorer 11
+  summary: >
+    Hovered element still remains in `:hover` state after scrolling away.
+  upstream_bug: >
+    IE#926665
+  origin: >
+    Bootstrap#14211
+
+-
+  browser: >
+    Internet Explorer 11
+  summary: >
+    When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
+  upstream_bug: >
+    IE#963961
+  origin: >
+    Bootstrap#14528
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `.table-bordered` with an empty `<tbody>` is missing borders.
+  upstream_bug: >
+    Mozilla#1023761
+  origin: >
+    Bootstrap#13453
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `max-width: 100%;` doesn't work inside tables.
+  upstream_bug: >
+    Mozilla#975632
+  origin: >
+    Bootstrap#10690
+
+-
+  browser: >
+    Firefox (Windows)
+  summary: >
+    Java applets that are descendants of elements with forced hardware acceleration using `translate3d(0,0,0)` are invisible.
+  upstream_bug: >
+    Mozilla#1048279
+  origin: >
+    Bootstrap#14124
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Button elements with `width: 100%` become cropped in long tables.
+  upstream_bug: >
+    Mozilla#1060131
+  origin: >
+    Bootstrap#14320
+
+-
+  browser: >
+    Firefox
+  summary: >
+    If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
+  upstream_bug: >
+    Mozilla#654072
+  origin: >
+    Bootstrap#793
+
+-
+  browser: >
+    Chrome (OS X)
+  summary: >
+    Clicking above `<input type="number">` increment button flashes the decrement button.
+  upstream_bug: >
+    Chromium#419108
+  origin: >
+    Offshoot of Bootstrap#8350 & Chromium#337668
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `display: table;` within `display: block;` forces sibling content to new line.
+  upstream_bug: >
+    Chromium#309483
+  origin: >
+    Bootstrap#9950
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Incorrect viewport size used for media queries when printing.
+  upstream_bug: >
+    Chromium#273306
+  origin: >
+    Bootstrap#12078
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    Scrollbar clipped in `select[multiple]` with padding.
+  upstream_bug: >
+    WebKit#128489
+  origin: >
+    Bootstrap#12536
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `display: table-cell; width: 100%;` doesn't work correctly on `<input type="date">`.
+  upstream_bug: >
+    Chromium#346051
+  origin: >
+    Bootstrap#12548
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `<input type="password">` sporadically causes bad widths on floated elements.
+  upstream_bug: >
+    Chromium#377346
+  origin: >
+    Bootstrap#13892
+
+-
+  browser: >
+    Chrome
+  summary: >
+    CSS infinite linear animation with alpha transparency leaks memory.
+  upstream_bug: >
+    Chromium#429375
+  origin: >
+    Bootstrap#14409
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    Weird button behavior with some `<input type="number">` elements.
+  upstream_bug: >
+    WebKit#137269
+  origin: >
+    Bootstrap#8350,
+    Normalize#283,
+    Chromium#337668
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    `display: table-cell;` within media query renders incorrectly when resizing the window.
+  upstream_bug: >
+    WebKit#138167
+  origin: >
+    Bootstrap#9774
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `transform: translate3d(0,0,0);` rendering bug.
+  upstream_bug: >
+    WebKit#138162, Safari#18804973
+  origin: >
+    Bootstrap#14603
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    Small font size when printing webpage with fixed-width `.container`.
+  upstream_bug: >
+    WebKit#138192
+  origin: >
+    Bootstrap#14868
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Text input's cursor doesn't move while scrolling the page.
+  upstream_bug: >
+    WebKit#138201, Safari#18819624
+  origin: >
+    Bootstrap#14708
+
+-
+  browser: >
+    Chrome (Windows & Linux)
+  summary: >
+    Body content can be scrolled even though `overflow: hidden;` is applied to it.
+  upstream_bug: >
+    Chromium#429604
+  origin: >
+    Bootstrap#14972

docs/_data/core-team.yml

@@ -17,3 +17,7 @@
 - name: XhmikosR
   user: xhmikosr
   gravatar: e37759b1ea0125d4e97b1e00b5eed26f
+
+- name: Heinrich Fenkart
+  user: hnrch02
+  gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f

docs/_data/showcase.yml

@@ -1,19 +1,19 @@
-- name: Little
-  url: http://littleco.com
-  expo_url: http://expo.getbootstrap.com/2014/02/12/little/
-  img: http://expo.getbootstrap.com/screenshots/little.jpg
+- name: Lyft
+  url: https://www.lyft.com
+  expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
+  img: lyft
 
-- name: Engine Yard
-  url: http://engineyard.com
-  expo_url: http://expo.getbootstrap.com/2014/02/10/engine-yard/
-  img: http://expo.getbootstrap.com/screenshots/engine-yard.jpg
+- name: Vogue
+  url: http://www.vogue.com
+  expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
+  img: vogue
 
-- name: Webflow
-  url: http://webflow.com
-  expo_url: http://expo.getbootstrap.com/2014/02/04/webflow/
-  img: http://expo.getbootstrap.com/screenshots/webflow.jpg
+- name: Riot Design
+  url: http://riotdesign.eu/en/
+  expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
+  img: riot
 
-- name: Sentry
-  url: https://getsentry.com
-  expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
-  img: http://expo.getbootstrap.com/screenshots/sentry.jpg
+- name: Newsweek
+  url: http://www.newsweek.com/
+  expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
+  img: newsweek

docs/_data/translations.yml

@@ -0,0 +1,44 @@
+- name: Chinese
+  code: zh
+  description: Bootstrap 中文文档
+  url: http://v3.bootcss.com/
+
+- name: Danish
+  code: da
+  description: Bootstrap på Dansk
+  url: http://getbootstrap.dk/
+
+- name: French
+  code: fr
+  description: Bootstrap en Français
+  url: http://www.oneskyapp.com/docs/bootstrap/fr
+
+- name: German
+  code: de
+  description: Bootstrap auf Deutsch
+  url: http://holdirbootstrap.de/
+
+- name: Italian
+  code: it
+  description: Bootstrap in Italiano
+  url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
+
+- name: Korean
+  code: ko
+  description: Bootstrap 한국어
+  url: http://bootstrapk.com/BS3/
+
+- name: Russian
+  code: ru
+  description: Bootstrap по-русски
+  url: http://www.oneskyapp.com/docs/bootstrap/ru
+
+- name: Spanish
+  code: es
+  description: Bootstrap en Español
+  url: http://www.oneskyapp.com/docs/bootstrap/es
+
+- name: Ukrainian
+  code: uk
+  description: Bootstrap українською
+  url: http://twbs.docs.org.ua

docs/_includes/components/alerts.html

@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="alerts" class="page-header">Alerts</h1>
 
-  <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>
+  <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
 
   <h2 id="alerts-examples">Examples</h2>
   <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
@@ -32,17 +32,21 @@
 <div class="alert alert-danger" role="alert">...</div>
 {% endhighlight %}
 
-  <h2 id="alerts-dismissable">Dismissable alerts</h2>
-  <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
+  <h2 id="alerts-dismissible">Dismissible alerts</h2>
+  <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
+  <div class="bs-callout bs-callout-info">
+    <h4>Requires JavaScript alert plugin</h4>
+    <p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
+  </div>
   <div class="bs-example">
-    <div class="alert alert-warning alert-dismissable" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <div class="alert alert-warning alert-dismissible" role="alert">
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-warning alert-dismissable" role="alert">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+<div class="alert alert-warning alert-dismissible" role="alert">
+  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 {% endhighlight %}

docs/_includes/components/badges.html

@@ -5,9 +5,17 @@
 
   <div class="bs-example">
     <a href="#">Inbox <span class="badge">42</span></a>
+    <br><br>
+    <button class="btn btn-primary" type="button">
+      Messages <span class="badge">4</span>
+    </button>
   </div>
 {% highlight html %}
 <a href="#">Inbox <span class="badge">42</span></a>
+
+<button class="btn btn-primary" type="button">
+  Messages <span class="badge">4</span>
+</button>
 {% endhighlight %}
 
   <h4>Self collapsing</h4>
@@ -21,41 +29,17 @@
   <h4>Adapts to active nav states</h4>
   <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>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages <span class="badge">3</span></a></li>
+    <ul class="nav nav-pills" role="tablist">
+      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
     </ul>
-    <br>
-    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
-      <li class="active">
-        <a href="#">
-          <span class="badge pull-right">42</span>
-          Home
-        </a>
-      </li>
-      <li><a href="#">Profile</a></li>
-      <li>
-        <a href="#">
-          <span class="badge pull-right">3</span>
-          Messages
-        </a>
-      </li>
-    </ul>
-    <br>
-    <button class="btn btn-primary" type="button">
-      Messages <span class="badge">4</span>
-    </button>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills nav-stacked">
-  <li class="active">
-    <a href="#">
-      <span class="badge pull-right">42</span>
-      Home
-    </a>
-  </li>
-  ...
+<ul class="nav nav-pills" role="tablist">
+  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
+  <li role="presentation"><a href="#">Profile</a></li>
+  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
 </ul>
 {% endhighlight %}
 </div>

docs/_includes/components/button-dropdowns.html

@@ -12,7 +12,7 @@
   <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
   <div class="bs-example">
     <div class="btn-group">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -22,7 +22,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -32,7 +32,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -42,7 +42,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
+      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -52,7 +52,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
+      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -62,7 +62,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -75,7 +75,7 @@
 {% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     Action <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -93,7 +93,7 @@
   <div class="bs-example">
     <div class="btn-group">
       <button type="button" class="btn btn-default">Default</button>
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -107,7 +107,7 @@
     </div><!-- /btn-group -->
     <div class="btn-group">
       <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -121,7 +121,7 @@
     </div><!-- /btn-group -->
     <div class="btn-group">
       <button type="button" class="btn btn-success">Success</button>
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -135,7 +135,7 @@
     </div><!-- /btn-group -->
     <div class="btn-group">
       <button type="button" class="btn btn-info">Info</button>
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -149,7 +149,7 @@
     </div><!-- /btn-group -->
     <div class="btn-group">
       <button type="button" class="btn btn-warning">Warning</button>
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -163,7 +163,7 @@
     </div><!-- /btn-group -->
     <div class="btn-group">
       <button type="button" class="btn btn-danger">Danger</button>
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
@@ -180,7 +180,7 @@
 <!-- Split button -->
 <div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
-  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
@@ -199,7 +199,7 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
           Large button <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -213,7 +213,7 @@
     </div><!-- /btn-toolbar -->
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
           Small button <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -227,7 +227,7 @@
     </div><!-- /btn-toolbar -->
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
           Extra small button <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -243,30 +243,30 @@
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
     Large button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
 
 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
     Small button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
 
 <!-- Extra small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
     Extra small button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
@@ -278,7 +278,7 @@
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group dropup">
         <button type="button" class="btn btn-default">Dropup</button>
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           <span class="caret"></span>
           <span class="sr-only">Toggle Dropdown</span>
         </button>
@@ -292,7 +292,7 @@
       </div><!-- /btn-group -->
       <div class="btn-group dropup">
         <button type="button" class="btn btn-primary">Right dropup</button>
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           <span class="caret"></span>
           <span class="sr-only">Toggle Dropdown</span>
         </button>
@@ -309,11 +309,11 @@
 {% highlight html %}
 <div class="btn-group dropup">
   <button type="button" class="btn btn-default">Dropup</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     <!-- Dropdown menu links -->
   </ul>
 </div>

docs/_includes/components/button-groups.html

@@ -8,17 +8,24 @@
     <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>
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Ensure correct <code>role</code> and provide a label</h4>
+    <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
+    <p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</p>
+    <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
+  </div>
+
   <h3 id="btn-groups-single">Basic example</h3>
   <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
   <div class="bs-example">
-    <div class="btn-group" style="margin: 9px 0 5px;">
+    <div class="btn-group" role="group" aria-label="Basic example">
       <button type="button" class="btn btn-default">Left</button>
       <button type="button" class="btn btn-default">Middle</button>
       <button type="button" class="btn btn-default">Right</button>
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">Left</button>
   <button type="button" class="btn btn-default">Middle</button>
   <button type="button" class="btn btn-default">Right</button>
@@ -28,79 +35,74 @@
   <h3 id="btn-groups-toolbar">Button toolbar</h3>
   <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
   <div class="bs-example">
-    <div class="btn-toolbar" role="toolbar" style="margin: 0;">
-      <div class="btn-group">
+    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+      <div class="btn-group" role="group" aria-label="First group">
         <button type="button" class="btn btn-default">1</button>
         <button type="button" class="btn btn-default">2</button>
         <button type="button" class="btn btn-default">3</button>
         <button type="button" class="btn btn-default">4</button>
       </div>
-      <div class="btn-group">
+      <div class="btn-group" role="group" aria-label="Second group">
         <button type="button" class="btn btn-default">5</button>
         <button type="button" class="btn btn-default">6</button>
         <button type="button" class="btn btn-default">7</button>
       </div>
-      <div class="btn-group">
+      <div class="btn-group" role="group" aria-label="Third group">
         <button type="button" class="btn btn-default">8</button>
       </div>
     </div>
   </div>
 {% highlight html %}
-<div class="btn-toolbar" role="toolbar">
-  <div class="btn-group">...</div>
-  <div class="btn-group">...</div>
-  <div class="btn-group">...</div>
+<div class="btn-toolbar" role="toolbar" aria-label="...">
+  <div class="btn-group" role="group" aria-label="...">...</div>
+  <div class="btn-group" role="group" aria-label="...">...</div>
+  <div class="btn-group" role="group" aria-label="...">...</div>
 </div>
 {% endhighlight %}
 
   <h3 id="btn-groups-sizing">Sizing</h3>
   <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
   <div class="bs-example">
-    <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group btn-group-lg">
-        <button type="button" class="btn btn-default">Left</button>
-        <button type="button" class="btn btn-default">Middle</button>
-        <button type="button" class="btn btn-default">Right</button>
-      </div>
+    <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+      <button type="button" class="btn btn-default">Left</button>
+      <button type="button" class="btn btn-default">Middle</button>
+      <button type="button" class="btn btn-default">Right</button>
     </div>
-    <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group">
-        <button type="button" class="btn btn-default">Left</button>
-        <button type="button" class="btn btn-default">Middle</button>
-        <button type="button" class="btn btn-default">Right</button>
-      </div>
+    <br>
+    <div class="btn-group" role="group" aria-label="Default button group">
+      <button type="button" class="btn btn-default">Left</button>
+      <button type="button" class="btn btn-default">Middle</button>
+      <button type="button" class="btn btn-default">Right</button>
     </div>
-    <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group btn-group-sm">
-        <button type="button" class="btn btn-default">Left</button>
-        <button type="button" class="btn btn-default">Middle</button>
-        <button type="button" class="btn btn-default">Right</button>
-      </div>
+    <br>
+    <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+      <button type="button" class="btn btn-default">Left</button>
+      <button type="button" class="btn btn-default">Middle</button>
+      <button type="button" class="btn btn-default">Right</button>
     </div>
-    <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group btn-group-xs">
-        <button type="button" class="btn btn-default">Left</button>
-        <button type="button" class="btn btn-default">Middle</button>
-        <button type="button" class="btn btn-default">Right</button>
-      </div>
+    <br>
+    <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
+      <button type="button" class="btn btn-default">Left</button>
+      <button type="button" class="btn btn-default">Middle</button>
+      <button type="button" class="btn btn-default">Right</button>
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group btn-group-lg">...</div>
-<div class="btn-group">...</div>
-<div class="btn-group btn-group-sm">...</div>
-<div class="btn-group btn-group-xs">...</div>
+<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
+<div class="btn-group" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}
 
   <h3 id="btn-groups-nested">Nesting</h3>
   <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
   <div class="bs-example">
-    <div class="btn-group">
+    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
       <button type="button" class="btn btn-default">1</button>
       <button type="button" class="btn btn-default">2</button>
 
-      <div class="btn-group">
-        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <div class="btn-group" role="group">
+        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           Dropdown
           <span class="caret"></span>
         </button>
@@ -112,16 +114,16 @@
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">1</button>
   <button type="button" class="btn btn-default">2</button>
 
-  <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
       Dropdown
       <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       <li><a href="#">Dropdown link</a></li>
       <li><a href="#">Dropdown link</a></li>
     </ul>
@@ -132,11 +134,11 @@
   <h3 id="btn-groups-vertical">Vertical variation</h3>
   <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
   <div class="bs-example">
-    <div class="btn-group-vertical">
+    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
       <button type="button" class="btn btn-default">Button</button>
       <button type="button" class="btn btn-default">Button</button>
-      <div class="btn-group">
-        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <div class="btn-group" role="group">
+        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           Dropdown
           <span class="caret"></span>
         </button>
@@ -147,8 +149,8 @@
       </div>
       <button type="button" class="btn btn-default">Button</button>
       <button type="button" class="btn btn-default">Button</button>
-      <div class="btn-group">
-        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <div class="btn-group" role="group">
+        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           Dropdown
           <span class="caret"></span>
         </button>
@@ -157,8 +159,8 @@
           <li><a href="#">Dropdown link</a></li>
         </ul>
       </div>
-      <div class="btn-group">
-        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <div class="btn-group" role="group">
+        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           Dropdown
           <span class="caret"></span>
         </button>
@@ -167,8 +169,8 @@
           <li><a href="#">Dropdown link</a></li>
         </ul>
       </div>
-      <div class="btn-group">
-        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <div class="btn-group" role="group">
+        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           Dropdown
           <span class="caret"></span>
         </button>
@@ -180,7 +182,7 @@
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group-vertical">
+<div class="btn-group-vertical" role="group" aria-label="...">
   ...
 </div>
 {% endhighlight %}
@@ -194,24 +196,24 @@
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>IE8 and borders</h4>
-    <p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
+    <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
     <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
   </div>
 
   <h4>With <code>&lt;a&gt;</code> elements</h4>
   <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
   <div class="bs-example">
-    <div class="btn-group btn-group-justified">
-      <a class="btn btn-default" role="button">Left</a>
-      <a class="btn btn-default" role="button">Middle</a>
-      <a class="btn btn-default" role="button">Right</a>
+    <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
+      <a href="#" class="btn btn-default" role="button">Left</a>
+      <a href="#" class="btn btn-default" role="button">Middle</a>
+      <a href="#" class="btn btn-default" role="button">Right</a>
     </div>
     <br>
-    <div class="btn-group btn-group-justified">
-      <a class="btn btn-default" role="button">Left</a>
-      <a class="btn btn-default" role="button">Middle</a>
-      <div class="btn-group">
-        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
+      <a href="#" class="btn btn-default" role="button">Left</a>
+      <a href="#" class="btn btn-default" role="button">Middle</a>
+      <div class="btn-group" role="group">
+        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
           Dropdown <span class="caret"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
@@ -225,35 +227,40 @@
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group btn-group-justified">
+<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
 </div>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+  <h4>Links acting as buttons</h4>
+  <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
+  </div>
+
   <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>
+  <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 work around that.</p>
   <div class="bs-example">
-    <div class="btn-group btn-group-justified">
-      <div class="btn-group">
+    <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
+      <div class="btn-group" role="group">
         <button type="button" class="btn btn-default">Left</button>
       </div>
-      <div class="btn-group">
+      <div class="btn-group" role="group">
         <button type="button" class="btn btn-default">Middle</button>
       </div>
-      <div class="btn-group">
+      <div class="btn-group" role="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">
+<div class="btn-group btn-group-justified" role="group" aria-label="...">
+  <div class="btn-group" role="group">
     <button type="button" class="btn btn-default">Left</button>
   </div>
-  <div class="btn-group">
+  <div class="btn-group" role="group">
     <button type="button" class="btn btn-default">Middle</button>
   </div>
-  <div class="btn-group">
+  <div class="btn-group" role="group">
     <button type="button" class="btn btn-default">Right</button>
   </div>
 </div>

docs/_includes/components/dropdowns.html

@@ -7,7 +7,7 @@
   <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
         Dropdown
         <span class="caret"></span>
       </button>
@@ -15,14 +15,13 @@
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
       </ul>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="dropdown">
-  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
     Dropdown
     <span class="caret"></span>
   </button>
@@ -30,7 +29,6 @@
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-    <li role="presentation" class="divider"></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
   </ul>
 </div>
@@ -56,7 +54,7 @@
   <p>Add a header to label sections of actions in any dropdown menu.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
         Dropdown
         <span class="caret"></span>
       </button>
@@ -65,7 +63,6 @@
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
         <li role="presentation" class="dropdown-header">Dropdown header</li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
       </ul>
@@ -73,10 +70,33 @@
   </div><!-- /example -->
 {% highlight html %}
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
+  ...
   <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
+</ul>
+{% endhighlight %}
+
+  <h3 id="dropdowns-divider">Divider</h3>
+  <p>Add a divider to separate series of links in a dropdown menu.</p>
+  <div class="bs-example">
+    <div class="dropdown clearfix">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
+        Dropdown
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
+        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+        <li role="presentation" class="divider"></li>
+        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div><!-- /example -->
+{% highlight html %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
+  ...
   <li role="presentation" class="divider"></li>
-  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
 </ul>
 {% endhighlight %}
@@ -85,7 +105,7 @@
   <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
         Dropdown
         <span class="caret"></span>
       </button>

docs/_includes/components/glyphicons.html

@@ -7,7 +7,7 @@
     <ul class="bs-glyphicons-list">
       {% for iconClassName in site.data.glyphicons %}
         <li>
-          <span class="glyphicon {{ iconClassName }}"></span>
+          <span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span>
           <span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
         </li>
       {% endfor %}
@@ -21,8 +21,28 @@
     <h4>Don't mix with other components</h4>
     <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>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Only for use on empty elements</h4>
+    <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
+  </div>
+  <div class="bs-callout bs-callout-info">
+    <h4>Changing the icon font location</h4>
+    <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
+    <ul>
+      <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
+      <li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
+      <li>Change the <code>url()</code> paths in the compiled CSS.</li>
+    </ul>
+    <p>Use whatever option best suits your specific development setup.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Accessible icons</h4>
+    <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
+    <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
+    <p>If you're creating controls with no other text (such as a <code>&lt;button&gt;</code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p>
+  </div>
 {% highlight html %}
-<span class="glyphicon glyphicon-search"></span>
+<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
 {% endhighlight %}
 
 
@@ -31,22 +51,41 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
+        <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
+        <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
+        <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
+        <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
       </div>
     </div>
     <div class="btn-toolbar" role="toolbar">
-      <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
-      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
-      <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
-      <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
+      <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
+      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
+      <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
+      <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
     </div>
   </div>
 {% highlight html %}
+<button type="button" class="btn btn-default" aria-label="Left Align">
+  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
+</button>
+
 <button type="button" class="btn btn-default btn-lg">
-  <span class="glyphicon glyphicon-star"></span> Star
+  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
 </button>
+{% endhighlight %}
+  <p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
+  <div class="bs-example">
+    <div class="alert alert-danger" role="alert">
+      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+      <span class="sr-only">Error:</span>
+      Enter a valid email address
+    </div>
+  </div>
+{% highlight html %}
+<div class="alert alert-danger" role="alert">
+  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+  <span class="sr-only">Error:</span>
+  Enter a valid email address
+</div>
 {% endhighlight %}
 </div>

docs/_includes/components/input-groups.html

@@ -1,11 +1,12 @@
 <div class="bs-docs-section">
   <h1 id="input-groups" class="page-header">Input groups</h1>
 
-  <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>
+  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. 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>
+    <h4>Textual <code>&lt;input&gt;</code>s only</h4>
     <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+    <p>Avoid using <code>&lt;textarea&gt;</code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Tooltips &amp; popovers in input groups require special setting</h4>
@@ -186,7 +187,7 @@
       <div class="col-lg-6">
         <div class="input-group">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -202,7 +203,7 @@
         <div class="input-group">
           <input type="text" class="form-control">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -220,8 +221,8 @@
   <div class="col-lg-6">
     <div class="input-group">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
@@ -236,8 +237,8 @@
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu dropdown-menu-right">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
@@ -257,7 +258,7 @@
         <div class="input-group">
           <div class="input-group-btn">
             <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
@@ -277,7 +278,7 @@
           <input type="text" class="form-control">
           <div class="input-group-btn">
             <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>

docs/_includes/components/jumbotron.html

@@ -6,14 +6,14 @@
     <div class="jumbotron">
       <h1>Hello, world!</h1>
       <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
+      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
     </div>
   </div>
 {% highlight html %}
 <div class="jumbotron">
   <h1>Hello, world!</h1>
   <p>...</p>
-  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
+  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
 </div>
 {% endhighlight %}
   <p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>

docs/_includes/components/labels.html

@@ -32,4 +32,9 @@
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
 {% endhighlight %}
+
+  <div class="bs-callout bs-callout-info">
+    <h4>Have tons of labels?</h4>
+    <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
+  </div>
 </div>

docs/_includes/components/media.html

@@ -4,11 +4,11 @@
   <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>
-  <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
+  <p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
   <div class="bs-example">
     <div class="media">
-      <a class="pull-left" href="#">
-        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+      <a class="media-left" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
       </a>
       <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
@@ -16,15 +16,15 @@
       </div>
     </div>
     <div class="media">
-      <a class="pull-left" href="#">
-        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+      <a class="media-left" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
       </a>
       <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         <div class="media">
-          <a class="pull-left" href="#">
-            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+          <a class="media-left" href="#">
+            <img data-src="holder.js/64x64" alt="Generic placeholder image">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Nested media heading</h4>
@@ -33,17 +33,85 @@
         </div>
       </div>
     </div>
+    <div class="media">
+      <div class="media-body">
+        <h4 class="media-heading">Media heading</h4>
+        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+      </div>
+      <a class="media-right" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+    </div>
+    <div class="media">
+      <a class="media-left" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+      <div class="media-body">
+        <h4 class="media-heading">Media heading</h4>
+        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+      </div>
+      <a class="media-right" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+    </div>
   </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="media">
-  <a class="pull-left" href="#">
-    <img class="media-object" src="..." alt="...">
+  <a class="media-left" href="#">
+    <img src="..." alt="...">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Media heading</h4>
     ...
   </div>
 </div>
+{% endhighlight %}
+
+  <p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
+  <h3 id="media-alignment">Media alignment</h3>
+  <p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
+  <div class="bs-example">
+    <div class="media">
+      <a class="media-left" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+      <div class="media-body">
+        <h4 class="media-heading">Top aligned media</h4>
+        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      </div>
+    </div>
+    <div class="media">
+      <a class="media-left media-middle" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+      <div class="media-body">
+        <h4 class="media-heading">Middle aligned media</h4>
+        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      </div>
+    </div>
+    <div class="media">
+      <a class="media-left media-bottom" href="#">
+        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+      <div class="media-body">
+        <h4 class="media-heading">Bottom aligned media</h4>
+        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="media">
+  <a class="media-left media-middle" href="#">
+    <img data-src="..." alt="...">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Middle aligned media</h4>
+    ...
+  </div>
+</div>
 {% endhighlight %}
 
   <h3 id="media-list">Media list</h3>
@@ -51,24 +119,24 @@
   <div class="bs-example">
     <ul class="media-list">
       <li class="media">
-        <a class="pull-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+        <a class="media-left" href="#">
+          <img data-src="holder.js/64x64" alt="Generic placeholder image">
         </a>
         <div class="media-body">
           <h4 class="media-heading">Media heading</h4>
           <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
           <!-- Nested media object -->
           <div class="media">
-            <a class="pull-left" href="#">
-              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+            <a class="media-left" href="#">
+              <img data-src="holder.js/64x64" alt="Generic placeholder image">
             </a>
             <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
               <!-- Nested media object -->
               <div class="media">
-                <a class="pull-left" href="#">
-                  <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+                <a class="media-left" href="#">
+                  <img data-src="holder.js/64x64" alt="Generic placeholder image">
                 </a>
                 <div class="media-body">
                   <h4 class="media-heading">Nested media heading</h4>
@@ -79,8 +147,8 @@
           </div>
           <!-- Nested media object -->
           <div class="media">
-            <a class="pull-left" href="#">
-              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+            <a class="media-left" href="#">
+              <img data-src="holder.js/64x64" alt="Generic placeholder image">
             </a>
             <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
@@ -89,22 +157,13 @@
           </div>
         </div>
       </li>
-      <li class="media">
-        <a class="pull-right" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-        </a>
-        <div class="media-body">
-          <h4 class="media-heading">Media heading</h4>
-          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-        </div>
-      </li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="media-list">
   <li class="media">
-    <a class="pull-left" href="#">
-      <img class="media-object" src="..." alt="...">
+    <a class="media-left" href="#">
+      <img src="..." alt="...">
     </a>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>

docs/_includes/components/navbar.html

@@ -3,6 +3,7 @@
 
   <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>
+  <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
 
   <div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
     <h4>Overflowing content</h4>
@@ -14,8 +15,17 @@
     </ol>
   </div>
   <div class="bs-callout bs-callout-danger">
-    <h4>Requires JavaScript</h4>
+    <h4>Requires JavaScript plugin</h4>
     <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
+    <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
+  </div>
+  <div class="bs-callout bs-callout-info">
+    <h4>Changing the collapsed mobile navbar breakpoint</h4>
+    <p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Make navbars accessible</h4>
+    <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
   </div>
 
   <div class="bs-example">
@@ -23,7 +33,7 @@
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -35,10 +45,10 @@
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Link</a></li>
+            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Link</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
@@ -59,7 +69,7 @@
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Link</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
@@ -78,7 +88,7 @@
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -90,11 +100,11 @@
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
-        <li class="active"><a href="#">Link</a></li>
+        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
         <li><a href="#">Link</a></li>
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <ul class="dropdown-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu" role="menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
             <li><a href="#">Something else here</a></li>
@@ -114,8 +124,8 @@
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Link</a></li>
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <ul class="dropdown-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu" role="menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
             <li><a href="#">Something else here</a></li>
@@ -129,15 +139,31 @@
 </nav>
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-danger">
-    <h4>Plugin dependency</h4>
-    <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
-  </div>
 
-  <div class="bs-callout bs-callout-warning">
-    <h4>Make navbars accessible</h4>
-    <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
+  <h2 id="navbar-brand-image">Brand image</h2>
+  <p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
+  <div class="bs-example">
+    <nav class="navbar navbar-default" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <a class="navbar-brand" href="#">
+            <img alt="Brand" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAMU0lEQVR4AeyZzU4TARSFhx08ienKiAsSSymliEjpdBBqoUX++gMJupZC/6B0prPUhIRI4qvIwoUhxAU8gBKiS0kkYQW5npsUAZloy4xYp3fxJSxYDMOXc07uKETkGJmI6clo5iLYmtfMbXAwP2IeA2oNqo6Q0W6N40ykegC205HqFlgEHiedcECq6j0ItQGZDptcABGqXiLVQ7CRVo3OfyLYU1+uDQ+iQaqdyy8cD0Szj9fp2cM1SvSVaNxfoFhPnvD7LmDFEaLdzQP/Xfz/iQeKNNm/SjODZUqFK7/IZuykVV2Ldi+33YpgMLsLibV7LlUqbNDUwBrLxA8sMlkI1bwsWwHpcgiJEiWHL2RLRYzdlKp3/TXBkE4dXIWQ6gzQXKhC8b6iCPWfy2TF2CXGA3maGSpTGpKBs3TE2EyG9Q5HBYNYHki1f55YLJbI5A6hxuqERZsbrtREM/aRaB5HBEMl+hZGzCPsLd5WIpQL0skOif4SIcW4No9SquGzJRjkUpFaJzzeJwJFkckV6WSfWG+e9xmLdoJGU28kGOTyslzJYZ1i/rwLZJJ0soX3KlG8t9mh9ZpkurchwXBsu7Ogmd+SIcjVk2+5dBKZ6gPPAcnKfMpAXeqeugRDarVjb+0huVgukcldVWdDqKwVNcmQZKq+hzRr/6NgGc3c5M2FWhShWjadsg0R9S3zJmPJNn8rGB9RkV6nzg96SafmlYnJ2ibmz7Fgp/gS0GUpGH/+gVwfcYqQIS7p1BCjNeLBIqUi+i5+brsmGNJL4yOqC9JJZLoVoayZDa1TUq1o1wRDen3AhV5kcuEQty9T/cR6c5RS9Z0rgiG9OvFtUYRq8apjRh1genCNsMXuXwimma+QXpJOUnWN82DpGjH/Cgv2+qdguHl9lXSSqrupUFbgAPuF3UI9GnenBlal6qyRdLohiWCBkuGKB/VYfTHuz0vVMZJOjoH3wYI9V7D437ZSOskQd16mJ9bQTKj8Rpl+VH4v6SRVZ1soCyYHSu+URLD0WWSSqrMrkxXxYOGTMhEofJeqk3SyK9MFL8/hc8WxEuvJSzpJ1dmWyYqx7izxR24Z4pJOtmWyYtS7RIpUXeNIOtWP0tpVJ0P8Rzt39ptlEcVx/HDHPwJeIUvRondcSG3LoneiFKIXKG3ZRMGyaGSRVcJarKxuiUQWNxCI7DS2mFAEb0ohCg0mGilqgiiBPJ4M9SX1TF4Z3jnvb9r3TPK9NdF+cuZ5Z57HeJi4x2Rk06n3b3V4ULKnu6PUz5wuXejs9X1/tiPbv/eka8WCHdnMSW/3iekkQcko9enUh5fDd+zQt1njyp3ZC2MX9XpMstkZpb7VldI6z5PuvU2fA0DFweSLUn8QL8V1/drvbjtNfTrJZJT6gzh24aFtXLkzvekUEAEwGbDwrZOf0RaippMmMPyZk62766fOXxwyLKbwKOkzJwnMkI1ZmBIm0VMjekapH2DKZcieZ2R4UBKT7NWM8KAMWOg63XweP50kJm+U+vWKf9lavmB7cph8UeqXv/5lq4uPMECgFIEpYzJgYWvHps8AmMIi4HQyYBEe+GM8iGtGqb+aYiv/mj5xZYTppBel/hZm/mXrkw8OgTHJxo14JRel/uJc7MWXyLGuV3h6rOJfczu62+7+2Pz6Db+Gc6V410htHQmBkhEeEwCY/vUKH4a+6R7C+deeKrCbf/6Fx+Sr/G6U+jviCsCKfsWyf+8JTWPJYPJFKWGSqQBDXK+4aaa1ls3fVjxQ5WERGhQAGOy+jp/RAMAUplNABMYEAHYCevl7sf0KBJg+Jn+U+udQCsCg1ysbVnysDgyFaWz5LBHhMcnwwHRPxDWA4UH5o9Q/h1IABr+v421SFxgIky9KDRQAmAImADA8KG+U+udQsdc+Boa+rzvfdgEMTGBSi1L/HEoBmAIm7ARDYRI9KiPkdMIBw97VxQTGV1EpgRIRHhMYGOCKJeb9ZGvzORwm0csiCsCkDAoADHBfN61mRRZzbW/8FA/K05juKAAU4HpFFxjgvo6viw5mMdfE6tfxmPJEKX6sqQ8Mc/k7qfqN2NujEiYuHJM3SvBjzR5pAQNc/joQMdfUmuWA6RQWJfixpj4wwH3dvj1x3wk7eug0AFN4hMYEAKYJSsRTJvq519XOn92zV0qgRI/MdFGRtrrEgOnf182but5tiRqvSM+rX58kJl+EnE4AYO6PzlcrBbd0/tZc+/Ycz8XXQA4BL21cyWEa7YkA0ykoWz1wpQ5KRBJUWt/X2XLPXA4XHlN4lBImmQE7erA1q6legAEVIQqCALheKeWptXTeFiQmADDA9UopLv6hoIdJtRkiQk4nmaikH+pbT53L5tav7w2gRNXdEWA6BZXZcge1vF0mj8kXIaeTAQtaPNG+y2qqFiQJSjT8bgTBFHAibktunW/xNINj8oMSUWIfa4ps+de2xr3JYfJFYFAKwAyZxlYX3nQXATApADNkiOkkQclIH5MB014N9Wsh00kUDgz/OZTG/1+ef/YX0GVvQa9CK/w7TaiajwflifCY8hd78Ss1RTkR5196bvviowX3y097fbnnGAqTqCqXBJba93UawCAn4oxNc8o5xHXPLYViEpUxsIQwicboAEOeiLtJo7WOHGxVBSURCVAiSgXUGJkeMOwVC2+fm93E0ZhiEyrnF206yUKB4T+HUnhWOZ7E9cq65R/pHFts3FO06SSbJiI0Jjww3PVKC/8AiL3OtbUXbTpJUDICgEoRGOREnB/KNbZJGCZflPq3dfrAoPd1buLEXkvmbo671QVU+Z8o/EFcFZRIHxj0vs49M8VeO9//yo9JH5SIGE7K39dpHEiCMDlQooa6NfH/HXcfg2DyRXhMMn1guMtfX7EXX10VDKoyUgQFhQEGwAQAhgHFTe0RATChgcFBVfVMAxgEk2gYAwNgwgNL7L5OFVgRMfmi1D+H0geGv6+LvToYmCqoYfcfpf5tnS4w/H0dHlj4dAqJEgMl0gEmoaCuV5bMfRcATAWT6EmOksEEAAa4/BUdOdiiA0x/OglMslBggPs6fWDY+7qua79lsRejLT4mUb2L0sFUPGASEea+7ovdRzONxf/ceFtdACZfhPlYEwssAJPaificujVq7+ovaWiCYAoABrv8FSnd0+lf/oJw8UKCElGKH2vqA8Nd/q5d9qEqrnNn2iGYREPvRkBMIGBH9UH5Yblfd9pr68bdOUwAUCIKwAS4XsEBqywwPt9yf+yWU2fFxNL8dG18RQMCk6iiO0oMlCj24mMB8VV2R4QSWA6zxKQPqiJPBMUkCrhGsSWm15RnFxdtOuWvLpcEBr38NWAFnH0BMAlQIgrCBLivs3V/2/74itfCQClg8kVpYBIFALM1p3Y1ZDoFA8ODMmDhxxK7FKZTvAiAKeiYwFaeS+0DLVEexDVzwOCXv3my5V8tJ8+GTidIBJlOAdmSa8uGXVhMAREeUwgwO+ta3NCEBxUQBWCCfFtn696W+AwfReDRhEV4UFPzZMA62n/kqfVOr8A0akitiAIwQb6vM1i9BlMAMBAmX6V2In/4wDfZS+MX9VZQIlKYTgGYDBhPKr5HPJLNrl2dEqZoUXGmkwFjSDlMfMyA3/50QIkIjwn/Wi+HPxHHY1KJkKDSxyQzTGFRn8SEuvw1UCKyrc4wKfY3MYY/bDoZKKV+JQbyQ9KgDFOv64khU1yjhtZeIj4HO24P4oVmmHxVDKs7Tvw+WJNtdQaqAEz5gDXR6PIZtfYgHppNJ2+De1ZZVv8ijXt81iDb6mQ2nYJBiUaXT3+IsiwjRnHVtrr82XQKrpNt0b/AVtl0EhmmwlqVA1Y1fNpgm0621cWM/zsOzgHrnmLN9iBu0ylSzd2u7gFjPNW21dl0ilS1AMZY+nGtNp0MU4G1cv0EsG5kZdxtm0621T1gt7ky50kAyyGrW2ugbDo9YGtzlvIA68+dMUw2nQI7w/X3A5PIBnBdhsmm0312nRsoLXmB5ZCVczcMlGH6n25w5dKQBOZDVsXdNEwuwyS7yVUJOwJYfmQjw7dLm04lUBc3MmclHJh4Jmsr1elkmERt3ABhJRyY+HW5hrtjD+Il2x1unfi1WAAwEf+ByrgWw1RytfQ4RI0KTCLrx1VzzbbV9fmauerc9Y86MIltELeau9xnppN1hVvNPRxgQQGYxDaQm8w1cl9zF7ku7lZy08m6xXVxF7nDXCM3WR6YFtY/g9j2sjS1K/4AAAAASUVORK5CYII=">
+          </a>
+        </div>
+      </div>
+    </nav>
   </div>
+{% highlight html %}
+<nav class="navbar navbar-default" role="navigation">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">
+        <img alt="Brand" src="...">
+      </a>
+    </div>
+  </div>
+</nav>
+{% endhighlight %}
 
 
   <h2 id="navbar-forms">Forms</h2>
@@ -147,7 +173,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -192,7 +218,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -221,7 +247,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -246,7 +272,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -282,7 +308,7 @@
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -326,7 +352,7 @@ body { padding-top: 70px; }
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -371,7 +397,7 @@ body { padding-bottom: 70px; }
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -407,7 +433,7 @@ body { padding-bottom: 70px; }
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>

docs/_includes/components/navs.html

@@ -3,49 +3,56 @@
 
   <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>
 
+  <div class="bs-callout bs-callout-info">
+    <h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
+    <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
+  </div>
+
+  <div class="bs-callout bs-callout-warning">
+    <h4>Make navs used as navigation accessible</h4>
+    <p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
+  </div>
+
   <h2 id="nav-tabs">Tabs</h2>
   <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
   <div class="bs-example">
     <ul class="nav nav-tabs">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-tabs">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
+  <li role="presentation" class="active"><a href="#">Home</a></li>
+  <li role="presentation"><a href="#">Profile</a></li>
+  <li role="presentation"><a href="#">Messages</a></li>
 </ul>
 {% endhighlight %}
-  <div class="bs-callout bs-callout-info">
-    <h4>Requires JavaScript tabs plugin</h4>
-    <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
-  </div>
+
 
   <h2 id="nav-pills">Pills</h2>
   <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
   <div class="bs-example">
     <ul class="nav nav-pills">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
+  <li role="presentation" class="active"><a href="#">Home</a></li>
+  <li role="presentation"><a href="#">Profile</a></li>
+  <li role="presentation"><a href="#">Messages</a></li>
 </ul>
 {% endhighlight %}
   <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
   <div class="bs-example">
     <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages</a></li>
     </ul>
   </div>
 {% highlight html %}
@@ -57,21 +64,22 @@
 
   <h2 id="nav-justified">Justified</h2>
   <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>
+  <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
   <div class="bs-callout bs-callout-warning">
     <h4>Safari and responsive justified navs</h4>
-    <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>
+    <p>As of v8.0, 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">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages</a></li>
     </ul>
     <br>
     <ul class="nav nav-pills nav-justified">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages</a></li>
     </ul>
   </div>
 {% highlight html %}
@@ -94,15 +102,15 @@
 
   <div class="bs-example">
     <ul class="nav nav-pills">
-      <li><a href="#">Clickable link</a></li>
-      <li><a href="#">Clickable link</a></li>
-      <li class="disabled"><a href="#">Disabled link</a></li>
+      <li role="presentation"><a href="#">Clickable link</a></li>
+      <li role="presentation"><a href="#">Clickable link</a></li>
+      <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills">
   ...
-  <li class="disabled"><a href="#">Disabled link</a></li>
+  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
   ...
 </ul>
 {% endhighlight %}
@@ -114,10 +122,10 @@
   <h3>Tabs with dropdowns</h3>
   <div class="bs-example">
     <ul class="nav nav-tabs">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Help</a></li>
-      <li class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Help</a></li>
+      <li role="presentation" class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
           Dropdown <span class="caret"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
@@ -133,11 +141,11 @@
 {% highlight html %}
 <ul class="nav nav-tabs">
   ...
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+  <li role="presentation" class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
       Dropdown <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       ...
     </ul>
   </li>
@@ -148,10 +156,10 @@
   <h3>Pills with dropdowns</h3>
   <div class="bs-example">
     <ul class="nav nav-pills">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Help</a></li>
-      <li class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      <li role="presentation" class="active"><a href="#">Home</a></li>
+      <li role="presentation"><a href="#">Help</a></li>
+      <li role="presentation" class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
           Dropdown <span class="caret"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
@@ -167,11 +175,11 @@
 {% highlight html %}
 <ul class="nav nav-pills">
   ...
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+  <li role="presentation" class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
       Dropdown <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       ...
     </ul>
   </li>

docs/_includes/components/pagination.html

@@ -6,99 +6,109 @@
   <h2 id="pagination-default">Default pagination</h2>
   <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
   <div class="bs-example">
-    <ul class="pagination">
-      <li><a href="#">&laquo;</a></li>
-      <li><a href="#">1</a></li>
-      <li><a href="#">2</a></li>
-      <li><a href="#">3</a></li>
-      <li><a href="#">4</a></li>
-      <li><a href="#">5</a></li>
-      <li><a href="#">&raquo;</a></li>
-    </ul>
+    <nav>
+      <ul class="pagination">
+        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+        <li><a href="#">4</a></li>
+        <li><a href="#">5</a></li>
+        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+      </ul>
+    </nav>
   </div>
 {% highlight html %}
-<ul class="pagination">
-  <li><a href="#">&laquo;</a></li>
-  <li><a href="#">1</a></li>
-  <li><a href="#">2</a></li>
-  <li><a href="#">3</a></li>
-  <li><a href="#">4</a></li>
-  <li><a href="#">5</a></li>
-  <li><a href="#">&raquo;</a></li>
-</ul>
+<nav>
+  <ul class="pagination">
+    <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+    <li><a href="#">1</a></li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
+    <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+  </ul>
+</nav>
 {% endhighlight %}
 
   <h3>Disabled and active states</h3>
   <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
   <div class="bs-example">
-    <ul class="pagination">
-      <li class="disabled"><a href="#">&laquo;</a></li>
-      <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
-      <li><a href="#">2</a></li>
-      <li><a href="#">3</a></li>
-      <li><a href="#">4</a></li>
-      <li><a href="#">5</a></li>
-      <li><a href="#">&raquo;</a></li>
-   </ul>
+    <nav>
+      <ul class="pagination">
+        <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+        <li><a href="#">4</a></li>
+        <li><a href="#">5</a></li>
+        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+     </ul>
+   </nav>
   </div>
 {% highlight html %}
-<ul class="pagination">
-  <li class="disabled"><a href="#">&laquo;</a></li>
-  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
-  ...
-</ul>
+<nav>
+  <ul class="pagination">
+    <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
+    ...
+  </ul>
+</nav>
 {% endhighlight %}
-  <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
+  <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
 {% highlight html %}
-<ul class="pagination">
-  <li class="disabled"><span>&laquo;</span></li>
-  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
-  ...
-</ul>
+<nav>
+  <ul class="pagination">
+    <li class="disabled"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></li>
+    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
+    ...
+  </ul>
+</nav>
 {% endhighlight %}
 
 
   <h3>Sizing</h3>
   <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
   <div class="bs-example">
-    <div>
+    <nav>
       <ul class="pagination pagination-lg">
-        <li><a href="#">&laquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#">&raquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
       </ul>
-    </div>
-    <div>
+    </nav>
+    <nav>
       <ul class="pagination">
-        <li><a href="#">&laquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#">&raquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
       </ul>
-    </div>
-    <div>
+    </nav>
+    <nav>
       <ul class="pagination pagination-sm">
-        <li><a href="#">&laquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#">&raquo;</a></li>
+        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
       </ul>
-    </div>
+    </nav>
   </div>
 {% highlight html %}
-<ul class="pagination pagination-lg">...</ul>
-<ul class="pagination">...</ul>
-<ul class="pagination pagination-sm">...</ul>
+<nav><ul class="pagination pagination-lg">...</ul></nav>
+<nav><ul class="pagination">...</ul></nav>
+<nav><ul class="pagination pagination-sm">...</ul></nav>
 {% endhighlight %}
 
 
@@ -108,46 +118,58 @@
   <h3>Default example</h3>
   <p>By default, the pager centers links.</p>
   <div class="bs-example">
-    <ul class="pager">
-      <li><a href="#">Previous</a></li>
-      <li><a href="#">Next</a></li>
-    </ul>
+    <nav>
+      <ul class="pager">
+        <li><a href="#">Previous</a></li>
+        <li><a href="#">Next</a></li>
+      </ul>
+    </nav>
   </div>
 {% highlight html %}
-<ul class="pager">
-  <li><a href="#">Previous</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
+<nav>
+  <ul class="pager">
+    <li><a href="#">Previous</a></li>
+    <li><a href="#">Next</a></li>
+  </ul>
+</nav>
 {% endhighlight %}
 
   <h3>Aligned links</h3>
   <p>Alternatively, you can align each link to the sides:</p>
   <div class="bs-example">
-    <ul class="pager">
-      <li class="previous"><a href="#">&larr; Older</a></li>
-      <li class="next"><a href="#">Newer &rarr;</a></li>
-    </ul>
+    <nav>
+      <ul class="pager">
+        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
+        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
+      </ul>
+    </nav>
   </div>
 {% highlight html %}
-<ul class="pager">
-  <li class="previous"><a href="#">&larr; Older</a></li>
-  <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
+<nav>
+  <ul class="pager">
+    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
+    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
+  </ul>
+</nav>
 {% endhighlight %}
 
 
   <h3>Optional disabled state</h3>
   <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
   <div class="bs-example">
-    <ul class="pager">
-      <li class="previous disabled"><a href="#">&larr; Older</a></li>
-      <li class="next"><a href="#">Newer &rarr;</a></li>
-    </ul>
+    <nav>
+      <ul class="pager">
+        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
+        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
+      </ul>
+    </nav>
   </div>
 {% highlight html %}
-<ul class="pager">
-  <li class="previous disabled"><a href="#">&larr; Older</a></li>
-  <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
+<nav>
+  <ul class="pager">
+    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
+    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
+  </ul>
+</nav>
 {% endhighlight %}
 </div>

docs/_includes/components/panels.html

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

docs/_includes/components/progress-bars.html

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

docs/_includes/components/responsive-embed.html

@@ -2,7 +2,7 @@
   <h1 id="responsive-embed" class="page-header">Responsive embed</h1>
 
   <p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
-  <p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
+  <p>Rules are directly applied to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, and <code>&lt;object&gt;</code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
   <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
   <div class="bs-example">
     <div class="embed-responsive embed-responsive-16by9">
@@ -12,12 +12,12 @@
 {% highlight html %}
 <!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
-  <iframe class="embed-responsive-item" src="…"></iframe>
+  <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
 
 <!-- 4:3 aspect ratio -->
 <div class="embed-responsive embed-responsive-4by3">
-  <iframe class="embed-responsive-item" src="…"></iframe>
+  <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
 {% endhighlight %}
 </div>

docs/_includes/components/thumbnails.html

@@ -46,7 +46,7 @@
     <div class="row">
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -56,7 +56,7 @@
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -66,7 +66,7 @@
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -80,7 +80,7 @@
 <div class="row">
   <div class="col-sm-6 col-md-4">
     <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="...">
+      <img data-src="holder.js/300x300" alt="...">
       <div class="caption">
         <h3>Thumbnail label</h3>
         <p>...</p>

docs/_includes/css/buttons.html

@@ -35,6 +35,11 @@
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying meaning to assistive technologies</h4>
+    <p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+  </div>
+
   <h2 id="buttons-sizes">Sizes</h2>
   <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
   <div class="bs-example">
@@ -88,7 +93,7 @@
 
 
   <h2 id="buttons-active">Active state</h2>
-  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
+  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
 
   <h3>Button element</h3>
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
@@ -114,7 +119,7 @@
 
 
   <h2 id="buttons-disabled">Disabled state</h2>
-  <p>Make buttons look unclickable by fading them back 50%.</p>
+  <p>Make buttons look unclickable by fading them back with <code>opacity</code>.</p>
 
   <h3>Button element</h3>
   <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
@@ -147,7 +152,7 @@
   </p>
   <div class="bs-callout bs-callout-warning">
     <h4>Link functionality caveat</h4>
-    <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
+    <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Context-specific usage</h4>
@@ -170,9 +175,14 @@
 <input class="btn btn-default" type="submit" value="Submit">
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Links acting as buttons</h4>
+    <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
+  </div>
+
   <div class="bs-callout bs-callout-warning">
     <h4>Cross-browser rendering</h4>
     <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>
+    <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox &lt;30</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>

docs/_includes/css/code.html

@@ -13,10 +13,12 @@ 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 by the name of the directory.
+  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 </div>
 {% highlight html %}
-  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 {% endhighlight %}
 
   <h2 id="code-block">Basic block</h2>

docs/_includes/css/forms.html

@@ -49,21 +49,21 @@
   <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>
+  <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>
   <p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
   <div class="bs-callout bs-callout-danger">
     <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>
+    <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
   </div>
   <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>
+    <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. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
   </div>
   <div class="bs-example">
     <form class="form-inline" role="form">
@@ -92,8 +92,11 @@
 {% highlight html %}
 <form class="form-inline" role="form">
   <div class="form-group">
-    <label class="sr-only" for="exampleInputEmail2">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+    <div class="input-group">
+      <label class="sr-only" for="exampleInputEmail2">Email address</label>
+      <div class="input-group-addon">@</div>
+      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+    </div>
   </div>
   <div class="form-group">
     <label class="sr-only" for="exampleInputPassword2">Password</label>
@@ -199,7 +202,7 @@
   <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
   <div class="bs-example">
     <form role="form">
-      <textarea class="form-control" rows="3"></textarea>
+      <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
@@ -207,7 +210,8 @@
 {% endhighlight %}
 
   <h3>Checkboxes and radios</h3>
-  <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
+  <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
+  <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
   <h4>Default (stacked)</h4>
   <div class="bs-example">
     <form role="form">
@@ -217,6 +221,12 @@
           Option one is this and that&mdash;be sure to include why it's great
         </label>
       </div>
+      <div class="checkbox disabled">
+        <label>
+          <input type="checkbox" value="" disabled>
+          Option two is disabled
+        </label>
+      </div>
       <br>
       <div class="radio">
         <label>
@@ -230,6 +240,12 @@
           Option two can be something else and selecting it will deselect option one
         </label>
       </div>
+      <div class="radio disabled">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+          Option three is disabled
+        </label>
+      </div>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
@@ -239,6 +255,12 @@
     Option one is this and that&mdash;be sure to include why it's great
   </label>
 </div>
+<div class="checkbox disabled">
+  <label>
+    <input type="checkbox" value="" disabled>
+    Option two is disabled
+  </label>
+</div>
 
 <div class="radio">
   <label>
@@ -252,9 +274,15 @@
     Option two can be something else and selecting it will deselect option one
   </label>
 </div>
+<div class="radio disabled">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+    Option three is disabled
+  </label>
+</div>
 {% endhighlight %}
 
-  <h4>Inline checkboxes</h4>
+  <h4>Inline checkboxes and radios</h4>
   <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
   <div class="bs-example">
     <form role="form">
@@ -268,6 +296,18 @@
         <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
       </label>
     </form>
+    <br>
+    <form role="form">
+      <label class="radio-inline">
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+      </label>
+      <label class="radio-inline">
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+      </label>
+      <label class="radio-inline">
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+      </label>
+    </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
 <label class="checkbox-inline">
@@ -279,6 +319,45 @@
 <label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
 </label>
+
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+</label>
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+</label>
+{% endhighlight %}
+
+  <h4>Checkboxes and radios without label text</h4>
+  <p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
+  <div class="bs-example">
+    <form role="form">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
+        </label>
+      </div>
+    </form>
+  </div>
+{% highlight html %}
+<div class="checkbox">
+  <label>
+    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
+  </label>
+</div>
 {% endhighlight %}
 
   <h3>Selects</h3>
@@ -322,7 +401,7 @@
 
 
   <h2 id="forms-controls-static">Static control</h2>
-  <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+  <p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
   <div class="bs-example">
     <form class="form-horizontal" role="form">
       <div class="form-group">
@@ -354,9 +433,35 @@
     </div>
   </div>
 </form>
+{% endhighlight %}
+  <div class="bs-example">
+    <form class="form-inline" role="form">
+      <div class="form-group">
+        <label class="sr-only">Email</label>
+        <p class="form-control-static">email@example.com</p>
+      </div>
+      <div class="form-group">
+        <label for="inputPassword2" class="sr-only">Password</label>
+        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+      </div>
+      <button type="submit" class="btn btn-default">Confirm identity</button>
+    </form>
+  </div>
+{% highlight html %}
+<form class="form-inline" role="form">
+  <div class="form-group">
+    <label class="sr-only">Email</label>
+    <p class="form-control-static">email@example.com</p>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword2" class="sr-only">Password</label>
+    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+  </div>
+  <button type="submit" class="btn btn-default">Confirm identity</button>
+</form>
 {% endhighlight %}
 
-  <h2 id="forms-control-focus">Input focus</h2>
+  <h2 id="forms-control-focus">Focus state</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">
     <form role="form">
@@ -369,7 +474,7 @@
   </div>
 
 
-  <h2 id="forms-control-disabled">Disabled inputs</h2>
+  <h2 id="forms-control-disabled">Disabled state</h2>
   <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
   <div class="bs-example">
     <form role="form">
@@ -390,7 +495,7 @@
 
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
-    <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
+    <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
   </div>
 
   <div class="bs-example">
@@ -439,7 +544,7 @@
 {% endhighlight %}
 
 
-  <h2 id="forms-control-readonly">Readonly inputs</h2>
+  <h2 id="forms-control-readonly">Readonly state</h2>
   <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
   <div class="bs-example">
     <form role="form">
@@ -454,6 +559,12 @@
   <h2 id="forms-control-validation">Validation states</h2>
   <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying validation state to assistive technologies</h4>
+    <p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
+    <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
+  </div>
+
   <div class="bs-example">
     <form role="form">
       <div class="form-group has-success">
@@ -468,6 +579,30 @@
         <label class="control-label" for="inputError1">Input with error</label>
         <input type="text" class="form-control" id="inputError1">
       </div>
+      <div class="has-success">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="checkboxSuccess" value="option1">
+            Checkbox with success
+          </label>
+        </div>
+      </div>
+      <div class="has-warning">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="checkboxWarning" value="option1">
+            Checkbox with warning
+          </label>
+        </div>
+      </div>
+      <div class="has-error">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="checkboxError" value="option1">
+            Checkbox with error
+          </label>
+        </div>
+      </div>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
@@ -483,59 +618,96 @@
   <label class="control-label" for="inputError1">Input with error</label>
   <input type="text" class="form-control" id="inputError1">
 </div>
+<div class="has-success">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxSuccess" value="option1">
+      Checkbox with success
+    </label>
+  </div>
+</div>
+<div class="has-warning">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxWarning" value="option1">
+      Checkbox with warning
+    </label>
+  </div>
+</div>
+<div class="has-error">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxError" value="option1">
+      Checkbox with error
+    </label>
+  </div>
+</div>
 {% endhighlight %}
 
   <h3>With optional icons</h3>
   <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
+  <p><strong class="text-danger">Feedback icons only work with textual <code>&lt;input class="form-control"&gt;</code> elements.</strong></p>
   <div class="bs-callout bs-callout-warning">
     <h4>Icons, labels, and input groups</h4>
-    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. For inputs without labels, adjust the <code>top</code>value. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
+    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying the icon's meaning to assistive technologies</h4>
+    <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
+    <p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
   </div>
   <div class="bs-example">
     <form role="form">
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess2">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess2">
-        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
+        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+        <span id="inputSuccess2Status" class="sr-only">(success)</span>
       </div>
       <div class="form-group has-warning has-feedback">
         <label class="control-label" for="inputWarning2">Input with warning</label>
-        <input type="text" class="form-control" id="inputWarning2">
-        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
+        <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
+        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
+        <span id="inputWarning2Status" class="sr-only">(warning)</span>
       </div>
       <div class="form-group has-error has-feedback">
         <label class="control-label" for="inputError2">Input with error</label>
-        <input type="text" class="form-control" id="inputError2">
-        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+        <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
+        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+        <span id="inputError2Status" class="sr-only">(error)</span>
       </div>
     </form>
   </div>
 {% highlight html %}
 <div class="form-group has-success has-feedback">
   <label class="control-label" for="inputSuccess2">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess2">
-  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
+  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+  <span id="inputSuccess2Status" class="sr-only">(success)</span>
 </div>
 <div class="form-group has-warning has-feedback">
   <label class="control-label" for="inputWarning2">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning2">
-  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
+  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
+  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
+  <span id="inputWarning2Status" class="sr-only">(warning)</span>
 </div>
 <div class="form-group has-error has-feedback">
   <label class="control-label" for="inputError2">Input with error</label>
-  <input type="text" class="form-control" id="inputError2">
-  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
+  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+  <span id="inputError2Status" class="sr-only">(error)</span>
 </div>
 {% endhighlight %}
 
-  <p>Optional icons also work on horizontal and inline forms.</p>
+  <h4>Optional icons in horizontal and inline forms</h4>
   <div class="bs-example">
     <form class="form-horizontal" role="form">
       <div class="form-group has-success has-feedback">
         <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
         <div class="col-sm-9">
-          <input type="text" class="form-control" id="inputSuccess3">
-          <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+          <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
+          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+          <span id="inputSuccess3Status" class="sr-only">(success)</span>
         </div>
       </div>
     </form>
@@ -545,8 +717,9 @@
   <div class="form-group has-success has-feedback">
     <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
     <div class="col-sm-9">
-      <input type="text" class="form-control" id="inputSuccess3">
-      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
+      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+      <span id="inputSuccess3Status" class="sr-only">(success)</span>
     </div>
   </div>
 </form>
@@ -556,8 +729,9 @@
     <form class="form-inline" role="form">
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess4">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess4">
-        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+        <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
+        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+        <span id="inputSuccess4Status" class="sr-only">(success)</span>
       </div>
     </form>
   </div>
@@ -565,12 +739,32 @@
 <form class="form-inline" role="form">
   <div class="form-group has-success has-feedback">
     <label class="control-label" for="inputSuccess4">Input with success</label>
-    <input type="text" class="form-control" id="inputSuccess4">
-    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
+    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+    <span id="inputSuccess4Status" class="sr-only">(success)</span>
   </div>
 </form>
 {% endhighlight %}
 
+  <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
+  <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
+  <div class="bs-example">
+    <div class="form-group has-success has-feedback">
+      <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
+      <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
+      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+      <span id="inputSuccess5Status" class="sr-only">(success)</span>
+    </div>
+  </div>
+{% highlight html %}
+<div class="form-group has-success has-feedback">
+  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
+  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
+  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+  <span id="inputSuccess5Status" class="sr-only">(success)</span>
+</div>
+{% 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>
@@ -606,6 +800,42 @@
 <select class="form-control input-sm">...</select>
 {% endhighlight %}
 
+  <h3>Horizontal form group sizes</h3>
+  <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
+  <div class="bs-example">
+    <form class="form-horizontal" role="form">
+      <div class="form-group form-group-lg">
+        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+        </div>
+      </div>
+      <div class="form-group form-group-sm">
+        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+        </div>
+      </div>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<form class="form-horizontal" role="form">
+  <div class="form-group form-group-lg">
+    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+    </div>
+  </div>
+  <div class="form-group form-group-sm">
+    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
+
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">
@@ -639,13 +869,23 @@
 
   <h2 id="forms-help-text">Help text</h2>
   <p>Block level help text for form controls.</p>
+  <div class="bs-callout bs-callout-info">
+    <h4>Associating help text with form controls</h4>
+    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
+  </div>
   <div class="bs-example">
     <form role="form">
-      <input type="text" class="form-control">
-      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+      <div class="form-group">
+        <label for="inputHelpBlock">Input with help text</label>
+        <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+      </div>
+      <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+<label class="sr-only" for="inputHelpBlock">Input with help text</label>
+<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+...
+<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
 </div>

docs/_includes/css/grid.html

@@ -13,6 +13,7 @@
     <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
     <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
     <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
+    <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
     <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
   </ul>
   <p>Look to the examples for applying these principles to your code.</p>
@@ -67,49 +68,49 @@
       </thead>
       <tbody>
         <tr>
-          <th>Grid behavior</th>
+          <th class="text-nowrap">Grid behavior</th>
           <td>Horizontal at all times</td>
           <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
         </tr>
         <tr>
-          <th>Container width</th>
+          <th class="text-nowrap">Container width</th>
           <td>None (auto)</td>
           <td>750px</td>
           <td>970px</td>
           <td>1170px</td>
         </tr>
         <tr>
-          <th>Class prefix</th>
+          <th class="text-nowrap">Class prefix</th>
           <td><code>.col-xs-</code></td>
           <td><code>.col-sm-</code></td>
           <td><code>.col-md-</code></td>
           <td><code>.col-lg-</code></td>
         </tr>
         <tr>
-          <th># of columns</th>
+          <th class="text-nowrap"># of columns</th>
           <td colspan="4">12</td>
         </tr>
         <tr>
-          <th>Column width</th>
+          <th class="text-nowrap">Column width</th>
           <td class="text-muted">Auto</td>
           <td>~62px</td>
           <td>~81px</td>
           <td>~97px</td>
         </tr>
         <tr>
-          <th>Gutter width</th>
+          <th class="text-nowrap">Gutter width</th>
           <td colspan="4">30px (15px on each side of a column)</td>
         </tr>
         <tr>
-          <th>Nestable</th>
+          <th class="text-nowrap">Nestable</th>
           <td colspan="4">Yes</td>
         </tr>
         <tr>
-          <th>Offsets</th>
+          <th class="text-nowrap">Offsets</th>
           <td colspan="4">Yes</td>
         </tr>
         <tr>
-          <th>Column ordering</th>
+          <th class="text-nowrap">Column ordering</th>
           <td colspan="4">Yes</td>
         </tr>
       </tbody>
@@ -225,7 +226,7 @@
 </div>
 {% endhighlight %}
 
-  <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
+  <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3>
   <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
   <div class="bs-docs-grid">
     <div class="row show-grid">
@@ -252,6 +253,23 @@
   <div class="clearfix visible-xs-block"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
+{% endhighlight %}
+
+  <h3 id="grid-example-wrapping">Example: Column wrapping</h3>
+  <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
+  <div class="bs-docs-grid">
+    <div class="row show-grid">
+      <div class="col-xs-9">.col-xs-9</div>
+      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="row">
+  <div class="col-xs-9">.col-xs-9</div>
+  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+</div>
 {% endhighlight %}
 
   <h3 id="grid-responsive-resets">Responsive column resets</h3>
@@ -329,30 +347,30 @@
 
 
   <h3 id="grid-nesting">Nesting columns</h3>
-  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p>
+  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
   <div class="row show-grid">
-    <div class="col-md-9">
-      Level 1: .col-md-9
+    <div class="col-sm-9">
+      Level 1: .col-sm-9
       <div class="row show-grid">
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-8 col-sm-6">
+          Level 2: .col-xs-8 .col-sm-6
         </div>
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-4 col-sm-6">
+          Level 2: .col-xs-4 .col-sm-6
         </div>
       </div>
     </div>
   </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9">
-    Level 1: .col-md-9
+  <div class="col-sm-9">
+    Level 1: .col-sm-9
     <div class="row">
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-8 col-sm-6">
+        Level 2: .col-xs-8 .col-sm-6
       </div>
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-4 col-sm-6">
+        Level 2: .col-xs-4 .col-sm-6
       </div>
     </div>
   </div>

docs/_includes/css/helpers.html

@@ -23,6 +23,10 @@
     <h4>Dealing with specificity</h4>
     <p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
   </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying meaning to assistive technologies</h4>
+    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+  </div>
 
   <h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
   <p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
@@ -40,15 +44,22 @@
 <p class="bg-warning">...</p>
 <p class="bg-danger">...</p>
 {% endhighlight %}
-
+  <div class="bs-callout bs-callout-info">
+    <h4>Dealing with specificity</h4>
+    <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying meaning to assistive technologies</h4>
+    <p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
+  </div>
 
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
   <div class="bs-example">
-    <p><button type="button" class="close" aria-hidden="true">&times;</button></p>
+    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close" aria-hidden="true">&times;</button>
+<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 {% endhighlight %}
 
 
@@ -113,7 +124,7 @@
 
 
   <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>
+  <p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. 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>

docs/_includes/css/images.html

@@ -3,6 +3,10 @@
 
   <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>
+  <div class="bs-callout bs-callout-warning">
+    <h4>SVG images and IE 8-10</h4>
+    <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
+  </div>
 {% highlight html %}
 <img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}

docs/_includes/css/less.html

@@ -7,7 +7,7 @@
 
 
   <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>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="../getting-started/#grunt">consult the Getting Started section</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>
@@ -28,7 +28,7 @@
 @gray-darker:  lighten(#000, 13.5%); // #222
 @gray-dark:    lighten(#000, 20%);   // #333
 @gray:         lighten(#000, 33.5%); // #555
-@gray-light:   lighten(#000, 60%);   // #999
+@gray-light:   lighten(#000, 46.7%); // #777
 @gray-lighter: lighten(#000, 93.5%); // #eee
 {% endhighlight %}
 
@@ -76,7 +76,7 @@
 {% highlight scss %}
 // Variables
 @link-color:       @brand-primary;
-@link-color-hover: darken(@link-color, 15%);
+@link-hover-color: darken(@link-color, 15%);
 
 // Usage
 a {
@@ -84,12 +84,12 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: @link-color-hover;
+    color: @link-hover-color;
     text-decoration: underline;
   }
 }
 {% endhighlight %}
-  <p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
+  <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
 
   <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>
@@ -378,10 +378,10 @@ a {
 {% highlight scss %}
 #gradient > .striped(#333; 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>
+  <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
 {% highlight scss %}
-#gradient > .vertical-three-colors(#777; #333; .25; #000);
-#gradient > .horizontal-three-colors(#777; #333; .25; #000);
+#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 the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
 
@@ -390,7 +390,7 @@ a {
   <p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
 
   <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>
+  <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="https://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
 {% highlight scss %}
 // Mixin
 .clearfix() {

docs/_includes/css/overview.html

@@ -33,7 +33,7 @@
   <p>These styles can be found within <code>scaffolding.less</code>.</p>
 
   <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.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>
+  <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="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
 
   <h3 id="overview-container">Containers</h3>
   <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>

docs/_includes/css/responsive-utilities.html

@@ -93,7 +93,7 @@
     </table>
   </div>
 
-  <p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
+  <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
@@ -119,7 +119,7 @@
     </table>
   </div>
   <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
-  <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
+  <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
 
   <h2 id="responsive-utilities-print">Print classes</h2>
   <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
@@ -150,7 +150,7 @@
       </tbody>
     </table>
   </div>
-  <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
+  <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
 
 
   <h2 id="responsive-utilities-tests">Test cases</h2>
@@ -178,29 +178,29 @@
     </div>
   </div>
   <div class="row responsive-utilities-test visible-on">
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-sm">Extra small and small</span>
       <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-md hidden-lg">Medium and large</span>
       <span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
     </div>
     <div class="clearfix visible-xs-block"></div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-md">Extra small and medium</span>
       <span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-sm hidden-lg">Small and large</span>
       <span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
     </div>
     <div class="clearfix visible-xs-block"></div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-lg">Extra small and large</span>
       <span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-sm hidden-md">Small and medium</span>
       <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
     </div>
@@ -228,29 +228,29 @@
     </div>
   </div>
   <div class="row responsive-utilities-test hidden-on">
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-sm">Extra small and small</span>
       <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-md hidden-lg">Medium and large</span>
       <span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
     </div>
     <div class="clearfix visible-xs-block"></div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-md">Extra small and medium</span>
       <span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-sm hidden-lg">Small and large</span>
       <span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
     </div>
     <div class="clearfix visible-xs-block"></div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-xs hidden-lg">Extra small and large</span>
       <span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
     </div>
-    <div class="col-xs-6 col-sm-6">
+    <div class="col-xs-6">
       <span class="hidden-sm hidden-md">Small and medium</span>
       <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
     </div>

docs/_includes/css/rtl.html

@@ -1,20 +0,0 @@
-<div class="bs-docs-section">
-  <h1 id="rtl" class="page-header">RTL</h1>
-  <p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p>
-
-  <h2 id="rtl-how-to">How to use</h2>
-  <p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p>
-{% highlight html %}
-<!-- Example: Arabic language with direction set to RTL -->
-<html lang="ar" dir="rtl">
-{% endhighlight %}
-  <p>Then, include the right-to-left CSS file in place of the default Bootstrap CSS:</p>
-{% highlight html %}
-<!-- Bootstrap RTL -->
-<link rel="stylesheet" href="bootstrap-rtl.css">
-{% endhighlight %}
-  <p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p>
-
-  <h2 id="rtl-css-flip">CSS Flip</h2>
-  <p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p>
-</div>

docs/_includes/css/tables.html

@@ -5,6 +5,7 @@
   <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>
   <div class="bs-example">
     <table class="table">
+      <caption>Optional table caption.</caption>
       <thead>
         <tr>
           <th>#</th>
@@ -345,10 +346,25 @@
   <td class="info">...</td>
 </tr>
 {% endhighlight %}
-
+  <div class="bs-callout bs-callout-warning">
+    <h4>Conveying meaning to assistive technologies</h4>
+    <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+  </div>
 
   <h2 id="tables-responsive">Responsive tables</h2>
-  <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+  <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+
+  <div class="bs-callout bs-callout-warning">
+    <h4>Firefox and fieldsets</h4>
+    <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
+{% highlight css %}
+@-moz-document url-prefix() {
+  fieldset { display: table-cell; }
+}
+{% endhighlight %}
+    <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
+  </div>
+
   <div class="bs-example">
     <div class="table-responsive">
       <table class="table">

docs/_includes/css/type.html

@@ -107,12 +107,12 @@
   <!-- Inline text elements -->
   <h2 id="type-inline-text">Inline text elements</h2>
   <h3>Marked text</h3>
-  <p>For indicating blocks of text that have been deleted use the <code>&lt;mark&gt;</code> tag.</p>
+  <p>For highlighting a run of text due to its relevance in another context, use the <code>&lt;mark&gt;</code> tag.</p>
   <div class="bs-example">
     <p>You can use the mark tag to <mark>highlight</mark> text.</p>
   </div>
 {% highlight html %}
-<mark>This line of text is meant to be treated as deleted text.</mark>
+You can use the mark tag to <mark>highlight</mark> text.
 {% endhighlight %}
 
 
@@ -146,10 +146,10 @@
   <h3>Underlined text</h3>
   <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
   <div class="bs-example">
-    <p><u>This line of text is will render as underlined</u></p>
+    <p><u>This line of text will render as underlined</u></p>
   </div>
 {% highlight html %}
-<u>This line of text is will render as underlined</u>
+<u>This line of text will render as underlined</u>
 {% endhighlight %}
 
   <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
@@ -195,14 +195,28 @@
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
     <p class="text-justify">Justified text.</p>
+    <p class="text-nowrap">No wrap text.</p>
   </div>
 {% highlight html %}
 <p class="text-left">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-right">Right aligned text.</p>
 <p class="text-justify">Justified text.</p>
+<p class="text-nowrap">No wrap text.</p>
 {% endhighlight %}
 
+  <h2 id="type-transformation">Transformation classes</h2>
+  <p>Transform text in components with text capitalization classes.</p>
+  <div class="bs-example">
+    <p class="text-lowercase">Lowercased text.</p>
+    <p class="text-uppercase">Uppercased text.</p>
+    <p class="text-capitalize">Capitalized text.</p>
+  </div>
+{% highlight html %}
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">Capitalized text.</p>
+{% endhighlight %}
 
   <!-- Abbreviations -->
   <h2 id="type-abbreviations">Abbreviations</h2>

docs/_includes/footer.html

@@ -4,8 +4,8 @@
   <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>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
+    <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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="bs-docs-footer-links muted">
       <li>Currently v{{ site.current_version }}</li>
@@ -22,7 +22,7 @@
       <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><a href="{{ site.repo }}/issues">Issues</a></li>
       <li>&middot;</li>
       <li><a href="{{ site.repo }}/releases">Releases</a></li>
     </ul>
@@ -32,13 +32,36 @@
 <!-- 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.11.0/jquery.min.js"></script>
-<script src="../dist/js/bootstrap.min.js"></script>
-<script src="../assets/js/docs.min.js"></script>
-{% if page.slug == "customize" %}
-<script src="../assets/js/customize.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
+{% if site.github %}
+  <script src="../dist/js/bootstrap.min.js"></script>
+{% else %}
+  <script src="../dist/js/bootstrap.js"></script>
 {% endif %}
 
+{% if site.github %}
+  <script src="../assets/js/docs.min.js"></script>
+{% else %}
+  {% for file in site.data.configBridge.paths.docsJs %}
+  <script src="{{ file }}"></script>
+  {% endfor %}
+{% endif %}
+
+{% if page.slug == "customize" %}
+  <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script>
+  {% if site.github %}
+    <script src="../assets/js/customize.min.js"></script>
+  {% else %}
+    {% for file in site.data.configBridge.paths.customizerJs %}
+    <script src="{{ file }}"></script>
+    {% endfor %}
+  {% endif %}
+{% endif %}
+
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
+
 {% comment %}
   Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
   JS interface site: https://dev.twitter.com/docs/tfw-javascript

docs/_includes/getting-started/accessibility.html

@@ -17,9 +17,14 @@
   <p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> such that screen readers can construct a table of contents for your pages.</p>
   <p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
 
+  <h3>Color contrast</h3>
+  <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="..css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
+
   <h3>Additional resources</h3>
   <ul>
     <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+    <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
+    <li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
     <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
   </ul>

docs/_includes/getting-started/browser-device-support.html

@@ -19,33 +19,33 @@
       <tbody>
         <tr>
           <th>Android</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
           <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
           <td class="text-muted">N/A</td>
         </tr>
         <tr>
           <th>iOS</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
           <td class="text-muted">N/A</td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
         </tr>
         <tr>
           <th>Mac OS X</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
         </tr>
         <tr>
           <th>Windows</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
         </tr>
       </tbody>
     </table>
@@ -67,26 +67,26 @@
       <tbody>
         <tr>
           <th scope="row"><code>border-radius</code></th>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
         </tr>
         <tr>
           <th scope="row"><code>box-shadow</code></th>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
         </tr>
         <tr>
           <th scope="row"><code>transform</code></th>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
         </tr>
         <tr>
           <th scope="row"><code>transition</code></th>
-          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
+          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
         </tr>
         <tr>
           <th scope="row"><code>placeholder</code></th>
-          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
+          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
         </tr>
       </tbody>
     </table>
@@ -106,13 +106,16 @@
   <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
   <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
 
+  <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
+  <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
+
   <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
   <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
 {% highlight html %}
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
   <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
-  <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
+  <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
   <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
 
   <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
@@ -141,10 +144,10 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 }
 {% endhighlight %}
   <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
-  <p>As a heads up, we include this in the Bootstrap docs as an example.</p>
+  <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
 
   <h3 id="support-safari-percentages">Safari percent rounding</h3>
-  <p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
+  <p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p>
   <ul>
     <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
     <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
@@ -155,33 +158,49 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
   <h4>Overflow and scrolling</h4>
   <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
   <h4>Virtual keyboards</h4>
-  <p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
+  <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
   <h4>Navbar Dropdowns</h4>
   <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p>
 
   <h3 id="support-browser-zooming">Browser zooming</h3>
   <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
 
-  <h3 id="support-printing">Printer viewports</h3>
-  <p>Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
+  <h3 id="support-printing">Printing</h3>
+  <p>Even in some modern browsers, printing can be quirky.</p>
+  <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
   <ul>
     <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
     <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
     <li>Add custom media queries to change the grid size breakpoints for print media only.</li>
   </ul>
+  <p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
+  {% highlight css %}
+@media print {
+  .container {
+    width: auto;
+  }
+}
+  {% endhighlight %}
 
   <h3 id="support-android-stock-browser">Android stock browser</h3>
   <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
   <h4>Select menus</h4>
-  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
+  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
 {% highlight html %}
 <script>
-var nua = navigator.userAgent
-var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
-if (isAndroid) {
-  $('select.form-control').removeClass('form-control').css('width', '100%')
-}
+$(function () {
+  var nua = navigator.userAgent
+  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
+  if (isAndroid) {
+    $('select.form-control').removeClass('form-control').css('width', '100%')
+  }
+})
 </script>
 {% endhighlight %}
-  <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
+  <p>Want to see an example? <a href="http://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
+
+  <h3 id="support-validators">Validators</h3>
+  <p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
+  <p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
+  <p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
 </div>

docs/_includes/getting-started/download.html

@@ -8,21 +8,21 @@
       <h3 id="download-bootstrap">Bootstrap</h3>
       <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
       <p>
-        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
+        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
       </p>
     </div>
     <div class="col-sm-4">
       <h3 id="download-source">Source code</h3>
-      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p>
+      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
       <p>
-        <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
+        <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
       </p>
     </div>
     <div class="col-sm-4">
       <h3 id="download-sass">Sass</h3>
       <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
       <p>
-        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
+        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
       </p>
     </div>
   </div>

docs/_includes/getting-started/examples.html

@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="examples" class="page-header">Examples</h1>
 
-  <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
+  <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
 
   <h3 id="examples-framework">Using the framework</h3>
   <div class="row bs-examples">
@@ -119,7 +119,7 @@
         <img src="../examples/screenshots/justified-nav.jpg" alt="">
       </a>
       <h4>Justified nav</h4>
-      <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
+      <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
     </div>
     <div class="clearfix visible-xs"></div>
 

docs/_includes/getting-started/grunt.html

@@ -0,0 +1,35 @@
+<div class="bs-docs-section">
+  <h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>
+
+  <p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
+
+  <h2 id="grunt-installing">Installing Grunt</h2>
+  <p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
+
+  Then, from the command line:
+  <ol>
+    <li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
+    <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
+  </ol>
+
+  <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
+
+  <h2 id="grunt-commands">Available Grunt commands</h2>
+  <h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3>
+  <p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
+
+  <h3><code>grunt watch</code> (Watch)</h3>
+  <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
+
+  <h3><code>grunt test</code> (Run tests)</h3>
+  <p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p>
+
+  <h3><code>grunt docs</code> (Build &amp; test the docs assets)</h3>
+  <p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>jekyll serve</code>.</p>
+
+  <h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
+  <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="http://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
+
+  <h2 id="grunt-troubleshooting">Troubleshooting</h2>
+  <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
+</div>

docs/_includes/getting-started/template.html

@@ -16,18 +16,18 @@
     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
 
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
   <body>
     <h1>Hello, world!</h1>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
   </body>

docs/_includes/getting-started/tools.html

@@ -0,0 +1,6 @@
+<div class="bs-docs-section">
+  <h1 id="tools" class="page-header">Tools</h1>
+
+  <h2 id="tools-bootlint">Bootlint</h2>
+  <p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
+</div>

docs/_includes/getting-started/translations.html

@@ -3,13 +3,9 @@
 
   <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p>
   <ul>
-    <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
-    <li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li>
-    <li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</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>
+    {% for language in site.data.translations %}
+      <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
+    {% endfor %}
   </ul>
   <p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
   <p>Finished a new or better translation? Open a pull request to add it to our list.</p>

docs/_includes/header.html

@@ -6,7 +6,7 @@
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
 <title>
-  {% if page.title == "Bootstrap" %}
+  {% if page.layout == "home" %}
     {{ page.title }}
   {% else %}
     {{ page.title }} &middot; Bootstrap
@@ -14,29 +14,45 @@
 </title>
 
 <!-- Bootstrap core CSS -->
+{% if site.github %}
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% else %}
+<link href="../dist/css/bootstrap.css" rel="stylesheet">
+{% endif %}
+{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+  <!-- Optional Bootstrap Theme -->
+{% if site.github %}
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% else %}
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
+{% endif %}
 
 <!-- Documentation extras -->
+{% if site.github %}
 <link href="../assets/css/docs.min.css" rel="stylesheet">
+{% else %}
+<link href="../assets/css/src/docs.css" rel="stylesheet">
+<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
+{% endif %}
 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+<script src="../assets/js/ie-emulation-modes-warning.js"></script>
 
-<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 
 <!-- Favicons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
-                               <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="icon" href="/favicon.ico">
 
 <script>
-  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', 'UA-146052-10']);
-  _gaq.push(['_trackPageview']);
-  (function() {
-    var ga = document.createElement('script'); ga.async = true;
-    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-  })();
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('send', 'pageview');
 </script>

docs/_includes/js/affix.html

@@ -7,15 +7,15 @@
   <hr class="bs-docs-separator">
 
   <h2 id="affix-usage">Usage</h2>
-  <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p>
+  <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
 
   <h3>Positioning via CSS</h3>
   <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
   <p>Here's how the affix plugin works:</p>
   <ol>
     <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
-    <li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
-    <li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
+    <li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's CSS).</li>
+    <li>If a bottom offset is defined, scrolling past it should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
   </ol>
   <p>Follow the above steps to set your CSS for either of the usage options below.</p>
 
@@ -31,14 +31,14 @@
   <h3>Via JavaScript</h3>
   <p>Call the affix plugin via JavaScript:</p>
 {% highlight js %}
-  $('#my-affix').affix({
-    offset: {
-      top: 100
-    , bottom: function () {
-        return (this.bottom = $('.footer').outerHeight(true))
-      }
+$('#myAffix').affix({
+  offset: {
+    top: 100,
+    bottom: function () {
+      return (this.bottom = $('.footer').outerHeight(true))
     }
-  })
+  }
+})
 {% endhighlight %}
 
 
@@ -62,13 +62,20 @@
          <td>10</td>
          <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
        </tr>
+       <tr>
+         <td>target</td>
+         <td>selector | node | jQuery element</td>
+         <td>the <code>window</code> object</td>
+         <td>Specifies the target element of the affix.</td>
+       </tr>
+
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
 
 
   <h3>Events</h3>
-  <p>Bootstrap's affix class exposes a few events for hooking into affix functionality.</p>
+  <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>

docs/_includes/js/alerts.html

@@ -0,0 +1,74 @@
+<div class="bs-docs-section">
+  <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
+
+  <h2 id="alerts-examples">Example alerts</h2>
+  <p>Add dismiss functionality to all alert messages with this plugin.</p>
+  <p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
+  <div class="bs-example bs-example-standalone">
+    <div class="alert alert-warning alert-dismissible fade in" role="alert">
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
+    </div>
+
+    <div class="alert alert-danger alert-dismissible fade in" role="alert">
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <h4>Oh snap! You got an error!</h4>
+      <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+      <p>
+        <button type="button" class="btn btn-danger">Take this action</button>
+        <button type="button" class="btn btn-default">Or do this</button>
+      </p>
+    </div>
+  </div><!-- /example -->
+
+
+  <h2 id="alerts-usage">Usage</h2>
+
+  <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
+
+{% highlight html %}
+<button type="button" class="close" data-dismiss="alert">
+  <span aria-hidden="true">&times;</span>
+  <span class="sr-only">Close</span>
+</button>
+{% endhighlight %}
+
+  <p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> classes already applied to them.</p>
+
+  <h3>Methods</h3>
+
+  <h4>$().alert()</h4>
+  <p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>
+
+  <h4>$().alert('close')</h4>
+  <p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p>
+
+
+  <h3>Events</h3>
+  <p>Bootstrap's alert plugin exposes a few events for hooking into alert functionality.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th style="width: 150px;">Event Type</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>close.bs.alert</td>
+          <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+        </tr>
+        <tr>
+          <td>closed.bs.alert</td>
+          <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.table-responsive -->
+{% highlight js %}
+$('#myAlert').on('closed.bs.alert', function () {
+  // do something…
+})
+{% endhighlight %}
+</div>

docs/_includes/js/buttons.html

@@ -1,153 +1,138 @@
 <div class="bs-docs-section">
   <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
 
-  <h2 id="buttons-examples">Example uses</h2>
-  <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+  <p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
 
-  <h4>Stateful</h4>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Cross-browser compatibility</h4>
+    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
+  </div>
+
+  <h2 id="buttons-stateful">Stateful</h2>
   <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
+  <div class="bs-callout bs-callout-info">
+    <h4>Use whichever state you like!</h4>
+    <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
+  </div>
+  <div class="bs-example">
+    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
       Loading state
     </button>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
   Loading state
 </button>
+
 <script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
+  $('#myButton').on('click', function () {
+    var $btn = $(this).button('loading')
+    // business logic...
+    $btn.button('reset')
+  })
 </script>
 {% endhighlight %}
 
-  <h4>Single toggle</h4>
+  <h2 id="buttons-single-toggle">Single toggle</h2>
   <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
+    <p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
+  </div>
+  <div class="bs-example">
+    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+      Single toggle
+    </button>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+  Single toggle
+</button>
 {% endhighlight %}
 
-  <h4>Checkbox</h4>
-  <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
+  <p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Preselected options need <code>.active</code></h4>
+    <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Visual checked state only updated on click</h4>
+    <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
+  </div>
+  <div class="bs-example">
     <div class="btn-group" data-toggle="buttons">
-      <label class="btn btn-primary">
-        <input type="checkbox"> Option 1
+      <label class="btn btn-primary active">
+        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox"> Option 2
+        <input type="checkbox" autocomplete="off"> Checkbox 2
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox"> Option 3
+        <input type="checkbox" autocomplete="off"> Checkbox 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary">
-    <input type="checkbox"> Option 1
+  <label class="btn btn-primary active">
+    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox"> Option 2
+    <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox"> Option 3
+    <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
 </div>
 {% endhighlight %}
 
-  <h4>Radio</h4>
-  <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example">
     <div class="btn-group" data-toggle="buttons">
-      <label class="btn btn-primary">
-        <input type="radio" name="options" id="option1"> Option 1
+      <label class="btn btn-primary active">
+        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option2"> Option 2
+        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option3"> Option 3
+        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option1"> Option 1
+  <label class="btn btn-primary active">
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2"> Option 2
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3"> Option 3
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
   </label>
 </div>
 {% endhighlight %}
 
-
-  <h2 id="buttons-usage">Usage</h2>
-  <p>Enable buttons via JavaScript:</p>
-{% highlight js %}
-$('.btn').button()
-{% endhighlight %}
-
-  <h3>Markup</h3>
-  <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
-
-  <h3>Options</h3>
-  <p><em>None</em></p>
-
-  <h3>Methods</h3>
+  <h2 id="buttons-methods">Methods</h2>
 
   <h4>$().button('toggle')</h4>
   <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-  <div class="bs-callout bs-callout-info">
-    <h4>Auto toggling</h4>
-    <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
-  </div>
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">...</button>
-{% endhighlight %}
-
-  <h4>$().button('loading')</h4>
-  <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
-  </p>
-{% highlight html %}
-<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
-<script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
-</script>
-{% endhighlight %}
-
-  <div class="bs-callout bs-callout-danger">
-    <h4>Cross-browser compatibility</h4>
-    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
-  </div>
 
   <h4>$().button('reset')</h4>
   <p>Resets button state - swaps text to original text.</p>
 
   <h4>$().button(string)</h4>
-  <p>Resets button state - swaps text to any data defined text state.</p>
+  <p>Swaps text to any data defined text state.</p>
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
+<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
+  ...
+</button>
+
 <script>
-  $('.btn').button('complete')
+  $('#myStateButton').on('click', function () {
+    $(this).button('complete') // button text will be "finished!"
+  })
 </script>
 {% endhighlight %}
 </div>

docs/_includes/js/carousel.html

@@ -1,8 +1,9 @@
 <div class="bs-docs-section">
   <h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1>
 
+  <p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p>
+
   <h2 id="carousel-examples">Examples</h2>
-  <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
   <div class="bs-example">
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
@@ -10,7 +11,7 @@
         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
         </div>
@@ -21,11 +22,13 @@
           <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-        <span class="glyphicon glyphicon-chevron-left"></span>
+      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right"></span>
+      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->
@@ -39,31 +42,49 @@
   </ol>
 
   <!-- Wrapper for slides -->
-  <div class="carousel-inner">
+  <div class="carousel-inner" role="listbox">
     <div class="item active">
       <img src="..." alt="...">
       <div class="carousel-caption">
         ...
       </div>
     </div>
+    <div class="item">
+      <img src="..." alt="...">
+      <div class="carousel-caption">
+        ...
+      </div>
+    </div>
     ...
   </div>
 
   <!-- Controls -->
-  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-    <span class="glyphicon glyphicon-chevron-left"></span>
+  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
   </a>
-  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
+  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
   </a>
 </div>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-danger" id="callout-carousel-accessibility">
+    <h4>Accessibility issue</h4>
+    <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
+  </div>
+
   <div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
     <h4>Transition animations not supported in Internet Explorer 8 &amp; 9</h4>
     <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 &amp; 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
   </div>
 
+  <div class="bs-callout bs-callout-warning" id="callout-carousel-active">
+    <h4>Initial active element required</h4>
+    <p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
+  </div>
+
   <h3>Optional captions</h3>
   <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
   <div class="bs-example">
@@ -73,7 +94,7 @@
         <li data-target="#carousel-example-captions" data-slide-to="1"></li>
         <li data-target="#carousel-example-captions" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
           <div class="carousel-caption">
@@ -96,16 +117,18 @@
           </div>
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
-        <span class="glyphicon glyphicon-chevron-left"></span>
+      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right"></span>
+      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->
 {% highlight html %}
-<div class="item active">
+<div class="item">
   <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
@@ -114,19 +137,14 @@
 </div>
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-danger">
-    <h4>Accessibility issue</h4>
-    <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
-  </div>
-
   <h2 id="carousel-usage">Usage</h2>
 
   <h3>Multiple carousels</h3>
-  <p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p>
+  <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p>
 
   <h3>Via data attributes</h3>
   <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
-  <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p>
+  <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. <strong class="text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
 
   <h3>Via JavaScript</h3>
   <p>Call carousel manually with:</p>
@@ -165,6 +183,12 @@ $('.carousel').carousel()
          <td>true</td>
          <td>Whether the carousel should cycle continuously or have hard stops.</td>
        </tr>
+       <tr>
+         <td>keyboard</td>
+         <td>boolean</td>
+         <td>true</td>
+         <td>Whether the carousel should react to keyboard events.</td>
+       </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
@@ -197,6 +221,11 @@ $('.carousel').carousel({
 
   <h3>Events</h3>
   <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
+  <p>Both events have the following additional properties:</p>
+  <ul>
+    <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
+    <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
+  </ul>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>

docs/_includes/js/collapse.html

@@ -13,44 +13,44 @@
   <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 
   <div class="bs-example">
-    <div class="panel-group" id="accordion">
+    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
       <div class="panel panel-default">
-        <div class="panel-heading">
+        <div class="panel-heading" role="tab" id="headingOne">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               Collapsible Group Item #1
             </a>
           </h4>
         </div>
-        <div id="collapseOne" class="panel-collapse collapse in">
+        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
           <div class="panel-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
           </div>
         </div>
       </div>
       <div class="panel panel-default">
-        <div class="panel-heading">
+        <div class="panel-heading" role="tab" id="headingTwo">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
               Collapsible Group Item #2
             </a>
           </h4>
         </div>
-        <div id="collapseTwo" class="panel-collapse collapse">
+        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
           <div class="panel-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
           </div>
         </div>
       </div>
       <div class="panel panel-default">
-        <div class="panel-heading">
+        <div class="panel-heading" role="tab" id="headingThree">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
               Collapsible Group Item #3
             </a>
           </h4>
         </div>
-        <div id="collapseThree" class="panel-collapse collapse">
+        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
           <div class="panel-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
           </div>
@@ -59,44 +59,44 @@
     </div>
   </div><!-- /example -->
 {% highlight html %}
-<div class="panel-group" id="accordion">
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
-    <div class="panel-heading">
+    <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Collapsible Group Item #1
         </a>
       </h4>
     </div>
-    <div id="collapseOne" class="panel-collapse collapse in">
+    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
       <div class="panel-body">
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
   <div class="panel panel-default">
-    <div class="panel-heading">
+    <div class="panel-heading" role="tab" id="headingTwo">
       <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Collapsible Group Item #2
         </a>
       </h4>
     </div>
-    <div id="collapseTwo" class="panel-collapse collapse">
+    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
       <div class="panel-body">
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
   <div class="panel panel-default">
-    <div class="panel-heading">
+    <div class="panel-heading" role="tab" id="headingThree">
       <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
           Collapsible Group Item #3
         </a>
       </h4>
     </div>
-    <div id="collapseThree" class="panel-collapse collapse">
+    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
       <div class="panel-body">
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
@@ -105,15 +105,42 @@
 </div>
 {% endhighlight %}
 
+  <p>It's also possible to swap out <code>.panel-body</code>s with <code>.list-group</code>s.</p>
+
+  <div class="panel-group" role="tablist">
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
+        <h4 class="panel-title">
+          <a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
+            Collapsible list group
+          </a>
+        </h4>
+      </div>
+      <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
+        <ul class="list-group">
+          <li class="list-group-item">Bootply</li>
+          <li class="list-group-item">One itmus ac facilin</li>
+          <li class="list-group-item">Second eros</li>
+        </ul>
+        <div class="panel-footer">Footer</div>
+      </div>
+    </div>
+  </div>
+
   <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
 {% highlight html %}
-<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo">
   simple collapsible
 </button>
 
 <div id="demo" class="collapse in">...</div>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Make expand/collapse controls accessible</h4>
+    <p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
+    <p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
+  </div>
 
   <h2 id="collapse-usage">Usage</h2>
   <p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
@@ -125,7 +152,7 @@
   <p>These classes can be found in <code>component-animations.less</code>.</p>
 
   <h3>Via data attributes</h3>
-  <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
+  <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to the element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
   <p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
 
   <h3>Via JavaScript</h3>
@@ -151,7 +178,7 @@ $('.collapse').collapse()
          <td>parent</td>
          <td>selector</td>
          <td>false</td>
-         <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>panel</code> class)</td>
+         <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td>
        </tr>
        <tr>
          <td>toggle</td>

docs/_includes/js/dropdowns.html

@@ -9,7 +9,7 @@
     <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
+          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -20,35 +20,44 @@
         <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
           <ul class="nav navbar-nav">
             <li class="dropdown">
-              <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+                Dropdown
+                <span class="caret"></span>
+              </a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
                 <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
               </ul>
             </li>
             <li class="dropdown">
-              <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+              <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+                Dropdown
+                <span class="caret"></span>
+              </a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
                 <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
               </ul>
             </li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
             <li id="fat-menu" class="dropdown">
-              <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+              <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+                Dropdown
+                <span class="caret"></span>
+              </a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
                 <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
               </ul>
             </li>
           </ul>
@@ -59,36 +68,45 @@
 
   <h3>Within pills</h3>
   <div class="bs-example">
-    <ul class="nav nav-pills">
-      <li class="active"><a href="#">Regular link</a></li>
-      <li class="dropdown">
-        <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+    <ul class="nav nav-pills" role="tablist">
+      <li role="presentation" class="active"><a href="#">Regular link</a></li>
+      <li role="presentation" class="dropdown">
+        <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+          Dropdown
+          <span class="caret"></span>
+        </a>
         <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
           <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
         </ul>
       </li>
-      <li class="dropdown">
-        <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+      <li role="presentation" class="dropdown">
+        <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+          Dropdown
+          <span class="caret"></span>
+        </a>
         <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
           <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
         </ul>
       </li>
-      <li class="dropdown">
-        <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+      <li role="presentation" class="dropdown">
+        <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+          Dropdown
+          <span class="caret"></span>
+        </a>
         <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
           <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
         </ul>
       </li>
     </ul> <!-- /pills -->
@@ -96,26 +114,31 @@
 
 
   <h2 id="dropdowns-usage">Usage</h2>
-  <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item. When opened, the plugin also adds <code>.dropdown-backdrop</code> as a click area for closing dropdown menus when clicking outside the menu. Note: The <code>data-toggle=dropdown</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
+  <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
+  <p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
+  <p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
 
   <h3>Via data attributes</h3>
   <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
+  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+    Dropdown trigger
+    <span class="caret"></span>
+  </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     ...
   </ul>
 </div>
 {% endhighlight %}
-  <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
+  <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-    Dropdown <span class="caret"></span>
+  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+    Dropdown trigger
+    <span class="caret"></span>
   </a>
 
-
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     ...
   </ul>

docs/_includes/js/modal.html

@@ -1,7 +1,5 @@
 <div class="bs-docs-section">
   <h1 id="modals" class="page-header">Modals <small>modal.js</small></h1>
-
-  <h2 id="modals-examples">Examples</h2>
   <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
 
   <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
@@ -17,6 +15,10 @@
     <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
   </div>
 
+  <p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong></p>
+
+  <h2 id="modals-examples">Examples</h2>
+
   <h3>Static example</h3>
   <p>A rendered modal with header, body, and set of actions in the footer.</p>
   <div class="bs-example bs-example-modal">
@@ -24,7 +26,7 @@
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <h4 class="modal-title">Modal title</h4>
           </div>
           <div class="modal-body">
@@ -43,7 +45,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -66,8 +68,8 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           <h4>Text in a modal</h4>
@@ -102,13 +104,13 @@
   </div><!-- /.modal -->
 
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       Launch demo modal
     </button>
   </div><!-- /example -->
 {% highlight html %}
 <!-- Button trigger modal -->
-<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   Launch demo modal
 </button>
 
@@ -117,7 +119,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -146,12 +148,12 @@
   <h2 id="modals-sizes">Optional sizes</h2>
   <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
   <div class="bs-example">
-    <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
-    <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
   </div>
 {% highlight html %}
 <!-- Large modal -->
-<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
 
 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
@@ -162,7 +164,7 @@
 </div>
 
 <!-- Small modal -->
-<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
 
 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-sm">
@@ -179,7 +181,7 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
           <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
         </div>
         <div class="modal-body">
@@ -193,7 +195,7 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
           <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
         </div>
         <div class="modal-body">
@@ -209,6 +211,86 @@
 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
   ...
 </div>
+{% endhighlight %}
+
+  <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
+  <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
+  <div class="bs-example" style="padding-bottom: 24px;">
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+    ...more buttons...
+
+    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <h4 class="modal-title" id="exampleModalLabel">New message</h4>
+          </div>
+          <div class="modal-body">
+            <form role="form">
+              <div class="form-group">
+                <label for="recipient-name" class="control-label">Recipient:</label>
+                <input type="text" class="form-control" id="recipient-name">
+              </div>
+              <div class="form-group">
+                <label for="message-text" class="control-label">Message:</label>
+                <textarea class="form-control" id="message-text"></textarea>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Send message</button>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.modal -->
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+...more buttons...
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
+      </div>
+      <div class="modal-body">
+        <form role="form">
+          <div class="form-group">
+            <label for="recipient-name" class="control-label">Recipient:</label>
+            <input type="text" class="form-control" id="recipient-name">
+          </div>
+          <div class="form-group">
+            <label for="message-text" class="control-label">Message:</label>
+            <textarea class="form-control" id="message-text"></textarea>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Send message</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+{% highlight js %}
+$('#exampleModal').on('show.bs.modal', function (event) {
+  var button = $(event.relatedTarget) // Button that triggered the modal
+  var recipient = button.data('whatever') // Extract info from data-* attributes
+  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+  var modal = $(this)
+  modal.find('.modal-title').text('New message to ' + recipient)
+  modal.find('.modal-body input').val(recipient)
+})
 {% endhighlight %}
 
   <h2 id="modals-usage">Usage</h2>
@@ -259,7 +341,9 @@
          <td>remote</td>
          <td>path</td>
          <td>false</td>
-         <td><p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
+         <td>
+          <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
+          <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
 {% highlight html %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
 {% endhighlight %}
@@ -320,7 +404,7 @@ $('#myModal').modal({
        </tr>
        <tr>
          <td>loaded.bs.modal</td>
-         <td>This event is fired when the modal has loaded content using the remote option.</td>
+         <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
        </tr>
       </tbody>
     </table>

docs/_includes/js/overview.html

@@ -45,7 +45,13 @@ $('#myModal').modal({ keyboard: false })   // initialized with no keyboard
 $('#myModal').modal('show')                // initializes and invokes show immediately
 {% endhighlight %}
 
-  <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+  <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
+
+  <h4>Default settings</h4>
+  <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:<p>
+{% highlight js %}
+$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
+{% endhighlight %}
 
   <h3 id="js-noconflict">No conflict</h3>
   <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
@@ -64,6 +70,9 @@ $('#myModal').on('show.bs.modal', function (e) {
 })
 {% endhighlight %}
 
+  <h3 id="js-disabled">No special fallbacks when JavaScript is disabled</h3>
+  <p>Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
+
   <div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
     <h4>Third-party libraries</h4>
     <p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>

docs/_includes/js/popovers.html

@@ -1,8 +1,8 @@
 <div class="bs-docs-section">
   <h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1>
 
-  <h2 id="popovers-examples">Examples</h2>
   <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
+  <p>Popovers whose both title and content are zero-length are never displayed.</p>
 
   <div class="bs-callout bs-callout-danger">
     <h4>Plugin dependency</h4>
@@ -11,16 +11,31 @@
   <div class="bs-callout bs-callout-danger">
     <h4>Opt-in functionality</h4>
     <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+    <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
+{% highlight js %}
+$(function () {
+  $('[data-toggle="popover"]').popover()
+})
+{% endhighlight %}
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Popovers in button groups and input groups require special setting</h4>
     <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
   </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Don't try to show popovers on hidden elements</h4>
+    <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
+  </div>
   <div class="bs-callout bs-callout-info">
     <h4>Popovers on disabled elements require wrapper elements</h4>
     <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p>
   </div>
+  <div class="bs-callout bs-callout-info">
+    <h4>Multiple-line links</h4>
+    <p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+  </div>
 
+  <h2 id="popovers-examples">Examples</h2>
   <h3>Static popover</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-popover">
@@ -69,8 +84,8 @@
 {% endhighlight %}
 
   <h4>Four directions</h4>
-  <div class="bs-example tooltip-demo">
-    <div class="bs-example-tooltips">
+  <div class="bs-example popover-demo">
+    <div class="bs-example-popovers">
       <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on left
       </button>
@@ -105,23 +120,17 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 {% endhighlight %}
 
   <h4>Dismiss on next click</h4>
-  <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
+  <p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Specific markup required for dismiss-on-next-click</h4>
+    <p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
+  </div>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+    <a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
   </div>
 {% highlight html %}
-<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
 {% endhighlight %}
-{% highlight js %}
-$('.popover-dismiss').popover({
-  trigger: 'focus'
-})
-{% endhighlight %}
-
-  <div class="bs-callout bs-callout-warning">
-    <h4>Multiple-line links</h4>
-    <p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
-  </div>
 
 
   <h2 id="popovers-usage">Usage</h2>
@@ -135,9 +144,9 @@ $('.popover-dismiss').popover({
       <thead>
         <tr>
           <th style="width: 100px;">Name</th>
-          <th style="width: 100px;">type</th>
-          <th style="width: 50px;">default</th>
-          <th>description</th>
+          <th style="width: 100px;">Type</th>
+          <th style="width: 50px;">Default</th>
+          <th>Description</th>
         </tr>
       </thead>
       <tbody>
@@ -145,7 +154,34 @@ $('.popover-dismiss').popover({
           <td>animation</td>
           <td>boolean</td>
           <td>true</td>
-          <td>apply a CSS fade transition to the popover</td>
+          <td>Apply a CSS fade transition to the popover</td>
+        </tr>
+        <tr>
+          <td>container</td>
+          <td>string | false</td>
+          <td>false</td>
+          <td>
+            <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>content</td>
+          <td>string | function</td>
+          <td>''</td>
+          <td>
+            <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+            <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>delay</td>
+          <td>number | object</td>
+          <td>0</td>
+          <td>
+           <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+           <p>If a number is supplied, delay is applied to both hide/show</p>
+           <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+          </td>
         </tr>
         <tr>
           <td>html</td>
@@ -157,50 +193,52 @@ $('.popover-dismiss').popover({
           <td>placement</td>
           <td>string | function</td>
           <td>'right'</td>
-          <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</td>
+          <td>
+            <p>How to position the popover - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</p>
+            <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
+          </td>
         </tr>
         <tr>
           <td>selector</td>
           <td>string</td>
           <td>false</td>
-          <td>if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
+          <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
         </tr>
         <tr>
-          <td>trigger</td>
+          <td>template</td>
           <td>string</td>
-          <td>'click'</td>
-          <td>how popover is triggered - click | hover | focus | manual</td>
+          <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+          <td>
+            <p>Base HTML to use when creating the popover.</p>
+            <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
+            <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+            <p><code>.arrow</code> will become the popover's arrow.</p>
+            <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
+          </td>
         </tr>
         <tr>
           <td>title</td>
           <td>string | function</td>
           <td>''</td>
-          <td>default title value if <code>title</code> attribute isn't present</td>
-        </tr>
-        <tr>
-          <td>content</td>
-          <td>string | function</td>
-          <td>''</td>
-          <td>default content value if <code>data-content</code> attribute isn't present</td>
-        </tr>
-        <tr>
-          <td>delay</td>
-          <td>number | object</td>
-          <td>0</td>
           <td>
-           <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
-           <p>If a number is supplied, delay is applied to both hide/show</p>
-           <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+            <p>Default title value if <code>title</code> attribute isn't present.</p>
+            <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
           </td>
         </tr>
         <tr>
-          <td>container</td>
-          <td>string | false</td>
-          <td>false</td>
-          <td>
-           <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
-          </td>
+          <td>trigger</td>
+          <td>string</td>
+          <td>'click'</td>
+          <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
         </tr>
+        <tr>
+          <td>viewport</td>
+          <td>string | object</td>
+          <td>{ selector: 'body', padding: 0 }</td>
+          <td>
+            <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+          </td>
+       </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
@@ -214,105 +252,21 @@ $('.popover-dismiss').popover({
   <p>Initializes popovers for an element collection.</p>
 
   <h4>.popover('show')</h4>
-  <p>Reveals an elements popover.</p>
+  <p>Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.</p>
   {% highlight js %}$('#element').popover('show'){% endhighlight %}
 
   <h4>.popover('hide')</h4>
-  <p>Hides an elements popover.</p>
+  <p>Hides an element's popover.</p>
   {% highlight js %}$('#element').popover('hide'){% endhighlight %}
 
   <h4>.popover('toggle')</h4>
-  <p>Toggles an elements popover.</p>
+  <p>Toggles an element's popover.</p>
   {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
 
   <h4>.popover('destroy')</h4>
   <p>Hides and destroys an element's popover.</p>
   {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
   <h3>Events</h3>
-  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
-      <thead>
-       <tr>
-         <th style="width: 150px;">Event Type</th>
-         <th>Description</th>
-       </tr>
-      </thead>
-      <tbody>
-       <tr>
-         <td>show.bs.popover</td>
-         <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-       </tr>
-       <tr>
-         <td>shown.bs.popover</td>
-         <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
-       </tr>
-       <tr>
-         <td>hide.bs.popover</td>
-         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-       </tr>
-       <tr>
-         <td>hidden.bs.popover</td>
-         <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-       </tr>
-      </tbody>
-    </table>
-  </div><!-- /.table-responsive -->
-{% highlight js %}
-$('#myPopover').on('hidden.bs.popover', function () {
-  // do something…
-})
-{% endhighlight %}
-</div>
-
-
-
-<!-- Alert
-================================================== -->
-<div class="bs-docs-section">
-  <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
-
-  <h2 id="alerts-examples">Example alerts</h2>
-  <p>Add dismiss functionality to all alert messages with this plugin.</p>
-  <div class="bs-example">
-    <div class="alert alert-warning fade in" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-      <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-    </div>
-  </div><!-- /example -->
-
-  <div class="bs-example">
-    <div class="alert alert-danger fade in" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-      <h4>Oh snap! You got an error!</h4>
-      <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-      <p>
-        <button type="button" class="btn btn-danger">Take this action</button>
-        <button type="button" class="btn btn-default">Or do this</button>
-      </p>
-    </div>
-  </div><!-- /example -->
-
-
-  <h2 id="alerts-usage">Usage</h2>
-  <p>Enable dismissal of an alert via JavaScript:</p>
-  {% highlight js %}$(".alert").alert(){% endhighlight %}
-
-  <h3>Markup</h3>
-  <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
-  {% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>{% endhighlight %}
-
-  <h3>Methods</h3>
-
-  <h4>$().alert()</h4>
-  <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
-
-  <h4>.alert('close')</h4>
-  <p>Closes an alert.</p>
-  {% highlight js %}$(".alert").alert('close'){% endhighlight %}
-
-
-  <h3>Events</h3>
-  <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
@@ -323,18 +277,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
       </thead>
       <tbody>
         <tr>
-          <td>close.bs.alert</td>
-          <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+          <td>show.bs.popover</td>
+          <td>This event fires immediately when the <code>show</code> instance method is called.</td>
         </tr>
         <tr>
-          <td>closed.bs.alert</td>
-          <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
+          <td>shown.bs.popover</td>
+          <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+        </tr>
+        <tr>
+          <td>hide.bs.popover</td>
+          <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+        </tr>
+        <tr>
+          <td>hidden.bs.popover</td>
+          <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
         </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
 {% highlight js %}
-$('#my-alert').bind('closed.bs.alert', function () {
+$('#myPopover').on('hidden.bs.popover', function () {
   // do something…
 })
 {% endhighlight %}

docs/_includes/js/scrollspy.html

@@ -7,7 +7,7 @@
     <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
+          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -20,7 +20,7 @@
             <li><a href="#fat">@fat</a></li>
             <li><a href="#mdo">@mdo</a></li>
             <li class="dropdown">
-              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                 <li><a href="#one" tabindex="-1">one</a></li>
                 <li><a href="#two" tabindex="-1">two</a></li>
@@ -51,6 +51,19 @@
 
   <h2 id="scrollspy-usage">Usage</h2>
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Requires Bootstrap nav</h4>
+    <p>Scrollspy currently requires the use of a <a href="../components/#nav">Bootstrap nav component</a> for proper highlighting of active links.</p>
+  </div>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Resolvable ID targets required</h4>
+    <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
+  </div>
+  <div class="bs-callout bs-callout-info">
+    <h4>Non-<code>:visible</code> target elements ignored</h4>
+    <p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
+  </div>
+
   <h3>Requires relative positioning</h3>
   <p>No matter the implementation method, scrollspy requires the use of <code>position: relative;</code> on the element you're spying on. In most cases this is the <code>&lt;body&gt;</code>.</p>
 
@@ -65,7 +78,7 @@ body {
 <body data-spy="scroll" data-target=".navbar-example">
   ...
   <div class="navbar-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       ...
     </ul>
   </div>
@@ -79,10 +92,6 @@ body {
 $('body').scrollspy({ target: '.navbar-example' })
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-danger">
-    <h4>Resolvable ID targets required</h4>
-    <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
-  </div>
 
   <h3>Methods</h3>
   <h4>.scrollspy('refresh')</h4>

docs/_includes/js/tabs.html

@@ -3,29 +3,29 @@
 
   <h2 id="tabs-examples">Example tabs</h2>
   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
-  <div class="bs-example bs-example-tabs">
-    <ul id="myTab" class="nav nav-tabs">
-      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-      <li><a href="#profile" data-toggle="tab">Profile</a></li>
-      <li class="dropdown">
-        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-          <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-          <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+  <div class="bs-example bs-example-tabs" role="tabpanel">
+    <ul id="myTab" class="nav nav-tabs" role="tablist">
+      <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
+      <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
+      <li role="presentation" class="dropdown">
+        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Dropdown <span class="caret"></span></a>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
+          <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
+          <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
         </ul>
       </li>
     </ul>
     <div id="myTabContent" class="tab-content">
-      <div class="tab-pane fade in active" id="home">
+      <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
         <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
       </div>
-      <div class="tab-pane fade" id="profile">
+      <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
         <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
       </div>
-      <div class="tab-pane fade" id="dropdown1">
+      <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
         <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
       </div>
-      <div class="tab-pane fade" id="dropdown2">
+      <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
         <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
       </div>
     </div>
@@ -59,20 +59,24 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   <h3>Markup</h3>
   <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
 {% highlight html %}
-<!-- Nav tabs -->
-<ul class="nav nav-tabs">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
-</ul>
+<div role="tabpanel">
+
+  <!-- Nav tabs -->
+  <ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
+    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
+    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
+    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
+  </ul>
+
+  <!-- Tab panes -->
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="home">...</div>
+    <div role="tabpanel" class="tab-pane" id="profile">...</div>
+    <div role="tabpanel" class="tab-pane" id="messages">...</div>
+    <div role="tabpanel" class="tab-pane" id="settings">...</div>
+  </div>
 
-<!-- Tab panes -->
-<div class="tab-content">
-  <div class="tab-pane active" id="home">...</div>
-  <div class="tab-pane" id="profile">...</div>
-  <div class="tab-pane" id="messages">...</div>
-  <div class="tab-pane" id="settings">...</div>
 </div>
 {% endhighlight %}
 
@@ -80,10 +84,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
 {% highlight html %}
 <div class="tab-content">
-  <div class="tab-pane fade in active" id="home">...</div>
-  <div class="tab-pane fade" id="profile">...</div>
-  <div class="tab-pane fade" id="messages">...</div>
-  <div class="tab-pane fade" id="settings">...</div>
+  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
+  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
+  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
+  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
 </div>
 {% endhighlight %}
 
@@ -93,18 +97,18 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
   </p>
 {% highlight html %}
-<ul class="nav nav-tabs" id="myTab">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+<ul class="nav nav-tabs" role="tablist" id="myTab">
+  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
+  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <div class="tab-content">
-  <div class="tab-pane active" id="home">...</div>
-  <div class="tab-pane" id="profile">...</div>
-  <div class="tab-pane" id="messages">...</div>
-  <div class="tab-pane" id="settings">...</div>
+  <div role="tabpanel" class="tab-pane active" id="home">...</div>
+  <div role="tabpanel" class="tab-pane" id="profile">...</div>
+  <div role="tabpanel" class="tab-pane" id="messages">...</div>
+  <div role="tabpanel" class="tab-pane" id="settings">...</div>
 </div>
 
 <script>
@@ -115,6 +119,14 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}
 
   <h3>Events</h3>
+  <p>When showing a new tab, the events fire in the following order:</p>
+  <ol>
+    <li><code>hide.bs.tab</code> (on the current active tab)</li>
+    <li><code>show.bs.tab</code> (on the to-be-shown tab)</li>
+    <li><code>hidden.bs.tab</code> (on the previous active tab, the same one as for the <code>hide.bs.tab</code> event)</li>
+    <li><code>shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code>show.bs.tab</code> event)</li>
+  </ol>
+  <p>If no tab was already active, then the <code>hide.bs.tab</code> and <code>hidden.bs.tab</code> events will not be fired.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
@@ -132,13 +144,21 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
          <td>shown.bs.tab</td>
          <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
        </tr>
+       <tr>
+         <td>hide.bs.tab</td>
+         <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
+       </tr>
+       <tr>
+         <td>hidden.bs.tab</td>
+         <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
+       </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
 {% highlight js %}
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-  e.target // activated tab
-  e.relatedTarget // previous tab
+  e.target // newly activated tab
+  e.relatedTarget // previous active tab
 })
 {% endhighlight %}
 </div>

docs/_includes/js/tooltips.html

@@ -1,14 +1,44 @@
 <div class="bs-docs-section">
   <h1 id="tooltips" class="page-header">Tooltips <small>tooltip.js</small></h1>
+  <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
+  <p>Tooltips with zero-length titles are never displayed.</p>
 
   <h2 id="tooltips-examples">Examples</h2>
-  <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
   <p>Hover over the links below to see tooltips:</p>
   <div class="bs-example tooltip-demo">
     <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
     </p>
   </div><!-- /example -->
 
+  <h3>Static tooltip</h3>
+  <p>Four options are available: top, right, bottom, and left aligned.</p>
+  <div class="bs-example bs-example-tooltip">
+    <div class="tooltip left" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <div class="tooltip-inner">
+        Tooltip on the left
+      </div>
+    </div>
+    <div class="tooltip top" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <div class="tooltip-inner">
+        Tooltip on the top
+      </div>
+    </div>
+    <div class="tooltip bottom" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <div class="tooltip-inner">
+        Tooltip on the bottom
+      </div>
+    </div>
+    <div class="tooltip right" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <div class="tooltip-inner">
+        Tooltip on the right
+      </div>
+    </div>
+  </div>
+
   <h3>Four directions</h3>
   <div class="bs-example tooltip-demo">
     <div class="bs-example-tooltips">
@@ -31,11 +61,22 @@
   <div class="bs-callout bs-callout-danger">
     <h4>Opt-in functionality</h4>
     <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+    <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
+{% highlight js %}
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+{% endhighlight %}
+
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Tooltips in button groups and input groups require special setting</h4>
     <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
   </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Don't try to show tooltips on hidden elements</h4>
+    <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
+  </div>
   <div class="bs-callout bs-callout-info">
     <h4>Tooltips on disabled elements require wrapper elements</h4>
     <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
@@ -54,16 +95,16 @@ $('#example').tooltip(options)
     <h4>Multiple-line links</h4>
     <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
   </div>
-{% highlight html linenos %}
+{% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 
 <!-- Generated markup by the plugin -->
-<div class="tooltip top">
+<div class="tooltip top" role="tooltip">
+  <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">
     Some tooltip text!
   </div>
-  <div class="tooltip-arrow"></div>
 </div>
 {% endhighlight %}
 
@@ -72,68 +113,93 @@ $('#example').tooltip(options)
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
-       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 100px;">type</th>
-         <th style="width: 50px;">default</th>
-         <th>description</th>
-       </tr>
+        <tr>
+          <th style="width: 100px;">Name</th>
+          <th style="width: 100px;">Type</th>
+          <th style="width: 50px;">Default</th>
+          <th>Description</th>
+        </tr>
       </thead>
       <tbody>
-       <tr>
-         <td>animation</td>
-         <td>boolean</td>
-         <td>true</td>
-         <td>apply a CSS fade transition to the tooltip</td>
-       </tr>
-       <tr>
-         <td>html</td>
-         <td>boolean</td>
-         <td>false</td>
-         <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
-       </tr>
-       <tr>
-         <td>placement</td>
-         <td>string | function</td>
-         <td>'top'</td>
-         <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
-       </tr>
-       <tr>
-         <td>selector</td>
-         <td>string</td>
-         <td>false</td>
-         <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
-       </tr>
-       <tr>
-         <td>title</td>
-         <td>string | function</td>
-         <td>''</td>
-         <td>default title value if <code>title</code> attribute isn't present</td>
-       </tr>
-       <tr>
-         <td>trigger</td>
-         <td>string</td>
-         <td>'hover focus'</td>
-         <td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
-       </tr>
-       <tr>
-         <td>delay</td>
-         <td>number | object</td>
-         <td>0</td>
-         <td>
-          <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
-          <p>If a number is supplied, delay is applied to both hide/show</p>
-          <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-         </td>
-       </tr>
-       <tr>
-         <td>container</td>
-         <td>string | false</td>
-         <td>false</td>
-         <td>
-          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
-         </td>
-       </tr>
+        <tr>
+          <td>animation</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Apply a CSS fade transition to the tooltip</td>
+        </tr>
+        <tr>
+          <td>container</td>
+          <td>string | false</td>
+          <td>false</td>
+          <td>
+            <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document  near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>delay</td>
+          <td>number | object</td>
+          <td>0</td>
+          <td>
+            <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+            <p>If a number is supplied, delay is applied to both hide/show</p>
+            <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+          </td>
+        </tr>
+        <tr>
+          <td>html</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+        </tr>
+        <tr>
+          <td>placement</td>
+          <td>string | function</td>
+          <td>'top'</td>
+          <td>
+            <p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
+            <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>selector</td>
+          <td>string</td>
+          <td>false</td>
+          <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+        </tr>
+        <tr>
+          <td>template</td>
+          <td>string</td>
+          <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+          <td>
+            <p>Base HTML to use when creating the tooltip.</p>
+            <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
+            <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+            <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>title</td>
+          <td>string | function</td>
+          <td>''</td>
+          <td>
+            <p>Default title value if <code>title</code> attribute isn't present.</p>
+            <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>trigger</td>
+          <td>string</td>
+          <td>'hover focus'</td>
+          <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+        </tr>
+        <tr>
+          <td>viewport</td>
+          <td>string | object</td>
+          <td>{ selector: 'body', padding: 0 }</td>
+          <td>
+            <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
@@ -148,7 +214,7 @@ $('#example').tooltip(options)
   <p>Attaches a tooltip handler to an element collection.</p>
 
   <h4>.tooltip('show')</h4>
-  <p>Reveals an element's tooltip.</p>
+  <p>Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.</p>
   {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
 
   <h4>.tooltip('hide')</h4>
@@ -167,28 +233,28 @@ $('#example').tooltip(options)
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
-       <tr>
-         <th style="width: 150px;">Event Type</th>
-         <th>Description</th>
-       </tr>
+        <tr>
+          <th style="width: 150px;">Event Type</th>
+          <th>Description</th>
+        </tr>
       </thead>
       <tbody>
-       <tr>
-         <td>show.bs.tooltip</td>
-         <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-       </tr>
-       <tr>
-         <td>shown.bs.tooltip</td>
-         <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
-       </tr>
-       <tr>
-         <td>hide.bs.tooltip</td>
-         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-       </tr>
-       <tr>
-         <td>hidden.bs.tooltip</td>
-         <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-       </tr>
+        <tr>
+          <td>show.bs.tooltip</td>
+          <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+        </tr>
+        <tr>
+          <td>shown.bs.tooltip</td>
+          <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+        </tr>
+        <tr>
+          <td>hide.bs.tooltip</td>
+          <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+        </tr>
+        <tr>
+          <td>hidden.bs.tooltip</td>
+          <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+        </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->

docs/_includes/nav/components.html

@@ -10,8 +10,9 @@
   <a href="#dropdowns">Dropdowns</a>
   <ul class="nav">
     <li><a href="#dropdowns-example">Example</a></li>
-    <li><a href="#dropdowns-alignment">Alignment options</a></li>
+    <li><a href="#dropdowns-alignment">Alignment</a></li>
     <li><a href="#dropdowns-headers">Headers</a></li>
+    <li><a href="#dropdowns-divider">Divider</a></li>
     <li><a href="#dropdowns-disabled">Disabled menu items</a></li>
   </ul>
 </li>
@@ -23,7 +24,7 @@
     <li><a href="#btn-groups-sizing">Sizing</a></li>
     <li><a href="#btn-groups-nested">Nesting</a></li>
     <li><a href="#btn-groups-vertical">Vertical variation</a></li>
-    <li><a href="#btn-groups-justified">Justified link variation</a></li>
+    <li><a href="#btn-groups-justified">Justified button groups</a></li>
   </ul>
 </li>
 <li>
@@ -51,7 +52,7 @@
   <ul class="nav">
     <li><a href="#nav-tabs">Tabs</a></li>
     <li><a href="#nav-pills">Pills</a></li>
-    <li><a href="#nav-justified">Justified nav</a></li>
+    <li><a href="#nav-justified">Justified</a></li>
     <li><a href="#nav-disabled-links">Disabled links</a></li>
     <li><a href="#nav-dropdowns">Using dropdowns</a></li>
   </ul>
@@ -60,6 +61,7 @@
   <a href="#navbar">Navbar</a>
   <ul class="nav">
     <li><a href="#navbar-default">Default navbar</a></li>
+    <li><a href="#navbar-brand-image">Brand image</a></li>
     <li><a href="#navbar-forms">Forms</a></li>
     <li><a href="#navbar-buttons">Buttons</a></li>
     <li><a href="#navbar-text">Text</a></li>
@@ -94,7 +96,7 @@
   <a href="#alerts">Alerts</a>
   <ul class="nav">
     <li><a href="#alerts-examples">Examples</a></li>
-    <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
+    <li><a href="#alerts-dismissible">Dismissible alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>

docs/_includes/nav/css.html

@@ -16,8 +16,9 @@
     <li><a href="#grid-options">Grid options</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>
+    <li><a href="#grid-example-mixed">Ex: Mobile and desktop</a></li>
+    <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
+    <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
     <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
     <li><a href="#grid-offsetting">Offsetting columns</a></li>
     <li><a href="#grid-nesting">Nesting columns</a></li>
@@ -32,6 +33,7 @@
     <li><a href="#type-body-copy">Body copy</a></li>
     <li><a href="#type-inline-text">Inline text elements</a></li>
     <li><a href="#type-alignment">Alignment classes</a></li>
+    <li><a href="#type-transformation">Transformation classes</a></li>
     <li><a href="#type-abbreviations">Abbreviations</a></li>
     <li><a href="#type-addresses">Addresses</a></li>
     <li><a href="#type-blockquotes">Blockquotes</a></li>
@@ -41,9 +43,9 @@
 <li>
   <a href="#code">Code</a>
   <ul class="nav">
-    <li><a href="#code-inline">Inline code</a></li>
+    <li><a href="#code-inline">Inline</a></li>
     <li><a href="#code-user-input">User input</a></li>
-    <li><a href="#code-block">Blocks of code</a></li>
+    <li><a href="#code-block">Basic block</a></li>
     <li><a href="#code-variables">Variables</a></li>
     <li><a href="#code-sample-output">Sample output</a></li>
   </ul>
@@ -104,7 +106,7 @@
     <li><a href="#helper-classes-center">Center content blocks</a></li>
     <li><a href="#helper-classes-clearfix">Clearfix</a></li>
     <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
-    <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
+    <li><a href="#helper-classes-screen-readers">Screen reader and keyboard navigation content</a></li>
     <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
   </ul>
 </li>
@@ -129,13 +131,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 install</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#rtl">RTL version</a>
-  <ul class="nav">
-    <li><a href="#rtl-how-to">How to use</a></li>
-    <li><a href="#rtl-css-flip">CSS Flip</a></li>
+    <li><a href="#sass-installation">Installation</a></li>
   </ul>
 </li>

docs/_includes/nav/customize.html

@@ -1,5 +1,6 @@
 
 <!-- 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><a href="#import-drop-target">Import</a></li>
 <li><a href="#less">Less components</a></li>
 <li><a href="#plugins">jQuery plugins</a></li>
 <li><a href="#less-variables">Less variables</a>
@@ -40,7 +41,6 @@
     <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><a href="#download">Download</a></li>

docs/_includes/nav/getting-started.html

@@ -8,6 +8,14 @@
     <li><a href="#whats-included-source">Source code</a></li>
   </ul>
 </li>
+<li>
+  <a href="#grunt">Compiling CSS and JavaScript</a>
+  <ul class="nav">
+    <li><a href="#grunt-installing">Installing Grunt</a></li>
+    <li><a href="#grunt-commands">Available Grunt commands</a></li>
+    <li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
+  </ul>
+</li>
 <li>
   <a href="#template">Basic template</a>
 </li>
@@ -20,6 +28,12 @@
     <li><a href="#examples-experiments">Experiments</a></li>
   </ul>
 </li>
+<li>
+  <a href="#tools">Tools</a>
+  <ul class="nav">
+    <li><a href="#tools-bootlint">Bootlint</a></li>
+  </ul>
+</li>
 <li>
   <a href="#community">Community</a>
 </li>
@@ -36,13 +50,15 @@
     <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
     <li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
     <li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
+    <li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
     <li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
     <li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
     <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-printing">Printing</a></li>
     <li><a href="#support-android-stock-browser">Android stock browser</a></li>
+    <li><a href="#support-validators">Validators</a></li>
   </ul>
 </li>
 <li>

docs/_includes/nav/javascript.html

@@ -6,6 +6,8 @@
     <li><a href="#js-programmatic-api">Programmatic API</a></li>
     <li><a href="#js-noconflict">No conflict</a></li>
     <li><a href="#js-events">Events</a></li>
+    <li><a href="#js-disabled">When JavaScript is disabled</a></li>
+    <li><a href="#callout-third-party-libs">Third-party libraries</a></li>
   </ul>
 </li>
 <li><a href="#transitions">Transitions</a></li>
@@ -15,6 +17,7 @@
     <li><a href="#modals-examples">Examples</a></li>
     <li><a href="#modals-sizes">Sizes</a></li>
     <li><a href="#modals-remove-animation">Remove animation</a></li>
+    <li><a href="#modals-related-target">Varying content based on trigger button</a></li>
     <li><a href="#modals-usage">Usage</a></li>
   </ul>
 </li>
@@ -63,8 +66,10 @@
 <li>
   <a href="#buttons">Button</a>
   <ul class="nav">
-    <li><a href="#buttons-examples">Examples</a></li>
-    <li><a href="#buttons-usage">Usage</a></li>
+    <li><a href="#buttons-stateful">Stateful</a></li>
+    <li><a href="#buttons-single-toggle">Single toggle</a></li>
+    <li><a href="#buttons-checkbox-radio">Checkbox / Radio</a></li>
+    <li><a href="#buttons-methods">Methods</a></li>
   </ul>
 </li>
 <li>

docs/_includes/nav/main.html

@@ -1,7 +1,7 @@
 <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">
+      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -12,24 +12,24 @@
     <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="../getting-started">Getting started</a>
+          <a href="../getting-started/">Getting started</a>
         </li>
         <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="../css">CSS</a>
+          <a href="../css/">CSS</a>
         </li>
         <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="../components">Components</a>
+          <a href="../components/">Components</a>
         </li>
         <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="../javascript">JavaScript</a>
+          <a href="../javascript/">JavaScript</a>
         </li>
         <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="../customize">Customize</a>
+          <a href="../customize/">Customize</a>
         </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
-        <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
+        <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
+        <li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
       </ul>
     </nav>
   </div>

docs/_jade/customizer-nav.jade

@@ -1,4 +1,6 @@
 // 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
+  a(href='#import-drop-target') Import
 li
   a(href='#less') Less components
 li

docs/_jade/customizer-variables.jade

@@ -8,8 +8,10 @@ each section in sections
       if subsection.heading
         h3(id=subsection.id)= subsection.heading
       div.row
-        each variable in subsection.variables
-          div.bs-customizer-input
+        each variable, index in subsection.variables
+          if index > 0 && index % 3 === 0
+            div.clearfix
+          div.col-xs-4
             label(for="input-" + variable.name)= variable.name
             input.form-control(
               id="input-" + variable.name

docs/_layouts/default.html

@@ -22,11 +22,12 @@
     <div class="container bs-docs-container">
 
       <div class="row">
-        <div class="col-md-9" role="main">
+        <div class="col-md-{% if page.fullwidth == true %}12{% else %}9{% endif %}" role="main">
           {{ content }}
         </div>
+        {% unless page.fullwidth == true %}
         <div class="col-md-3">
-          <div class="bs-docs-sidebar hidden-print" role="complementary">
+          <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
             <ul class="nav bs-docs-sidenav">
               {% if page.slug == "getting-started" %}
                 {% include nav/getting-started.html %}
@@ -47,10 +48,15 @@
             <a class="back-to-top" href="#top">
               Back to top
             </a>
+            {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+            <a href="#" class="bs-docs-theme-toggle" role="button">
+              Preview theme
+            </a>
+            {% endif %}
           </div>
         </div>
+        {% endunless %}
       </div>
-
     </div>
 
     {% include footer.html %}

docs/_plugins/bridge.rb

@@ -0,0 +1,9 @@
+require 'yaml'
+
+module Bridge
+  class Generator < Jekyll::Generator
+    def generate(site)
+      site.data["configBridge"] = YAML.load_file("./grunt/configBridge.json")
+    end
+  end
+end

docs/_plugins/bugify.rb

@@ -0,0 +1,25 @@
+module Jekyll
+  module BugFilter
+    def bugify(input)
+      upstream_map = {
+        "Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
+        "IE" => ["https://connect.microsoft.com/IE/feedback/details/", "IE bug"],
+        "Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
+        "Chromium" => ["https://code.google.com/p/chromium/issues/detail?id=", "Chromium issue"],
+        "WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
+        "Safari" => ["https://openradar.appspot.com/", "Apple Safari Radar"],
+        "Normalize" => ["https://github.com/necolas/normalize.css/issues/", "Normalize"]
+      }
+
+      upstream_map.each do |key, data|
+        url = data.is_a?(Array) ? data[0] : data
+        label = data.is_a?(Array) ? "#{data[1]} " : ""
+        input = input.gsub(/#{key}#(\d+)/, "<a href=\"#{url}\\1\">#{label}#\\1</a>")
+      end
+
+      return input
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::BugFilter)

docs/about.html

@@ -99,15 +99,18 @@ lead: "Learn about the project's history, meet the maintaining teams, and find o
   <div class="bs-brand-logos">
     <div class="bs-brand-item">
       <h3>Bootstrap</h3>
-      <span class="glyphicon glyphicon-ok"></span>
+      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+      <span class="sr-only">(correct)</span>
     </div>
     <div class="bs-brand-item">
       <h3 class="text-muted">BootStrap</h3>
-      <span class="glyphicon glyphicon-remove"></span>
+      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span class="sr-only">(incorrect)</span>
     </div>
     <div class="bs-brand-item">
       <h3 class="text-muted">Twitter Bootstrap</h3>
-      <span class="glyphicon glyphicon-remove"></span>
+      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span class="sr-only">(incorrect)</span>
     </div>
   </div>
 
@@ -121,5 +124,4 @@ lead: "Learn about the project's history, meet the maintaining teams, and find o
       <div class="color-swatch bs-gray"></div>
     </div>
   </div>
-
 </div>

docs/assets/brand/bootstrap-outline.svg

@@ -1,43 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
-<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
-		C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
-	<g id="B" display="inline" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
-			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
+<g id="outline" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
 	<g id="bg_1_">
-		<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
-			c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
-			v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
+		<path fill="#FFFFFF" d="M510,186c25.5,0,49.6,10,67.8,28.2S606,256.5,606,282v408c0,25.5-10,49.6-28.2,67.8S535.5,786,510,786H102
+			c-25.5,0-49.6-10-67.8-28.2S6,715.5,6,690V282c0-25.5,10-49.6,28.2-67.8S76.5,186,102,186H510 M510,180H102
+			C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282C612,225.9,566.1,180,510,180L510,180z"/>
 	</g>
 	<g id="B_2_" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
+		<path fill="#FFFFFF" d="M166.3,313h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
 			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<g display="inline">
-		<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
-			c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
-		<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
-			C335.7,372.5,348.2,368.2,358.2,359.8z"/>
-		<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
-			C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
-			h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
-			c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
+			c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,313L166.3,313z M228.8,462.5h102
+			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,462.5L228.8,462.5z M228.8,619h110.5
+			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
 	</g>
 </g>
 </svg>

docs/assets/brand/bootstrap-punchout.svg

@@ -1,43 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
-<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
-		C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
-	<g id="B" display="inline" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
-			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<g id="bg_1_" display="inline">
-		<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
-			c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
-			v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
-	</g>
-	<g id="B_2_" display="inline" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
-			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
+<g id="punchout" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
 	<g>
-		<path fill="#FFFFFF" d="M383.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V529h110.5c19,0,33.8-4.9,44.2-14.8
-			c10.5-9.8,15.8-23.8,15.8-41.8C399.2,454.8,394,441.2,383.5,431.8z"/>
-		<path fill="#FFFFFF" d="M368.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
-			C345.7,372.5,358.2,368.2,368.2,359.8z"/>
-		<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
-			C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
-			h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
-			c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
+		<path fill="#FFFFFF" d="M383.5,521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19,0,33.8-4.9,44.2-14.8
+			c10.5-9.8,15.8-23.8,15.8-41.8C399.2,544.8,394,531.2,383.5,521.8z"/>
+		<path fill="#FFFFFF" d="M368.2,449.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102
+			C345.7,462.5,358.2,458.2,368.2,449.8z"/>
+		<path fill="#FFFFFF" d="M510,180H102C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282
+			C612,225.9,566.1,180,510,180z M454.2,609.8c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164V313h173.5
+			c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2
+			c11.3,16.2,17,36.4,17,60.8C461.7,584.5,459.2,597.6,454.2,609.8z"/>
 	</g>
 </g>
 </svg>

docs/assets/brand/bootstrap-solid.svg

@@ -1,43 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
-<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-	<path id="bg" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192C0,135.9,45.9,90,102,90h408
-		c56.1,0,102,45.9,102,102V600z"/>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
+<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+	<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
+		c56.1,0,102,45.9,102,102V510z"/>
 	<g id="B" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
+		<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
 			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<g id="bg_1_" display="inline">
-		<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
-			c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
-			v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
-	</g>
-	<g id="B_2_" display="inline" enable-background="new    ">
-		<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
-			c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
-			c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
-			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
-			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
-	</g>
-</g>
-<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
-	<g display="inline">
-		<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
-			c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
-		<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
-			C335.7,372.5,348.2,368.2,358.2,359.8z"/>
-		<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
-			C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
-			h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
-			c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
+			c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
+			c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,282.5L228.8,282.5z M228.8,439h110.5
+			c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
 	</g>
 </g>
 </svg>

docs/assets/css/src/docs.css

@@ -9,27 +9,6 @@
 /*
  * Bootstrap Documentation
  * Special styles for presenting Bootstrap's documentation and code examples.
- *
- * Table of contents:
- *
- * Scaffolding
- * Main navigation
- * Footer
- * Social buttons
- * Homepage
- * Page headers
- * Old docs callout
- * Ads
- * Side navigation
- * Docs sections
- * Callouts
- * Grid styles
- * Examples
- * Code snippets (highlight)
- * Responsive tests
- * Glyphicons
- * Customizer
- * Miscellaneous
  */
 
 
@@ -239,7 +218,7 @@ body {
   background-repeat: repeat-x;
 }
 
- /* Masthead (headings and download button) */
+/* Masthead (headings and download button) */
 .bs-docs-masthead .bs-docs-booticon {
   margin: 0 auto 30px;
 }
@@ -272,8 +251,7 @@ body {
 
 @media (min-width: 768px) {
   .bs-docs-masthead {
-    padding-top: 80px;
-    padding-bottom: 80px;
+    padding: 80px 0;
   }
   .bs-docs-masthead h1 {
     font-size: 60px;
@@ -459,7 +437,7 @@ body {
   color: #333;
 }
 .bs-docs-featurette-img:hover {
-  color: #428bca;
+  color: #337ab7;
   text-decoration: none;
 }
 .bs-docs-featurette-img img {
@@ -467,16 +445,6 @@ body {
   margin-bottom: 15px;
 }
 
-/* Featured sites */
-.bs-docs-featured-sites {
-  margin-right: -1px;
-  margin-left: -1px;
-}
-.bs-docs-featured-sites .col-sm-3 {
-  padding-right: 1px;
-  padding-left: 1px;
-}
-
 @media (min-width: 480px) {
   .bs-docs-featurette .img-responsive {
     margin-top: 30px;
@@ -495,6 +463,30 @@ body {
     margin-right: auto;
     margin-left: auto;
   }
+  .bs-docs-featurette .img-responsive {
+    margin-top: 0;
+  }
+}
+
+
+/*
+ * Featured sites
+ *
+ * Homepage thumbnails from the Expo.
+ */
+
+.bs-docs-featured-sites {
+  margin-right: -1px;
+  margin-left: -1px;
+}
+.bs-docs-featured-sites .col-xs-6 {
+  padding: 1px;
+}
+.bs-docs-featured-sites .img-responsive {
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
   .bs-docs-featured-sites .col-sm-3:first-child img {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -503,9 +495,33 @@ body {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
+}
 
-  .bs-docs-featurette .img-responsive {
-    margin-top: 0;
+
+/*
+ * Examples
+ *
+ * Linked docs examples.
+ */
+
+.bs-examples .thumbnail {
+  margin-bottom: 10px;
+}
+.bs-examples h4 {
+  margin-bottom: 5px;
+}
+.bs-examples p {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 480px) {
+  .bs-examples {
+    margin-right: -10px;
+    margin-left: -10px;
+  }
+  .bs-examples > [class^="col-"] {
+    padding-right: 10px;
+    padding-left: 10px;
   }
 }
 
@@ -583,7 +599,8 @@ body {
 }
 
 /* Back to top (hidden on mobile) */
-.back-to-top {
+.back-to-top,
+.bs-docs-theme-toggle {
   display: none;
   padding: 4px 10px;
   margin-top: 10px;
@@ -592,13 +609,18 @@ body {
   font-weight: 500;
   color: #999;
 }
-.back-to-top:hover {
+.back-to-top:hover,
+.bs-docs-theme-toggle:hover {
   color: #563d7c;
   text-decoration: none;
 }
+.bs-docs-theme-toggle {
+  margin-top: 0;
+}
 
 @media (min-width: 768px) {
-  .back-to-top {
+  .back-to-top,
+  .bs-docs-theme-toggle {
     display: block;
   }
 }
@@ -666,7 +688,9 @@ h1[id] {
 .bs-callout {
   padding: 20px;
   margin: 20px 0;
-  border-left: 3px solid #eee;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
 }
 .bs-callout h4 {
   margin-top: 0;
@@ -676,28 +700,29 @@ h1[id] {
   margin-bottom: 0;
 }
 .bs-callout code {
-  background-color: #fff;
   border-radius: 3px;
 }
 
+/* Tighten up space between multiple callouts */
+.bs-callout + .bs-callout {
+  margin-top: -5px;
+}
+
 /* Variations */
 .bs-callout-danger {
-  background-color: #fdf7f7;
-  border-color: #d9534f;
+  border-left-color: #d9534f;
 }
 .bs-callout-danger h4 {
   color: #d9534f;
 }
 .bs-callout-warning {
-  background-color: #fcf8f2;
-  border-color: #f0ad4e;
+  border-left-color: #f0ad4e;
 }
 .bs-callout-warning h4 {
   color: #f0ad4e;
 }
 .bs-callout-info {
-  background-color: #f4f8fa;
-  border-color: #5bc0de;
+  border-left-color: #5bc0de;
 }
 .bs-callout-info h4 {
   color: #5bc0de;
@@ -746,7 +771,7 @@ h1[id] {
   background-color: #eee;
 }
 .color-swatches .brand-primary {
-  background-color: #428bca;
+  background-color: #337ab7;
 }
 .color-swatches .brand-success {
   background-color: #5cb85c;
@@ -804,6 +829,21 @@ h1[id] {
 }
 
 
+/*
+ * Wall of Browser Bugs
+ *
+ * Better display for the responsive table on the Wall of Browser Bugs.
+ */
+
+.bs-docs-browser-bugs td p {
+  margin-bottom: 0;
+}
+
+.bs-docs-browser-bugs th:first-child {
+  width: 18%;
+}
+
+
 /*
  * Grid examples
  *
@@ -835,7 +875,6 @@ h1[id] {
   position: relative;
   padding: 45px 15px 15px;
   margin: 0 -15px 15px;
-  background-color: #fafafa;
   border-color: #e5e5e5 #eee #eee;
   border-style: solid;
   border-width: 1px 0;
@@ -849,14 +888,15 @@ h1[id] {
   left: 15px;
   font-size: 12px;
   font-weight: bold;
-  color: #bbb;
+  color: #959595;
   text-transform: uppercase;
   letter-spacing: 1px;
   content: "Example";
 }
 
 /* Tweak display of the code snippets when following an example */
-.bs-example + .highlight {
+.bs-example + .highlight,
+.bs-example + .zero-clipboard + .highlight {
   margin: -15px -15px 15px;
   border-width: 0 0 1px;
   border-radius: 0;
@@ -874,7 +914,8 @@ h1[id] {
     -webkit-box-shadow: none;
             box-shadow: none;
   }
-  .bs-example + .highlight {
+  .bs-example + .highlight,
+  .bs-example + .zero-clipboard + .highlight {
     margin-top: -16px;
     margin-right: 0;
     margin-left: 0;
@@ -882,6 +923,9 @@ h1[id] {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
   }
+  .bs-example-standalone {
+    border-radius: 4px;
+  }
 }
 
 /* Undo width of container */
@@ -1019,12 +1063,6 @@ h1[id] {
   .bs-navbar-bottom-example .navbar-fixed-bottom {
     position: absolute;
   }
-  .bs-navbar-top-example {
-    border-radius: 0 0 4px 4px;
-  }
-  .bs-navbar-bottom-example {
-    border-radius: 4px 4px 0 0;
-  }
 }
 
 /* Pagination */
@@ -1058,10 +1096,14 @@ h1[id] {
 }
 
 /* Example dropdowns */
+.bs-example > .dropdown > .dropdown-toggle {
+  float: left;
+}
 .bs-example > .dropdown > .dropdown-menu {
   position: static;
   display: block;
   margin-bottom: 5px;
+  clear: left;
 }
 
 /* Example tabbable tabs */
@@ -1077,6 +1119,12 @@ h1[id] {
   margin-top: 5px;
   margin-bottom: 5px;
 }
+.bs-example-tooltip .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 10px 20px;
+  opacity: 1;
+}
 
 /* Popovers */
 .bs-example-popover {
@@ -1117,6 +1165,7 @@ h1[id] {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
+  word-break: normal;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
@@ -1125,13 +1174,9 @@ h1[id] {
   font-size: inherit;
   color: #333; /* Effectively the base text color */
 }
-.highlight pre .lineno {
+.highlight pre code:first-child {
   display: inline-block;
-  width: 22px;
-  padding-right: 5px;
-  margin-right: 10px;
-  color: #bebec5;
-  text-align: right;
+  padding-right: 45px;
 }
 
 
@@ -1310,13 +1355,6 @@ h1[id] {
   font-weight: normal;
 }
 
-.bs-customizer-input {
-  float: left;
-  width: 33.333333%;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
 /* Downloads */
 .bs-customize-download .btn-outline {
   padding: 20px;
@@ -1355,6 +1393,33 @@ h1[id] {
           box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
 }
 
+.bs-dropzone {
+  position: relative;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: #777;
+  text-align: center;
+  border: 2px dashed #eee;
+  border-radius: 4px;
+}
+.bs-dropzone h2 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.bs-dropzone hr {
+  width: 100px;
+}
+.bs-dropzone .lead {
+  margin-bottom: 10px;
+  font-weight: normal;
+  color: #333;
+}
+/*.bs-dropzone*/ #import-manual-trigger {
+  cursor: pointer;
+}
+.bs-dropzone p:last-child {
+  margin-bottom: 0;
+}
 
 /*
  * Brand guidelines
@@ -1432,23 +1497,51 @@ h1[id] {
 }
 
 
+/*
+ * ZeroClipboard styles
+ */
+
+.zero-clipboard {
+  position: relative;
+  display: none;
+}
+.btn-clipboard {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: #777;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #e1e1e8;
+  border-radius: 0 4px 0 4px;
+}
+.btn-clipboard-hover {
+  color: #fff;
+  background-color: #563d7c;
+  border-color: #563d7c;
+}
+
+@media (min-width: 768px) {
+  .zero-clipboard {
+    display: block;
+  }
+  .bs-example + .zero-clipboard .btn-clipboard {
+    top: -16px;
+    border-top-right-radius: 0;
+  }
+}
+
+
 /*
  * Miscellaneous
  *
  * Odds and ends for optimum docs display.
  */
 
-/* Examples gallery: space out content better */
-.bs-examples .thumbnail {
-  margin-bottom: 10px;
-}
-.bs-examples h4 {
-  margin-bottom: 5px;
-}
-.bs-examples p {
-  margin-bottom: 20px;
-}
-
 /* Pseudo :focus state for showing how it looks in the docs */
 #focusedInput {
   border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/

docs/assets/js/ie-emulation-modes-warning.js

@@ -0,0 +1,51 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+/*!
+ * Copyright 2014 Twitter, Inc.
+ *
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see http://creativecommons.org/licenses/by/3.0/.
+ */
+// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
+(function () {
+  'use strict';
+
+  function emulatedIEMajorVersion() {
+    var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
+    if (groups === null) {
+      return null
+    }
+    var ieVersionNum = parseInt(groups[1], 10)
+    var ieMajorVersion = Math.floor(ieVersionNum)
+    return ieMajorVersion
+  }
+
+  function actualNonEmulatedIEMajorVersion() {
+    // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
+    // IE JavaScript conditional compilation docs: http://msdn.microsoft.com/en-us/library/ie/121hztk3(v=vs.94).aspx
+    // @cc_on docs: http://msdn.microsoft.com/en-us/library/ie/8ka90k2e(v=vs.94).aspx
+    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line
+    if (jscriptVersion === undefined) {
+      return 11 // IE11+ not in emulation mode
+    }
+    if (jscriptVersion < 9) {
+      return 8 // IE8 (or lower; haven't tested on IE<8)
+    }
+    return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
+  }
+
+  var ua = window.navigator.userAgent
+  if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
+    return // Opera, which might pretend to be IE
+  }
+  var emulated = emulatedIEMajorVersion()
+  if (emulated === null) {
+    return // Not IE
+  }
+  var nonEmulated = actualNonEmulatedIEMajorVersion()
+
+  if (emulated !== nonEmulated) {
+    window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
+  }
+})();