Merge branch 'master' into v4

Conflicts:
	Gruntfile.js
	_config.yml
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/fonts/glyphicons-halflings-regular.eot
	dist/fonts/glyphicons-halflings-regular.svg
	dist/fonts/glyphicons-halflings-regular.ttf
	dist/fonts/glyphicons-halflings-regular.woff
	docs/_data/glyphicons.yml
	docs/_includes/components/alerts.html
	docs/_includes/components/badges.html
	docs/_includes/components/button-dropdowns.html
	docs/_includes/components/button-groups.html
	docs/_includes/components/dropdowns.html
	docs/_includes/components/glyphicons.html
	docs/_includes/components/input-groups.html
	docs/_includes/components/labels.html
	docs/_includes/components/media.html
	docs/_includes/components/navbar.html
	docs/_includes/components/navs.html
	docs/_includes/components/pagination.html
	docs/_includes/components/panels.html
	docs/_includes/components/progress-bars.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/grid.html
	docs/_includes/css/helpers.html
	docs/_includes/css/images.html
	docs/_includes/css/less.html
	docs/_includes/css/responsive-utilities.html
	docs/_includes/css/sass.html
	docs/_includes/css/tables.html
	docs/_includes/css/type.html
	docs/_includes/getting-started/accessibility.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/community.html
	docs/_includes/getting-started/download.html
	docs/_includes/getting-started/examples.html
	docs/_includes/getting-started/whats-included.html
	docs/_includes/js/affix.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/overview.html
	docs/_includes/js/tabs.html
	docs/_includes/nav/components.html
	docs/_includes/nav/css.html
	docs/_includes/nav/javascript.html
	docs/_includes/nav/main.html
	docs/about.html
	docs/assets/css/docs.min.css
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/fonts/glyphicons-halflings-regular.eot
	docs/dist/fonts/glyphicons-halflings-regular.svg
	docs/dist/fonts/glyphicons-halflings-regular.ttf
	docs/dist/fonts/glyphicons-halflings-regular.woff
	docs/examples/carousel/index.html
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/navbar/index.html
	docs/examples/non-responsive/index.html
	docs/examples/non-responsive/non-responsive.css
	docs/examples/sticky-footer-navbar/index.html
	docs/examples/theme/index.html
	fonts/glyphicons-halflings-regular.eot
	fonts/glyphicons-halflings-regular.svg
	fonts/glyphicons-halflings-regular.ttf
	fonts/glyphicons-halflings-regular.woff
	less/_carousel.less
	less/_forms.less
	less/glyphicons.less

.travis.yml

@@ -11,22 +11,28 @@ before_install:
   - "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
+  - if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi
 install:
   - 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 ./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
+  - if [ "$TRAVIS_REPO_SLUG" != twbs-savage/bootstrap ] && [ "$TWBS_TEST" = core ]; then ./test-infra/s3_cache.py upload npm-modules; fi
+  - if [ "$TRAVIS_REPO_SLUG" != twbs-savage/bootstrap ] && [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi
 env:
   global:
-    - JEKYLL_VERSION: 2.5.1
-    - ROUGE_VERSION: 1.7.2
-    - SAUCE_USERNAME: bootstrap
+    - 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="
     - secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
     - secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
+    - secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
+    - secure: "XswSKBY0HJ/aO9VOBeWlvGpqSFF/DsJmNKz7o5RkJMJX340qe44J929uUNwwOwlv9YrgptzC2W6l8bpmZQV+p6IYs99SoSA8CCaUfIJaqeU9x/UiT5vIHgqaNax+vFJwvzHLpF5v/ggFqFEKCd54gCDasePLTztHeC4oL104iaQ="
+    - secure: "Dv1HX5dzyTh8gA2YsLI+yWEgh9lnGKPpRDDEYYvm42fjBFziUYfcpvA9g8GXQuU9srY3mhfsZkCDHN0x5n1gliOai5TSjmd5Hh+9UyhvNWE+D8HoUpcFXWoQXvy/if2r25m+ZWi3cqgXkkBOcal3W1ePMtU4ln18NcWyIZ0tEFo="
+    - secure: "PabpUdG2dE40hHUkMCdxk1e9Ak3BOo0h7Y5/uekosLKOz5N60Xmn/ooyrSkvicLthXO4cfONFhO3/xSVRKQOxlUw4on5i0VuNK+QSqxJk0IDaRSZnTCcC8J7083K0YL+FvMdGQwcYwMY9LiwS8aS014IRkSQjsa+mjo3owP+dOU="
+    - secure: "G4/f4PVyVi9o6UbZMqw9YFmDu7cHqe9iymiXYd1RcnPXwhWAePX12m0PWMhUj5itJ180PTEddVip8PNOgBdqyrDxEPKkcgAW2EElVAPIKJXVfvDW64UjQ0H7NS7XvF7iLQUJp/XfmR7NJ7tT393AQdh8SGmuQpJhgYbwIWbES/k="
   matrix:
     - TWBS_TEST=core
     - TWBS_TEST=validate-html
@@ -35,3 +41,5 @@ matrix:
   fast_finish: true
 notifications:
   slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
+  webhooks:
+    - http://savage.twbsapps.com/savage/travis

CONTRIBUTING.md

@@ -19,7 +19,7 @@ and [submitting pull requests](#pull-requests), but please respect the following
 restrictions:
 
 * Please **do not** use the issue tracker for personal support requests.  Stack
-  Overflow ([`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag) or [IRC](https://github.com/twbs/bootstrap/blob/master/README.md#community) are better places to get help.
+  Overflow ([`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag) or [IRC](README.md#community) are better places to get help.
 
 * Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.
@@ -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 identify 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](https://github.com/twbs/bootstrap/labels).
+
+
 ## Bug reports
 
 A bug is a _demonstrable problem_ that is caused by the code in the repository.
@@ -79,7 +98,7 @@ Example:
 ### 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/).
+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/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
 
 | Vendor(s)     | Browser(s)                   | Rendering engine | Bug reporting website(s)                                                              | Notes                                                    |
 | ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -178,15 +197,17 @@ included in the project:
     with a clear title and description against the `master` branch.
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
-license your work under the terms of the [MIT License](LICENSE.md).
+license your work under the terms of the [MIT License](LICENSE).
 
-### Pull request checker bot: Rorschach
+### Pull request bots
 
 [@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.
 
+[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
+
 
 ## Code guidelines
 
@@ -219,6 +240,6 @@ Run `grunt test` before committing to ensure your changes follow our coding stan
 
 ## License
 
-By contributing your code, you agree to license your contribution under the [MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE).
+By contributing your code, you agree to license your contribution under the [MIT license](LICENSE).
 
 Prior to v3.1.0, Bootstrap was released under the Apache License v2.0.

Gruntfile.js

@@ -20,7 +20,7 @@ module.exports = function (grunt) {
   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 filePath = path.join(__dirname, 'less/variables.less');
     var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
     var parser = new BsLessdocParser(fileContent);
     return { sections: parser.parseFile() };
@@ -149,7 +149,7 @@ module.exports = function (grunt) {
     },
 
     less: {
-      core: {
+      compileCore: {
         options: {
           strictMath: true,
           sourceMap: true,
@@ -160,13 +160,16 @@ module.exports = function (grunt) {
         src: 'less/bootstrap.less',
         dest: 'dist/css/<%= pkg.name %>.css'
       },
-      docs: {
+      compileTheme: {
         options: {
-          strictMath: true
+          strictMath: true,
+          sourceMap: true,
+          outputSourceFiles: true,
+          sourceMapURL: '<%= pkg.name %>-theme.css.map',
+          sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
         },
-        files: {
-          'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less'
-        }
+        src: 'less/theme.less',
+        dest: 'dist/css/<%= pkg.name %>-theme.css'
       }
     },
 
@@ -180,8 +183,14 @@ module.exports = function (grunt) {
         },
         src: 'dist/css/<%= pkg.name %>.css'
       },
+      theme: {
+        options: {
+          map: true
+        },
+        src: 'dist/css/<%= pkg.name %>-theme.css'
+      },
       docs: {
-        src: 'docs/assets/css/docs.min.css'
+        src: 'docs/assets/css/src/docs.css'
       },
       examples: {
         expand: true,
@@ -191,19 +200,45 @@ module.exports = function (grunt) {
       }
     },
 
+    csslint: {
+      options: {
+        csslintrc: 'less/.csslintrc'
+      },
+      dist: [
+        'dist/css/bootstrap.css',
+        'dist/css/bootstrap-theme.css'
+      ],
+      examples: [
+        'docs/examples/**/*.css'
+      ],
+      docs: {
+        options: {
+          ids: false,
+          'overqualified-elements': false
+        },
+        src: 'docs/assets/css/src/docs.css'
+      }
+    },
+
     cssmin: {
       options: {
         compatibility: 'ie8',
         keepSpecialComments: '*',
         noAdvanced: true
       },
-      core: {
-        files: {
-          'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css'
-        }
+      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: 'docs/assets/css/docs.min.css',
+        src: [
+          'docs/assets/css/src/docs.css',
+          'docs/assets/css/src/pygments-manni.css'
+        ],
         dest: 'docs/assets/css/docs.min.css'
       }
     },
@@ -241,6 +276,10 @@ module.exports = function (grunt) {
     },
 
     copy: {
+      fonts: {
+        src: 'fonts/*',
+        dest: 'dist/'
+      },
       docs: {
         src: 'dist/*/*',
         dest: 'docs/'
@@ -257,7 +296,15 @@ module.exports = function (grunt) {
     },
 
     jekyll: {
-      docs: {}
+      options: {
+        config: '_config.yml'
+      },
+      docs: {},
+      github: {
+        options: {
+          raw: 'github: true'
+        }
+      }
     },
 
     jade: {
@@ -282,13 +329,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.',
           'Attribute autocomplete not allowed on element input at this point.',
-          'Attribute autocomplete not allowed on element button at this point.',
-          'Element div not allowed as child of element progress in this context.',
-          'Element thead not allowed as child of element table in this context.',
-          'Bad value tablist for attribute role on element nav.'
+          'Attribute autocomplete not allowed on element button at this point.'
         ]
       },
       files: {
@@ -308,10 +351,6 @@ module.exports = function (grunt) {
       less: {
         files: 'less/**/*.less',
         tasks: 'less'
-      },
-      docs: {
-        files: 'docs/assets/less/*.less',
-        tasks: 'less'
       }
     },
 
@@ -351,7 +390,7 @@ module.exports = function (grunt) {
   require('time-grunt')(grunt);
 
   // Docs HTML validation task
-  grunt.registerTask('validate-html', ['jekyll', 'validation']);
+  grunt.registerTask('validate-html', ['jekyll:docs', 'validation']);
 
   var runSubset = function (subset) {
     return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
@@ -363,8 +402,10 @@ module.exports = function (grunt) {
   // Test task.
   var testSubtasks = [];
   // Skip core tests if running a different subset of the test suite
-  if (runSubset('core')) {
-    testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'test-js', 'docs']);
+  if (runSubset('core') &&
+      // Skip core tests if this is a Savage build
+      process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') {
+    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 (runSubset('validate-html') &&
@@ -388,14 +429,14 @@ module.exports = function (grunt) {
   grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
 
   // CSS distribution task.
-  grunt.registerTask('less-compile', ['less:core', 'less:docs']);
-  grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
+  grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
+  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', 'dist-css', 'dist-js']);
+  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
 
   // Default task.
-  grunt.registerTask('default', ['clean:dist', 'test']);
+  grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'test']);
 
   // Version numbering task.
   // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
@@ -418,9 +459,12 @@ module.exports = function (grunt) {
 
   // 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', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-customizer']);
+  grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-customizer']);
+
+  grunt.registerTask('docs-github', ['jekyll:github']);
 
   // 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.

README.md

 # [Bootstrap](http://getbootstrap.com)
 [![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
-[![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap)
+[![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](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.
+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/orgs/twbs/people) with the massive support and involvement of the community.
 
 To get started, check out <http://getbootstrap.com>!
 
@@ -24,7 +24,7 @@ To get started, check out <http://getbootstrap.com>!
 
 Four quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.0.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`.
@@ -126,4 +126,4 @@ For transparency into our release cycle and in striving to maintain backward com
 
 ## Copyright and license
 
-Code and documentation copyright 2011-2014 Twitter, Inc. Code released under [the MIT license](LICENSE). Docs released under [Creative Commons](docs/LICENSE).
+Code and documentation copyright 2011-2014 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).

_config.yml

@@ -24,16 +24,16 @@ repo:             https://github.com/twbs/bootstrap
 sass_repo:        https://github.com/twbs/bootstrap-sass
 
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v3.3.0.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v3.3.0/bootstrap-3.3.0-dist.zip
-  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.3.0.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:            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css
-  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js
+  css:            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
+  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
   jquery:         //code.jquery.com/jquery-2.1.1.min.js
 
 bug:

bower.json

 {
   "name": "bootstrap",
   "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "keywords": [
     "css",
     "js",

dist/js/bootstrap.js

 /*!
- * Bootstrap v3.3.0 (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)
  */
@@ -16,7 +16,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: transition.js v3.3.0
+ * Bootstrap: transition.js v3.3.1
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -76,7 +76,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: alert.js v3.3.0
+ * Bootstrap: alert.js v3.3.1
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
     $(el).on('click', dismiss, this.close)
   }
 
-  Alert.VERSION = '3.3.0'
+  Alert.VERSION = '3.3.1'
 
   Alert.TRANSITION_DURATION = 150
 
@@ -171,7 +171,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: button.js v3.3.0
+ * Bootstrap: button.js v3.3.1
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -191,7 +191,7 @@ if (typeof jQuery === 'undefined') {
     this.isLoading = false
   }
 
-  Button.VERSION  = '3.3.0'
+  Button.VERSION  = '3.3.1'
 
   Button.DEFAULTS = {
     loadingText: 'loading...'
@@ -288,7 +288,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: carousel.js v3.3.0
+ * Bootstrap: carousel.js v3.3.1
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -319,7 +319,7 @@ if (typeof jQuery === 'undefined') {
       .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
   }
 
-  Carousel.VERSION  = '3.3.0'
+  Carousel.VERSION  = '3.3.1'
 
   Carousel.TRANSITION_DURATION = 600
 
@@ -359,8 +359,11 @@ if (typeof jQuery === 'undefined') {
   }
 
   Carousel.prototype.getItemForDirection = function (direction, active) {
-    var delta = direction == 'prev' ? -1 : 1
     var activeIndex = this.getItemIndex(active)
+    var willWrap = (direction == 'prev' && activeIndex === 0)
+                || (direction == 'next' && activeIndex == (this.$items.length - 1))
+    if (willWrap && !this.options.wrap) return active
+    var delta = direction == 'prev' ? -1 : 1
     var itemIndex = (activeIndex + delta) % this.$items.length
     return this.$items.eq(itemIndex)
   }
@@ -405,14 +408,8 @@ if (typeof jQuery === 'undefined') {
     var $next     = next || this.getItemForDirection(type, $active)
     var isCycling = this.interval
     var direction = type == 'next' ? 'left' : 'right'
-    var fallback  = type == 'next' ? 'first' : 'last'
     var that      = this
 
-    if (!$next.length) {
-      if (!this.options.wrap) return
-      $next = this.$element.find('.item')[fallback]()
-    }
-
     if ($next.hasClass('active')) return (this.sliding = false)
 
     var relatedTarget = $next[0]
@@ -529,7 +526,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: collapse.js v3.3.0
+ * Bootstrap: collapse.js v3.3.1
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -558,7 +555,7 @@ if (typeof jQuery === 'undefined') {
     if (this.options.toggle) this.toggle()
   }
 
-  Collapse.VERSION  = '3.3.0'
+  Collapse.VERSION  = '3.3.1'
 
   Collapse.TRANSITION_DURATION = 350
 
@@ -576,7 +573,7 @@ if (typeof jQuery === 'undefined') {
     if (this.transitioning || this.$element.hasClass('in')) return
 
     var activesData
-    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
+    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
 
     if (actives && actives.length) {
       activesData = actives.data('bs.collapse')
@@ -741,7 +738,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: dropdown.js v3.3.0
+ * Bootstrap: dropdown.js v3.3.1
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -761,7 +758,7 @@ if (typeof jQuery === 'undefined') {
     $(element).on('click.bs.dropdown', this.toggle)
   }
 
-  Dropdown.VERSION = '3.3.0'
+  Dropdown.VERSION = '3.3.1'
 
   Dropdown.prototype.toggle = function (e) {
     var $this = $(this)
@@ -797,7 +794,7 @@ if (typeof jQuery === 'undefined') {
   }
 
   Dropdown.prototype.keydown = function (e) {
-    if (!/(38|40|27|32)/.test(e.which)) return
+    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
 
     var $this = $(this)
 
@@ -903,7 +900,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: modal.js v3.3.0
+ * Bootstrap: modal.js v3.3.1
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -934,7 +931,7 @@ if (typeof jQuery === 'undefined') {
     }
   }
 
-  Modal.VERSION  = '3.3.0'
+  Modal.VERSION  = '3.3.1'
 
   Modal.TRANSITION_DURATION = 300
   Modal.BACKDROP_TRANSITION_DURATION = 150
@@ -1228,7 +1225,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tooltip.js v3.3.0
+ * Bootstrap: tooltip.js v3.3.1
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
@@ -1254,7 +1251,7 @@ if (typeof jQuery === 'undefined') {
     this.init('tooltip', element, options)
   }
 
-  Tooltip.VERSION  = '3.3.0'
+  Tooltip.VERSION  = '3.3.1'
 
   Tooltip.TRANSITION_DURATION = 150
 
@@ -1707,7 +1704,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: popover.js v3.3.0
+ * Bootstrap: popover.js v3.3.1
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1727,7 +1724,7 @@ if (typeof jQuery === 'undefined') {
 
   if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
 
-  Popover.VERSION  = '3.3.0'
+  Popover.VERSION  = '3.3.1'
 
   Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right',
@@ -1827,7 +1824,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: scrollspy.js v3.3.0
+ * Bootstrap: scrollspy.js v3.3.1
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1858,7 +1855,7 @@ if (typeof jQuery === 'undefined') {
     this.process()
   }
 
-  ScrollSpy.VERSION  = '3.3.0'
+  ScrollSpy.VERSION  = '3.3.1'
 
   ScrollSpy.DEFAULTS = {
     offset: 10
@@ -2003,7 +2000,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tab.js v3.3.0
+ * Bootstrap: tab.js v3.3.1
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -2021,7 +2018,7 @@ if (typeof jQuery === 'undefined') {
     this.element = $(element)
   }
 
-  Tab.VERSION = '3.3.0'
+  Tab.VERSION = '3.3.1'
 
   Tab.TRANSITION_DURATION = 150
 
@@ -2157,7 +2154,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: affix.js v3.3.0
+ * Bootstrap: affix.js v3.3.1
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -2186,7 +2183,7 @@ if (typeof jQuery === 'undefined') {
     this.checkPosition()
   }
 
-  Affix.VERSION  = '3.3.0'
+  Affix.VERSION  = '3.3.1'
 
   Affix.RESET    = 'affix affix-top affix-bottom'
 
@@ -2211,7 +2208,7 @@ if (typeof jQuery === 'undefined') {
     var colliderTop    = initializing ? scrollTop : position.top
     var colliderHeight = initializing ? targetHeight : height
 
-    if (offsetTop != null && colliderTop <= offsetTop) return 'top'
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top'
     if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
 
     return false

docs/_data/browser-bugs.yml

@@ -108,16 +108,6 @@
   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
@@ -144,7 +134,7 @@
   summary: >
     Weird button behavior with some `<input type="number">` elements.
   upstream_bug: >
-    WebKit#137269
+    WebKit#137269, Safari#18834768
   origin: >
     Bootstrap#8350,
     Normalize#283,
@@ -156,7 +146,7 @@
   summary: >
     `display: table-cell;` within media query renders incorrectly when resizing the window.
   upstream_bug: >
-    WebKit#138167
+    WebKit#138167, Safari#18987206
   origin: >
     Bootstrap#9774
 
@@ -196,6 +186,6 @@
   summary: >
     Body content can be scrolled even though `overflow: hidden;` is applied to it.
   upstream_bug: >
-    Chromium#429604
+    Chromium#175502
   origin: >
-    Bootstrap#14972
+    Bootstrap#14972
\ No newline at end of file

docs/_includes/footer.html

@@ -7,7 +7,7 @@
     <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">
+    <ul class="bs-docs-footer-links text-muted">
       <li>Currently v{{ site.current_version }}</li>
       <li>&middot;</li>
       <li><a href="{{ site.repo }}">GitHub</a></li>

docs/_includes/js/popovers.html

 <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">
+  <div class="bs-callout bs-callout-danger" id="callout-popover-needs-tooltip">
     <h4>Plugin dependency</h4>
     <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
   </div>
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-danger" id="callout-popover-opt-in">
     <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>
@@ -19,23 +18,24 @@ $(function () {
 })
 {% endhighlight %}
   </div>
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-warning" id="callout-popover-groups">
     <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">
+  <div class="bs-callout bs-callout-warning" id="callout-popover-hidden">
     <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">
+  <div class="bs-callout bs-callout-info" id="callout-popover-disabled">
     <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">
+  <div class="bs-callout bs-callout-info" id="callout-popover-multiline">
     <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">
@@ -121,7 +121,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 
   <h4>Dismiss on next click</h4>
   <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">
+  <div class="bs-callout bs-callout-danger" id="callout-popover-dismiss-click">
     <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>
@@ -137,7 +137,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   <p>Enable popovers via JavaScript:</p>
   {% highlight js %}$('#example').popover(options){% endhighlight %}
 
-  <h3>Options</h3>
+  <h3 id="popovers-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
@@ -242,7 +242,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
-  <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-info" id="callout-popover-data">
     <h4>Data attributes for individual popovers</h4>
     <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
   </div>
@@ -266,9 +266,9 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   <h4>.popover('destroy')</h4>
   <p>Hides and destroys an element's popover.</p>
   {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
-  <h3>Events</h3>
+  <h3 id="popovers-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/_includes/js/scrollspy.html

@@ -4,7 +4,7 @@
   <h2 id="scrollspy-examples">Example in navbar</h2>
   <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
   <div class="bs-example">
-    <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
+    <nav id="navbar-example2" class="navbar navbar-default navbar-static">
       <div class="container-fluid">
         <div class="navbar-header">
           <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
@@ -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 <span class="caret"></span></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,10 +51,18 @@
 
   <h2 id="scrollspy-usage">Usage</h2>
 
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-warning" id="callout-scrollspy-needs-nav">
     <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" id="callout-scrollspy-target-ids">
+    <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" id="callout-scrollspy-invisible-targets">
+    <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>
@@ -84,16 +92,8 @@ 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>
-  <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>Methods</h3>
+  <h3 id="scrollspy-methods">Methods</h3>
   <h4>.scrollspy('refresh')</h4>
   <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
 {% highlight js %}
@@ -103,7 +103,7 @@ $('[data-spy="scroll"]').each(function () {
 {% endhighlight %}
 
 
-  <h3>Options</h3>
+  <h3 id="scrollspy-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
@@ -126,9 +126,9 @@ $('[data-spy="scroll"]').each(function () {
     </table>
   </div><!-- ./bs-table-responsive -->
 
-  <h3>Events</h3>
+  <h3 id="scrollspy-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/tooltips.html

@@ -6,8 +6,7 @@
   <h2 id="tooltips-examples">Examples</h2>
   <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>
+    <p>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>
@@ -58,7 +57,7 @@
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-danger" id="callout-tooltip-opt-in">
     <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>
@@ -69,15 +68,15 @@ $(function () {
 {% endhighlight %}
 
   </div>
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
     <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">
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-hidden">
     <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">
+  <div class="bs-callout bs-callout-info" id="callout-tooltip-disabled">
     <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>
   </div>
@@ -91,7 +90,7 @@ $('#example').tooltip(options)
 
   <h3>Markup</h3>
   <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-multiline">
     <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>
@@ -108,7 +107,7 @@ $('#example').tooltip(options)
 </div>
 {% endhighlight %}
 
-  <h3>Options</h3>
+  <h3 id="tooltips-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
@@ -203,12 +202,12 @@ $('#example').tooltip(options)
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
-  <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-info" id="callout-tooltip-data">
     <h4>Data attributes for individual tooltips</h4>
     <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
   </div>
 
-  <h3>Methods</h3>
+  <h3 id="tooltips-methods">Methods</h3>
 
   <h4>$().tooltip(options)</h4>
   <p>Attaches a tooltip handler to an element collection.</p>
@@ -229,9 +228,9 @@ $('#example').tooltip(options)
   <p>Hides and destroys an element's tooltip.</p>
   {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
 
-  <h3>Events</h3>
+  <h3 id="tooltips-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/about/brand.md

@@ -49,15 +49,15 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
 <div class="bs-brand-logos">
   <div class="bs-brand-item">
     <h3>Bootstrap</h3>
-    <span class="glyphicon glyphicon-ok"></span>
+    <strong class="text-success">Right</strong>
   </div>
   <div class="bs-brand-item">
     <h3 class="text-muted">BootStrap</h3>
-    <span class="glyphicon glyphicon-remove"></span>
+    <strong class="text-warning">Wrong</strong>
   </div>
   <div class="bs-brand-item">
     <h3 class="text-muted">Twitter Bootstrap</h3>
-    <span class="glyphicon glyphicon-remove"></span>
+    <strong class="text-warning">Wrong</strong>
   </div>
 </div>
 

docs/assets/css/src/docs.css

@@ -144,7 +144,6 @@ body {
 .bs-docs-footer-links {
   padding-left: 0;
   margin-top: 20px;
-  color: #999;
 }
 .bs-docs-footer-links li {
   display: inline;
@@ -1141,6 +1140,16 @@ h1[id] {
   overflow: auto;
 }
 
+/* Simple collapse example */
+#collapseExample .well {
+  margin-bottom: 0;
+}
+
+/* Don't wrap event names in Events tables in JS plugin docs */
+.bs-events-table > thead > tr > th:first-child,
+.bs-events-table > tbody > tr > td:first-child {
+  white-space: nowrap;
+}
 
 /*
  * Code snippets

docs/assets/js/src/customizer.js

@@ -11,7 +11,7 @@
 window.onload = function () { // wait for load in a dumb way because B-0
   'use strict';
   var cw = '/*!\n' +
-           ' * Bootstrap v3.3.0 (http://getbootstrap.com)\n' +
+           ' * Bootstrap v3.3.1 (http://getbootstrap.com)\n' +
            ' * Copyright 2011-' + new Date().getFullYear() + ' Twitter, Inc.\n' +
            ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
            ' */\n\n'
@@ -22,8 +22,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
   function showError(msg, err) {
     $('<div id="bsCustomizerAlert" class="bs-customizer-alert">' +
         '<div class="container">' +
-          '<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>' +
-          '<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
+          '<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right" aria-label="Close" role="button"><span aria-hidden="true">&times;</span></a>' +
+          '<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span><span class="sr-only">Warning:</span>' + msg + '</p>' +
           (err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') +
         '</div>' +
       '</div>').appendTo('body').alert()
@@ -32,7 +32,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
 
   function showSuccess(msg) {
     $('<div class="bs-callout bs-callout-info">' +
-      '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg +
+      '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + msg +
     '</div>').insertAfter('.bs-customize-download')
   }
 
@@ -50,7 +50,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
   }
 
   function showAlert(type, msg, insertAfter) {
-    $('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>')
+    $('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>')
       .insertAfter(insertAfter)
   }
 

docs/components/buttons.md

@@ -25,6 +25,33 @@ Use any of the available button classes to quickly create a styled button.
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
+<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>
+
+## Button tags
+
+Use the button classes on an `<a>`, `<button>`, or `<input>` element.
+
+{% example html %}
+<a class="btn btn-secondary" href="#" role="button">Link</a>
+<button class="btn btn-secondary" type="submit">Button</button>
+<input class="btn btn-secondary" type="button" value="Input">
+<input class="btn btn-secondary" type="submit" value="Submit">
+{% endexample %}
+
+<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 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>
+
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
@@ -53,7 +80,7 @@ Create block level buttons—those that span the full width of a parent—by add
 
 ## Active state
 
-Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` should you need to replicate the state programmatically.
+Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
 
 {% example html %}
 <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
@@ -83,27 +110,10 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
 
 <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>
   <p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
 </div>
-
-## Button tags
-
-Use the button classes on an `<a>`, `<button>`, or `<input>` element.
-
-{% example html %}
-<a class="btn btn-secondary" href="#" role="button">Link</a>
-<button class="btn btn-secondary" type="submit">Button</button>
-<input class="btn btn-secondary" type="button" value="Input">
-<input class="btn btn-secondary" type="submit" value="Submit">
-{% endexample %}
-
-<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 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>

docs/components/forms.md

@@ -10,7 +10,7 @@ Bootstrap normalizes common HTML5 form elements and adds a number of layout opti
 Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
 
 {% example html %}
-<form role="form">
+<form>
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -52,17 +52,11 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
 </div>
 
 {% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <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>
-  <div class="form-group">
-    <div class="input-group">
-      <div class="input-group-addon">@</div>
-      <input class="form-control" type="email" placeholder="Enter email">
-    </div>
-  </div>
   <div class="form-group">
     <label class="sr-only" for="exampleInputPassword2">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
@@ -72,7 +66,21 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
       <input type="checkbox"> Remember me
     </label>
   </div>
-  <button type="submit" class="btn btn-secondary">Sign in</button>
+  <button type="submit" class="btn btn-default">Sign in</button>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
+    <div class="input-group">
+      <div class="input-group-addon">$</div>
+      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
+      <div class="input-group-addon">.00</div>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-primary">Transfer cash</button>
 </form>
 {% endexample %}
 
@@ -81,7 +89,7 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
 Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
 
 {% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -253,7 +261,7 @@ Use the default option, or add `multiple` to show multiple options at once.
 When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
 
 {% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -270,7 +278,7 @@ When you need to place plain text next to a form label within a form, use the `.
 {% endexample %}
 
 {% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group">
     <label class="sr-only">Email</label>
     <p class="form-control-static">email@example.com</p>
@@ -288,7 +296,7 @@ When you need to place plain text next to a form label within a form, use the `.
 We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
 
 <div class="bs-example">
-  <form role="form">
+  <form>
     <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
   </form>
 </div>
@@ -309,7 +317,7 @@ Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>
 Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
 
 {% example html %}
-<form role="form">
+<form>
   <fieldset disabled>
     <div class="form-group">
       <label for="disabledTextInput">Disabled input</label>
@@ -333,7 +341,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 
 <div class="bs-callout bs-callout-warning">
   <h4>Caveat about link functionality of `&lt;a&gt;`</h4>
-  <p>Our styles use `pointer-events: none` to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, 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>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
 </div>
 
 <div class="bs-callout bs-callout-danger">
@@ -418,7 +426,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
 {% endexample %}
 
 {% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <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">
@@ -430,7 +438,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
 {% endexample %}
 
 {% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <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">
@@ -466,7 +474,7 @@ Set heights using classes like `.input-lg`, and set widths using grid column cla
 Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
 
 {% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group form-group-lg">
     <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
     <div class="col-sm-10">

docs/components/helpers.md

@@ -20,6 +20,10 @@ Convey meaning through color with a handful of emphasis utility classes. These m
   <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>
 
 ### Contextual backgrounds
 
@@ -38,6 +42,11 @@ Similar to the contextual text color classes, easily set the background of an el
   <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>
+
 ### Close icon
 
 Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.

docs/components/input-group.md

@@ -122,7 +122,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
   <div class="col-lg-6">
     <div class="input-group">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -138,7 +138,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -160,7 +160,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
     <div class="input-group">
       <div class="input-group-btn">
         <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
-        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
           <span class="sr-only">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -179,7 +179,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
       <input type="text" class="form-control">
       <div class="input-group-btn">
         <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
-        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
           <span class="sr-only">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">

docs/components/navbar.md

@@ -12,17 +12,18 @@ Here's what you need to know before getting started with the navbar:
 - Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
 - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
+- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
 ### Branding
 
 Name your company, product, or project with `.navbar-brand`.
 
 {% example html %}
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <h3 class="navbar-brand">
     <a href="#">Navbar</a>
   </h3>
-</div>
+</nav>
 {% endexample %}
 
 ### Navigation
@@ -30,10 +31,10 @@ Name your company, product, or project with `.navbar-brand`.
 Use `.nav-pills` within a navbar for basic navigation.
 
 {% example html %}
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <ul class="nav nav-pills">
     <li class="nav-item active">
-      <a class="nav-link" href="#">Home</a>
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Features</a>
@@ -45,7 +46,7 @@ Use `.nav-pills` within a navbar for basic navigation.
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-</div>
+</nav>
 {% endexample %}
 
 ### Inline forms
@@ -53,12 +54,12 @@ Use `.nav-pills` within a navbar for basic navigation.
 Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
 
 {% example html %}
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <form class="form-inline">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-primary" type="submit">Search</button>
   </form>
-</div>
+</nav>
 {% endexample %}
 
 ### Containers
@@ -66,22 +67,22 @@ Add an `.inline-form` within the navbar with nearly any combination of form cont
 Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control.
 
 {% example html %}
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <div class="container">
     <h3 class="navbar-brand">
       <a href="#">Navbar</a>
     </h3>
   </div>
-</div>
+</nav>
 {% endexample %}
 
 {% example html %}
 <div class="container">
-  <div class="navbar navbar-default">
+  <nav class="navbar navbar-default">
     <h3 class="navbar-brand">
       <a href="#">Navbar</a>
     </h3>
-  </div>
+  </nav>
 </div>
 {% endexample %}
 
@@ -90,13 +91,13 @@ Although it's not required, you can wrap a navbar in a `.container` or add one w
 Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
 
 {% example html %}
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <h3 class="navbar-brand pull-left">
     <a href="#">Navbar</a>
   </h3>
   <ul class="nav nav-pills pull-left">
     <li class="nav-item active">
-      <a class="nav-link" href="#">Home</a>
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Features</a>
@@ -116,7 +117,7 @@ Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
       <a class="nav-link" href="#">Sign out</a>
     </li>
   </ul>
-</div>
+</nav>
 {% endexample %}
 
 ### Inverse color scheme
@@ -124,13 +125,13 @@ Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
 Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
 
 {% example html %}
-<div class="navbar navbar-inverse">
+<nav class="navbar navbar-inverse">
   <h3 class="navbar-brand pull-left">
     <a href="#">Navbar</a>
   </h3>
   <ul class="nav nav-pills pull-left">
     <li class="nav-item active">
-      <a class="nav-link" href="#">Home</a>
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Features</a>
@@ -146,12 +147,12 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-primary" type="submit">Search</button>
   </form>
-</div>
+</nav>
 {% endexample %}
 
 ### Collapsible content
 
-Our collapse plugin allows you to use a `<button>` to toggle hidden content.
+Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
 {% example html %}
 <div class="collapse" id="navbar-header">
@@ -160,9 +161,9 @@ Our collapse plugin allows you to use a `<button>` to toggle hidden content.
     <p>Toggleable via the navbar brand.</p>
   </div>
 </div>
-<div class="navbar navbar-default">
+<nav class="navbar navbar-default">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
     &#9776;
   </button>
-</div>
+</nav>
 {% endexample %}

docs/components/navs.md

@@ -5,12 +5,16 @@ title: Navs
 
 Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
 
+## Regarding accessibility
+
+If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
+
 ## Base nav
 
 Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**.
 
 {% example html %}
-<ul class="nav" role="tablist">
+<ul class="nav">
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
@@ -29,7 +33,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
 Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element.
 
 {% example html %}
-<nav class="nav" role="tablist">
+<nav class="nav">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link" href="#">Another link</a>
@@ -39,10 +43,10 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 
 ## Tabs
 
-Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface.
+Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](../javascript/tabs).
 
 {% example html %}
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-tabs">
   <li class="nav-item active" role="presentation">
     <a href="#" class="nav-link">Active</a>
   </li>
@@ -58,17 +62,12 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 </ul>
 {% endexample %}
 
-<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>
-
 ## Pills
 
 Take that same HTML, but use `.nav-pills` instead:
 
 {% example html %}
-<ul class="nav nav-pills" role="tablist">
+<ul class="nav nav-pills">
   <li class="nav-item active" role="presentation">
     <a href="#" class="nav-link">Active</a>
   </li>
@@ -89,7 +88,7 @@ Take that same HTML, but use `.nav-pills` instead:
 Just add `.nav-stacked` to the `.nav.nav-pills`.
 
 {% example html %}
-<ul class="nav nav-pills nav-stacked" role="tablist">
+<ul class="nav nav-pills nav-stacked">
   <li class="nav-item active" role="presentation">
     <a href="#" class="nav-link">Active</a>
   </li>
@@ -112,12 +111,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 ### Tabs with dropdowns
 
 {% example html %}
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-tabs">
   <li class="nav-item active" role="presentation">
     <a href="#" class="nav-link">Active</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
+    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
     <ul class="dropdown-menu" role="menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
@@ -138,12 +137,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 ### Pills with dropdowns
 
 {% example html %}
-<ul class="nav nav-pills" role="tablist">
+<ul class="nav nav-pills">
   <li class="nav-item active" role="presentation">
     <a href="#" class="nav-link">Active</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
+    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
     <ul class="dropdown-menu" role="menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>

docs/components/pagination.md

@@ -12,13 +12,23 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 {% example html %}
 <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>
 </nav>
 {% endexample %}
@@ -30,25 +40,41 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 {% example html %}
 <nav>
   <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 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="#">&raquo;</a></li>
+    <li>
+      <a href="#">
+        <span aria-hidden="true">&raquo;</span>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
   </ul>
 </nav>
 {% endexample %}
 
-You can optionally swap out active or disabled anchors for `<span>` to remove click functionality while retaining intended styles.
+You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.
 
 {% highlight html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled"><span>&laquo;</span></li>
+    <li class="disabled">
+      <span>
+        <span aria-hidden="true">&laquo;</span>
+        <span class="sr-only">Previous</span>
+      </span>
+    </li>
     <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
-    ...
   </ul>
 </nav>
 {% endhighlight %}
@@ -61,11 +87,21 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <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="#">&raquo;</a></li>
+    <li>
+      <a href="#">
+        <span aria-hidden="true">&raquo;</span>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
   </ul>
 </nav>
 {% endexample %}
@@ -73,11 +109,21 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <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="#">&raquo;</a></li>
+    <li>
+      <a href="#">
+        <span aria-hidden="true">&raquo;</span>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
   </ul>
 </nav>
 {% endexample %}
@@ -106,8 +152,8 @@ Alternatively, you can align each link to the sides:
 {% example html %}
 <nav>
   <ul class="pager">
-    <li class="previous"><a href="#">&larr; Older</a></li>
-    <li class="next"><a href="#">Newer &rarr;</a></li>
+    <li class="previous"><a href="#">Older</a></li>
+    <li class="next"><a href="#">Newer</a></li>
   </ul>
 </nav>
 {% endexample %}
@@ -120,8 +166,8 @@ Pager links also use the `.disabled` class.
 {% highlight html %}
 <nav>
   <ul class="pager">
-    <li class="previous disabled"><a href="#">&larr; Older</a></li>
-    <li class="next"><a href="#">Newer &rarr;</a></li>
+    <li class="previous disabled"><a href="#">Older</a></li>
+    <li class="next"><a href="#">Newer</a></li>
   </ul>
 </nav>
 {% endhighlight %}

docs/components/tables.md

@@ -19,19 +19,19 @@ Due to the widespread use of tables across plugins like calendars and date picke
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
@@ -54,19 +54,19 @@ Due to the widespread use of tables across plugins like calendars and date picke
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
@@ -91,19 +91,19 @@ Use one of two modifier classes to make `<thead>`s appear light or dark gray.
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
@@ -119,19 +119,19 @@ Use one of two modifier classes to make `<thead>`s appear light or dark gray.
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
@@ -156,19 +156,19 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
@@ -193,7 +193,7 @@ Add `.table-bordered` for borders on all sides of the table and cells.
   </thead>
   <tbody>
     <tr>
-      <td rowspan="2">1</td>
+      <th scope="rowspan" rowspan="2">1</tg>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
@@ -204,13 +204,13 @@ Add `.table-bordered` for borders on all sides of the table and cells.
       <td>@TwBootstrap</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td colspan="2">Larry the Bird</td>
       <td>@twitter</td>
     </tr>
@@ -234,19 +234,19 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td colspan="2">Larry the Bird</td>
       <td>@twitter</td>
     </tr>
@@ -270,19 +270,19 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td colspan="2">Larry the Bird</td>
       <td>@twitter</td>
     </tr>
@@ -308,33 +308,33 @@ Use contextual classes to color table rows or individual cells.
     </thead>
     <tbody>
       <tr>
-        <td>
+        <th scope="rowspan">
           <code>.active</code>
-        </td>
+        </th>
         <td>Applies the hover color to a particular row or cell</td>
       </tr>
       <tr>
-        <td>
+        <th scope="rowspan">
           <code>.success</code>
-        </td>
+        </th>
         <td>Indicates a successful or positive action</td>
       </tr>
       <tr>
-        <td>
+        <th scope="rowspan">
           <code>.info</code>
-        </td>
+        </th>
         <td>Indicates a neutral informative change or action</td>
       </tr>
       <tr>
-        <td>
+        <th scope="rowspan">
           <code>.warning</code>
-        </td>
+        </th>
         <td>Indicates a warning that might need attention</td>
       </tr>
       <tr>
-        <td>
+        <th scope="rowspan">
           <code>.danger</code>
-        </td>
+        </th>
         <td>Indicates a dangerous or potentially negative action</td>
       </tr>
     </tbody>
@@ -353,55 +353,55 @@ Use contextual classes to color table rows or individual cells.
     </thead>
     <tbody>
       <tr class="active">
-        <td>1</td>
+        <th scope="rowspan">1</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <td>2</td>
+        <th scope="rowspan">2</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="success">
-        <td>3</td>
+        <th scope="rowspan">3</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <td>4</td>
+        <th scope="rowspan">4</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="info">
-        <td>5</td>
+        <th scope="rowspan">5</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <td>6</td>
+        <th scope="rowspan">6</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="warning">
-        <td>7</td>
+        <th scope="rowspan">7</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <td>8</td>
+        <th scope="rowspan">8</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="danger">
-        <td>9</td>
+        <th scope="rowspan">9</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
@@ -459,7 +459,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
       </thead>
       <tbody>
         <tr>
-          <td>1</td>
+          <th scope="rowspan">1</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -468,7 +468,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
           <td>Table cell</td>
         </tr>
         <tr>
-          <td>2</td>
+          <th scope="rowspan">2</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -477,7 +477,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
           <td>Table cell</td>
         </tr>
         <tr>
-          <td>3</td>
+          <th scope="rowspan">3</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -504,7 +504,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
       </thead>
       <tbody>
         <tr>
-          <td>1</td>
+          <th scope="rowspan">1</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -513,7 +513,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
           <td>Table cell</td>
         </tr>
         <tr>
-          <td>2</td>
+          <th scope="rowspan">2</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -522,7 +522,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
           <td>Table cell</td>
         </tr>
         <tr>
-          <td>3</td>
+          <th scope="rowspan">3</th>
           <td>Table cell</td>
           <td>Table cell</td>
           <td>Table cell</td>
@@ -561,7 +561,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
   </thead>
   <tbody>
     <tr>
-      <td>1</td>
+      <th scope="rowspan">1</th>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
@@ -570,7 +570,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
       <td>Table cell</td>
     </tr>
     <tr>
-      <td>2</td>
+      <th scope="rowspan">2</th>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
@@ -579,7 +579,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
       <td>Table cell</td>
     </tr>
     <tr>
-      <td>3</td>
+      <th scope="rowspan">3</th>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>

docs/customize.html

@@ -35,7 +35,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
   </div>
 </div><!-- /import -->
 
-<form class="bs-customizer" role="form">
+<form class="bs-customizer">
   <div class="bs-docs-section" id="less-section">
     <button class="btn btn-secondary toggle" type="button">Toggle all</button>
     <h1 id="less" class="page-header">Less files</h1>

docs/dist/js/bootstrap.js

 /*!
- * Bootstrap v3.3.0 (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)
  */
@@ -16,7 +16,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: transition.js v3.3.0
+ * Bootstrap: transition.js v3.3.1
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -76,7 +76,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: alert.js v3.3.0
+ * Bootstrap: alert.js v3.3.1
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
     $(el).on('click', dismiss, this.close)
   }
 
-  Alert.VERSION = '3.3.0'
+  Alert.VERSION = '3.3.1'
 
   Alert.TRANSITION_DURATION = 150
 
@@ -171,7 +171,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: button.js v3.3.0
+ * Bootstrap: button.js v3.3.1
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -191,7 +191,7 @@ if (typeof jQuery === 'undefined') {
     this.isLoading = false
   }
 
-  Button.VERSION  = '3.3.0'
+  Button.VERSION  = '3.3.1'
 
   Button.DEFAULTS = {
     loadingText: 'loading...'
@@ -288,7 +288,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: carousel.js v3.3.0
+ * Bootstrap: carousel.js v3.3.1
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -319,7 +319,7 @@ if (typeof jQuery === 'undefined') {
       .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
   }
 
-  Carousel.VERSION  = '3.3.0'
+  Carousel.VERSION  = '3.3.1'
 
   Carousel.TRANSITION_DURATION = 600
 
@@ -359,8 +359,11 @@ if (typeof jQuery === 'undefined') {
   }
 
   Carousel.prototype.getItemForDirection = function (direction, active) {
-    var delta = direction == 'prev' ? -1 : 1
     var activeIndex = this.getItemIndex(active)
+    var willWrap = (direction == 'prev' && activeIndex === 0)
+                || (direction == 'next' && activeIndex == (this.$items.length - 1))
+    if (willWrap && !this.options.wrap) return active
+    var delta = direction == 'prev' ? -1 : 1
     var itemIndex = (activeIndex + delta) % this.$items.length
     return this.$items.eq(itemIndex)
   }
@@ -405,14 +408,8 @@ if (typeof jQuery === 'undefined') {
     var $next     = next || this.getItemForDirection(type, $active)
     var isCycling = this.interval
     var direction = type == 'next' ? 'left' : 'right'
-    var fallback  = type == 'next' ? 'first' : 'last'
     var that      = this
 
-    if (!$next.length) {
-      if (!this.options.wrap) return
-      $next = this.$element.find('.item')[fallback]()
-    }
-
     if ($next.hasClass('active')) return (this.sliding = false)
 
     var relatedTarget = $next[0]
@@ -529,7 +526,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: collapse.js v3.3.0
+ * Bootstrap: collapse.js v3.3.1
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -558,7 +555,7 @@ if (typeof jQuery === 'undefined') {
     if (this.options.toggle) this.toggle()
   }
 
-  Collapse.VERSION  = '3.3.0'
+  Collapse.VERSION  = '3.3.1'
 
   Collapse.TRANSITION_DURATION = 350
 
@@ -576,7 +573,7 @@ if (typeof jQuery === 'undefined') {
     if (this.transitioning || this.$element.hasClass('in')) return
 
     var activesData
-    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
+    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
 
     if (actives && actives.length) {
       activesData = actives.data('bs.collapse')
@@ -741,7 +738,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: dropdown.js v3.3.0
+ * Bootstrap: dropdown.js v3.3.1
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -761,7 +758,7 @@ if (typeof jQuery === 'undefined') {
     $(element).on('click.bs.dropdown', this.toggle)
   }
 
-  Dropdown.VERSION = '3.3.0'
+  Dropdown.VERSION = '3.3.1'
 
   Dropdown.prototype.toggle = function (e) {
     var $this = $(this)
@@ -797,7 +794,7 @@ if (typeof jQuery === 'undefined') {
   }
 
   Dropdown.prototype.keydown = function (e) {
-    if (!/(38|40|27|32)/.test(e.which)) return
+    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
 
     var $this = $(this)
 
@@ -903,7 +900,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: modal.js v3.3.0
+ * Bootstrap: modal.js v3.3.1
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -934,7 +931,7 @@ if (typeof jQuery === 'undefined') {
     }
   }
 
-  Modal.VERSION  = '3.3.0'
+  Modal.VERSION  = '3.3.1'
 
   Modal.TRANSITION_DURATION = 300
   Modal.BACKDROP_TRANSITION_DURATION = 150
@@ -1228,7 +1225,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tooltip.js v3.3.0
+ * Bootstrap: tooltip.js v3.3.1
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
@@ -1254,7 +1251,7 @@ if (typeof jQuery === 'undefined') {
     this.init('tooltip', element, options)
   }
 
-  Tooltip.VERSION  = '3.3.0'
+  Tooltip.VERSION  = '3.3.1'
 
   Tooltip.TRANSITION_DURATION = 150
 
@@ -1707,7 +1704,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: popover.js v3.3.0
+ * Bootstrap: popover.js v3.3.1
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1727,7 +1724,7 @@ if (typeof jQuery === 'undefined') {
 
   if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
 
-  Popover.VERSION  = '3.3.0'
+  Popover.VERSION  = '3.3.1'
 
   Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right',
@@ -1827,7 +1824,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: scrollspy.js v3.3.0
+ * Bootstrap: scrollspy.js v3.3.1
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -1858,7 +1855,7 @@ if (typeof jQuery === 'undefined') {
     this.process()
   }
 
-  ScrollSpy.VERSION  = '3.3.0'
+  ScrollSpy.VERSION  = '3.3.1'
 
   ScrollSpy.DEFAULTS = {
     offset: 10
@@ -2003,7 +2000,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: tab.js v3.3.0
+ * Bootstrap: tab.js v3.3.1
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -2021,7 +2018,7 @@ if (typeof jQuery === 'undefined') {
     this.element = $(element)
   }
 
-  Tab.VERSION = '3.3.0'
+  Tab.VERSION = '3.3.1'
 
   Tab.TRANSITION_DURATION = 150
 
@@ -2157,7 +2154,7 @@ if (typeof jQuery === 'undefined') {
 }(jQuery);
 
 /* ========================================================================
- * Bootstrap: affix.js v3.3.0
+ * Bootstrap: affix.js v3.3.1
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -2186,7 +2183,7 @@ if (typeof jQuery === 'undefined') {
     this.checkPosition()
   }
 
-  Affix.VERSION  = '3.3.0'
+  Affix.VERSION  = '3.3.1'
 
   Affix.RESET    = 'affix affix-top affix-bottom'
 
@@ -2211,7 +2208,7 @@ if (typeof jQuery === 'undefined') {
     var colliderTop    = initializing ? scrollTop : position.top
     var colliderHeight = initializing ? targetHeight : height
 
-    if (offsetTop != null && colliderTop <= offsetTop) return 'top'
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top'
     if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
 
     return false

docs/examples/carousel/index.html

@@ -25,7 +25,7 @@
     <div class="navbar-wrapper">
       <div class="container">
 
-        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+        <nav class="navbar navbar-inverse navbar-static-top">
           <div class="container">
             <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -42,7 +42,7 @@
                 <li><a href="#about">About</a></li>
                 <li><a href="#contact">Contact</a></li>
                 <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
@@ -104,11 +104,11 @@
         </div>
       </div>
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
-        <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
     </div><!-- /.carousel -->

docs/examples/cover/index.html

@@ -31,11 +31,13 @@
           <div class="masthead clearfix">
             <div class="inner">
               <h3 class="masthead-brand">Cover</h3>
-              <ul class="nav masthead-nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Features</a></li>
-                <li><a href="#">Contact</a></li>
-              </ul>
+              <nav>
+                <ul class="nav masthead-nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li><a href="#">Features</a></li>
+                  <li><a href="#">Contact</a></li>
+                </ul>
+              </nav>
             </div>
           </div>
 

docs/examples/dashboard/index.html

@@ -22,7 +22,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -51,7 +51,7 @@
       <div class="row">
         <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
-            <li class="active"><a href="#">Overview</a></li>
+            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Reports</a></li>
             <li><a href="#">Analytics</a></li>
             <li><a href="#">Export</a></li>

docs/examples/jumbotron-narrow/index.html

@@ -24,11 +24,13 @@
 
     <div class="container">
       <div class="header">
-        <ul class="nav nav-pills pull-right" role="tablist">
-          <li role="presentation" class="active"><a href="#">Home</a></li>
-          <li role="presentation"><a href="#">About</a></li>
-          <li role="presentation"><a href="#">Contact</a></li>
-        </ul>
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation" class="active"><a href="#">Home</a></li>
+            <li role="presentation"><a href="#">About</a></li>
+            <li role="presentation"><a href="#">Contact</a></li>
+          </ul>
+        </nav>
         <h3 class="text-muted">Project name</h3>
       </div>
 

docs/examples/jumbotron/index.html

@@ -22,7 +22,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -34,7 +34,7 @@
           <a class="navbar-brand" href="#">Project name</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
-          <form class="navbar-form navbar-right" role="form">
+          <form class="navbar-form navbar-right">
             <div class="form-group">
               <input type="text" placeholder="Email" class="form-control">
             </div>

docs/examples/justified-nav/index.html

@@ -26,14 +26,16 @@
 
       <div class="masthead">
         <h3 class="text-muted">Project name</h3>
-        <ul class="nav nav-justified">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Projects</a></li>
-          <li><a href="#">Services</a></li>
-          <li><a href="#">Downloads</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
+        <nav>
+          <ul class="nav nav-justified">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Projects</a></li>
+            <li><a href="#">Services</a></li>
+            <li><a href="#">Downloads</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
       </div>
 
       <!-- Jumbotron -->

docs/examples/offcanvas/index.html

@@ -21,7 +21,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+    <nav class="navbar navbar-fixed-top navbar-inverse">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -88,7 +88,7 @@
           </div><!--/row-->
         </div><!--/span-->
 
-        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
           <div class="list-group">
             <a href="#" class="list-group-item active">Link</a>
             <a href="#" class="list-group-item">Link</a>

docs/examples/signin/index.html

@@ -24,10 +24,12 @@
 
     <div class="container">
 
-      <form class="form-signin" role="form">
+      <form class="form-signin">
         <h2 class="form-signin-heading">Please sign in</h2>
-        <input type="email" class="form-control" placeholder="Email address" required autofocus>
-        <input type="password" class="form-control" placeholder="Password" required>
+        <label for="inputEmail" class="sr-only">Email address</label>
+        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+        <label for="inputPassword" class="sr-only">Password</label>
+        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
         <div class="checkbox">
           <label>
             <input type="checkbox" value="remember-me"> Remember me

docs/examples/starter-template/index.html

@@ -22,7 +22,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

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

@@ -23,7 +23,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -40,7 +40,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>

docs/getting-started/community.md

@@ -6,7 +6,7 @@ title: Community
 Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
 
 - Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com/).
-- Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/#twitter-bootstrap).
+- Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap).
 - For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
 - Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com).
 

docs/getting-started/contents.md

@@ -20,13 +20,14 @@ Once downloaded, unzip the compressed folder to see the structure of (the compil
 bootstrap/
 ├── css/
 │   ├── bootstrap.css
+│   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
 └── js/
     ├── bootstrap.js
     └── bootstrap.min.js
 {% endhighlight %}
 
-This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (1bootstrap.min.*1).
+This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
 
 ### Bootstrap source code
 

docs/getting-started/download.md

@@ -19,7 +19,7 @@ Source Less, JavaScript, and documentation. **Requires a Less compiler and [some
 
 ### Bower
 
-Install and manage Bootstrap's Less, CSS, and JavaScript using [Bower](http://bower.io).
+You can also install and manage Bootstrap's Less, CSS, and JavaScript using [Bower](http://bower.io).
 
 {% highlight bash %}$ bower install bootstrap{% endhighlight %}
 

docs/getting-started/support.md

@@ -23,7 +23,7 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
     </thead>
     <tbody>
       <tr>
-        <th>Android</th>
+        <th scope="row">Android</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
@@ -31,21 +31,21 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
         <td class="text-muted">N/A</td>
       </tr>
       <tr>
-        <th>iOS</th>
+        <th scope="row">iOS</th>
         <td class="text-success">Supported</td>
         <td class="text-muted">N/A</td>
         <td class="text-danger">Not supported</td>
         <td class="text-success">Supported</td>
       </tr>
       <tr>
-        <th>Mac OS X</th>
+        <th scope="row">Mac OS X</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
       </tr>
       <tr>
-        <th>Windows</th>
+        <th scope="row">Windows</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
@@ -164,8 +164,6 @@ The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for
 - Add `.pull-right` to your last grid column to get the hard-right alignment
 - Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)
 
-We'll keep an eye on this though and update our code if we have an easy solution.
-
 ### Modals, navbars, and virtual keyboards
 
 #### Overflow and scrolling
@@ -178,7 +176,7 @@ Also, note that if you're using a fixed navbar or using inputs within a modal, i
 
 #### Navbar Dropdowns
 
-The `.dropdown-backdrop` 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).
+The `.dropdown-backdrop` 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](https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)).
 
 ### Browser zooming
 
@@ -228,4 +226,4 @@ In order to provide the best possible experience to old and buggy browsers, Boot
 
 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.
 
-Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of [X-UA-Compatible `<meta>` tags](#ie-compatibility-modes) to avoid Internet Explorer issues and our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
+Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).

docs/javascript/alerts.md

@@ -17,6 +17,8 @@ Add dismiss functionality to all alert messages with this plugin.
 </div>
 {% endexample %}
 
+When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup.
+
 {% example html %}
 <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>

docs/javascript/carousel.md

@@ -26,11 +26,11 @@ A slideshow component for cycling through elements—images or slides of text—
     </div>
   </div>
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
-    <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="icon-prev" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="icon-next" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>
@@ -41,6 +41,11 @@ A slideshow component for cycling through elements—images or slides of text—
   <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>
+
 ### Optional captions
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
@@ -76,11 +81,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       </div>
     </div>
     <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
-      <span class="glyphicon glyphicon-chevron-left"></span>
+      <span class="icon-prev" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
-      <span class="glyphicon glyphicon-chevron-right"></span>
+      <span class="icon-next" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>

docs/javascript/collapse.md

@@ -3,16 +3,42 @@ layout: page
 title: Collapse
 ---
 
-Get base styles and flexible support for collapsible components like accordions and navigation.
+Flexible plugin that utilizes a handful of classes for easy toggle behavior.
 
 <div class="bs-callout bs-callout-danger">
   <h4>Plugin dependency</h4>
   <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
 </div>
 
-## Example accordion
+## Example
 
-Using the collapse plugin, we built a simple accordion by extending the panel component.
+Click the buttons below to show and hide another element via class changes:
+
+- `.collapse` hides content
+- `.collapsing` is applied during transitions
+- `.collapse.in` shows content
+
+You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
+
+{% example html %}
+  <p>
+    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Link with href
+    </a>
+    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Button with data-target
+    </button>
+  </p>
+  <div class="collapse" id="collapseExample">
+    <div class="well">
+      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+    </div>
+  </div>
+{% endexample %}
+
+## Accoridion example
+
+Extend the default collapse behavior to create an accordion with the panel component.
 
 {% example html %}
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

docs/javascript/dropdowns.md

@@ -8,7 +8,7 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
 ### Within navbars
 
 <div class="bs-example">
-  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+  <nav id="navbar-example" class="navbar navbar-default navbar-static">
     <div class="container-fluid">
       <div class="navbar-header">
         <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
@@ -173,7 +173,7 @@ Toggles the dropdown menu of a given navbar or tabbed navigation.
 
 ### Events
 
-All dropdown events are fired at the `.dropdown-menu`'s parent element.
+All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
 
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
@@ -186,19 +186,19 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element.
     <tbody>
       <tr>
         <td>show.bs.dropdown</td>
-        <td>This event fires immediately when the show instance method is called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event fires immediately when the show instance method is called.</td>
       </tr>
       <tr>
         <td>shown.bs.dropdown</td>
-        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).  The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
       </tr>
       <tr>
         <td>hide.bs.dropdown</td>
-        <td>This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired immediately when the hide instance method has been called.</td>
       </tr>
       <tr>
         <td>hidden.bs.dropdown</td>
-        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
       </tr>
     </tbody>
   </table>

docs/javascript/modal.md

@@ -5,7 +5,13 @@ title: Modal
 
 Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
 
-**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.**
+**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript:
+
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+  $('#myInput').focus()
+})
+{% endhighlight %}
 
 <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
   <h4>Overlapping modals not supported</h4>
@@ -241,7 +247,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
           <h4 class="modal-title" id="exampleModalLabel">New message</h4>
         </div>
         <div class="modal-body">
-          <form role="form">
+          <form>
             <div class="form-group">
               <label for="recipient-name" class="control-label">Recipient:</label>
               <input type="text" class="form-control" id="recipient-name">
@@ -274,7 +280,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
       </div>
       <div class="modal-body">
-        <form role="form">
+        <form>
           <div class="form-group">
             <label for="recipient-name" class="control-label">Recipient:</label>
             <input type="text" class="form-control" id="recipient-name">

docs/javascript/overview.md

@@ -38,6 +38,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
 $(document).off('.alert.data-api')
 {% endhighlight %}
 
+<div class="bs-callout bs-callout-danger">
+  <h4>Only one plugin per element via data attributes</h4>
+  <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p>
+</div>
+
 ### Programmatic API
 
 We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

docs/javascript/tabs.md

@@ -8,7 +8,7 @@ title: Tabs
 Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
 
 <div class="bs-example bs-example-tabs">
-  <ul id="myTab" class="nav nav-tabs" role="tablist">
+  <ul id="myTab" class="nav nav-tabs" role="tabpanel">
     <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>
@@ -71,6 +71,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 
 You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
 
+<div role="tabpanel">
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
@@ -88,6 +89,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
   <div role="tabpanel" class="tab-pane" id="settings">...</div>
 </div>
 {% endhighlight %}
+</div>
 
 ### Fade effect
 
@@ -110,10 +112,18 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
-  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
-  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
-  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
+  <li role="presentation" class="active">
+    <a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
+  </li>
+  <li role="presentation">
+    <a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
+  </li>
+  <li role="presentation">
+    <a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
+  </li>
+  <li role="presentation">
+    <a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
+  </li>
 </ul>
 
 <div class="tab-content">

docs/layout/grid.md

@@ -77,49 +77,49 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
     </thead>
     <tbody>
       <tr>
-        <th class="text-nowrap">Grid behavior</th>
+        <th class="text-nowrap" scope="row">Grid behavior</th>
         <td>Horizontal at all times</td>
         <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Container width</th>
+        <th class="text-nowrap" scope="row">Container width</th>
         <td>None (auto)</td>
         <td>750px</td>
         <td>970px</td>
         <td>1170px</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Class prefix</th>
+        <th class="text-nowrap" scope="row">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 class="text-nowrap"># of columns</th>
+        <th class="text-nowrap" scope="row"># of columns</th>
         <td colspan="4">12</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Column width</th>
+        <th class="text-nowrap" scope="row">Column width</th>
         <td class="text-muted">Auto</td>
         <td>~62px</td>
         <td>~81px</td>
         <td>~97px</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Gutter width</th>
+        <th class="text-nowrap" scope="row">Gutter width</th>
         <td colspan="4">30px (15px on each side of a column)</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Nestable</th>
+        <th class="text-nowrap" scope="row">Nestable</th>
         <td colspan="4">Yes</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Offsets</th>
+        <th class="text-nowrap" scope="row">Offsets</th>
         <td colspan="4">Yes</td>
       </tr>
       <tr>
-        <th class="text-nowrap">Column ordering</th>
+        <th class="text-nowrap" scope="row">Column ordering</th>
         <td colspan="4">Yes</td>
       </tr>
     </tbody>
@@ -293,7 +293,7 @@ Don't want your columns to simply stack in smaller devices? Use the extra small
 </div>
 {% endexample %}
 
-### Example: Mobile, tablet, desktops
+### Example: Mobile, tablet, desktop
 
 Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.
 

docs/layout/media.md

@@ -27,9 +27,11 @@ Media components can also be nested.
 
 {% example html %}
 <div class="media">
-  <a class="media-left" href="#">
-    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-  </a>
+  <div class="media-left">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+    </a>
+  </div>
   <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.
@@ -52,9 +54,11 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 {% example html %}
 <div class="media">
-  <a class="media-left" href="#">
-    <img data-src="holder.js/64x64" alt="Generic placeholder image">
-  </a>
+  <div class="media-left">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+    </a>
+  </div>
   <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>
@@ -65,9 +69,11 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 {% example html %}
 <div class="media">
-  <a class="media-left media-middle" href="#">
-    <img data-src="holder.js/64x64" alt="Generic placeholder image">
-  </a>
+  <div class="media-left media-middle">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+    </a>
+  </div>
   <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>
@@ -78,9 +84,11 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 {% example html %}
 <div class="media">
-  <a class="media-left media-bottom" href="#">
-    <img data-src="holder.js/64x64" alt="Generic placeholder image">
-  </a>
+  <div class="media-left media-bottom">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+    </a>
+  </div>
   <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>
@@ -96,9 +104,11 @@ With a bit of extra markup, you can use media inside list (useful for comment th
 {% example html %}
 <ul class="media-list">
   <li class="media">
-    <a class="media-left" href="#">
-      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-    </a>
+    <div class="media-left">
+      <a href="#">
+        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+    </div>
     <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>
@@ -112,9 +122,11 @@ With a bit of extra markup, you can use media inside list (useful for comment th
           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="media-left" href="#">
-              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-            </a>
+            <div class="media-left">
+              <a href="#">
+                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+              </a>
+            </div>
             <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.
@@ -124,9 +136,11 @@ With a bit of extra markup, you can use media inside list (useful for comment th
       </div>
       <!-- Nested media object -->
       <div class="media">
-        <a class="media-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-        </a>
+        <div class="media-left">
+          <a href="#">
+            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+          </a>
+        </div>
         <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.
@@ -135,9 +149,11 @@ With a bit of extra markup, you can use media inside list (useful for comment th
     </div>
   </li>
   <li class="media">
-    <a class="media-right" href="#">
-      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
-    </a>
+    <div class="media-right">
+      <a href="#">
+        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+      </a>
+    </div>
     <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.

docs/layout/responsive-utilities.md

@@ -36,28 +36,28 @@ Use a single or combination of the available classes for toggling content across
     </thead>
     <tbody>
       <tr>
-        <th><code>.visible-xs-*</code></th>
+        <th scope="rowspan"><code>.visible-xs-*</code></th>
         <td class="is-visible">Visible</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
       </tr>
       <tr>
-        <th><code>.visible-sm-*</code></th>
+        <th scope="rowspan"><code>.visible-sm-*</code></th>
         <td class="is-hidden">Hidden</td>
         <td class="is-visible">Visible</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
       </tr>
       <tr>
-        <th><code>.visible-md-*</code></th>
+        <th scope="rowspan"><code>.visible-md-*</code></th>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-visible">Visible</td>
         <td class="is-hidden">Hidden</td>
       </tr>
       <tr>
-        <th><code>.visible-lg-*</code></th>
+        <th scope="rowspan"><code>.visible-lg-*</code></th>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-hidden">Hidden</td>
@@ -66,28 +66,28 @@ Use a single or combination of the available classes for toggling content across
     </tbody>
     <tbody>
       <tr>
-        <th><code>.hidden-xs</code></th>
+        <th scope="rowspan"><code>.hidden-xs</code></th>
         <td class="is-hidden">Hidden</td>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>
       </tr>
       <tr>
-        <th><code>.hidden-sm</code></th>
+        <th scope="rowspan"><code>.hidden-sm</code></th>
         <td class="is-visible">Visible</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>
       </tr>
       <tr>
-        <th><code>.hidden-md</code></th>
+        <th scope="rowspan"><code>.hidden-md</code></th>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>
         <td class="is-hidden">Hidden</td>
         <td class="is-visible">Visible</td>
       </tr>
       <tr>
-        <th><code>.hidden-lg</code></th>
+        <th scope="rowspan"><code>.hidden-lg</code></th>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>
         <td class="is-visible">Visible</td>

grunt/sauce_browsers.yml

@@ -3,15 +3,15 @@
 
   {
     browserName: "safari",
-    platform: "OS X 10.9"
+    platform: "OS X 10.10"
   },
   {
     browserName: "chrome",
-    platform: "OS X 10.9"
+    platform: "OS X 10.10"
   },
   {
     browserName: "firefox",
-    platform: "OS X 10.9"
+    platform: "OS X 10.10"
   },
 
   # Mac Opera not currently supported by Sauce Labs
@@ -57,7 +57,7 @@
   {
     browserName: "iphone",
     platform: "OS X 10.9",
-    version: "8.0"
+    version: "8.1"
   },
 
   # iOS Chrome not currently supported by Sauce Labs

js/affix.js

 /* ========================================================================
- * Bootstrap: affix.js v3.3.0
+ * Bootstrap: affix.js v3.3.1
  * http://getbootstrap.com/javascript/#affix
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -28,7 +28,7 @@
     this.checkPosition()
   }
 
-  Affix.VERSION  = '3.3.0'
+  Affix.VERSION  = '3.3.1'
 
   Affix.RESET    = 'affix affix-top affix-bottom'
 
@@ -53,7 +53,7 @@
     var colliderTop    = initializing ? scrollTop : position.top
     var colliderHeight = initializing ? targetHeight : height
 
-    if (offsetTop != null && colliderTop <= offsetTop) return 'top'
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top'
     if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
 
     return false

js/alert.js

 /* ========================================================================
- * Bootstrap: alert.js v3.3.0
+ * Bootstrap: alert.js v3.3.1
  * http://getbootstrap.com/javascript/#alerts
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -18,7 +18,7 @@
     $(el).on('click', dismiss, this.close)
   }
 
-  Alert.VERSION = '3.3.0'
+  Alert.VERSION = '3.3.1'
 
   Alert.TRANSITION_DURATION = 150
 

js/button.js

 /* ========================================================================
- * Bootstrap: button.js v3.3.0
+ * Bootstrap: button.js v3.3.1
  * http://getbootstrap.com/javascript/#buttons
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -19,7 +19,7 @@
     this.isLoading = false
   }
 
-  Button.VERSION  = '3.3.0'
+  Button.VERSION  = '3.3.1'
 
   Button.DEFAULTS = {
     loadingText: 'loading...'

js/carousel.js

 /* ========================================================================
- * Bootstrap: carousel.js v3.3.0
+ * Bootstrap: carousel.js v3.3.1
  * http://getbootstrap.com/javascript/#carousel
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -30,7 +30,7 @@
       .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
   }
 
-  Carousel.VERSION  = '3.3.0'
+  Carousel.VERSION  = '3.3.1'
 
   Carousel.TRANSITION_DURATION = 600
 
@@ -70,8 +70,11 @@
   }
 
   Carousel.prototype.getItemForDirection = function (direction, active) {
-    var delta = direction == 'prev' ? -1 : 1
     var activeIndex = this.getItemIndex(active)
+    var willWrap = (direction == 'prev' && activeIndex === 0)
+                || (direction == 'next' && activeIndex == (this.$items.length - 1))
+    if (willWrap && !this.options.wrap) return active
+    var delta = direction == 'prev' ? -1 : 1
     var itemIndex = (activeIndex + delta) % this.$items.length
     return this.$items.eq(itemIndex)
   }
@@ -116,14 +119,8 @@
     var $next     = next || this.getItemForDirection(type, $active)
     var isCycling = this.interval
     var direction = type == 'next' ? 'left' : 'right'
-    var fallback  = type == 'next' ? 'first' : 'last'
     var that      = this
 
-    if (!$next.length) {
-      if (!this.options.wrap) return
-      $next = this.$element.find('.item')[fallback]()
-    }
-
     if ($next.hasClass('active')) return (this.sliding = false)
 
     var relatedTarget = $next[0]

js/collapse.js

 /* ========================================================================
- * Bootstrap: collapse.js v3.3.0
+ * Bootstrap: collapse.js v3.3.1
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -28,7 +28,7 @@
     if (this.options.toggle) this.toggle()
   }
 
-  Collapse.VERSION  = '3.3.0'
+  Collapse.VERSION  = '3.3.1'
 
   Collapse.TRANSITION_DURATION = 350
 
@@ -46,7 +46,7 @@
     if (this.transitioning || this.$element.hasClass('in')) return
 
     var activesData
-    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
+    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
 
     if (actives && actives.length) {
       activesData = actives.data('bs.collapse')

js/dropdown.js

 /* ========================================================================
- * Bootstrap: dropdown.js v3.3.0
+ * Bootstrap: dropdown.js v3.3.1
  * http://getbootstrap.com/javascript/#dropdowns
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -19,7 +19,7 @@
     $(element).on('click.bs.dropdown', this.toggle)
   }
 
-  Dropdown.VERSION = '3.3.0'
+  Dropdown.VERSION = '3.3.1'
 
   Dropdown.prototype.toggle = function (e) {
     var $this = $(this)
@@ -55,7 +55,7 @@
   }
 
   Dropdown.prototype.keydown = function (e) {
-    if (!/(38|40|27|32)/.test(e.which)) return
+    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
 
     var $this = $(this)
 

js/modal.js

 /* ========================================================================
- * Bootstrap: modal.js v3.3.0
+ * Bootstrap: modal.js v3.3.1
  * http://getbootstrap.com/javascript/#modals
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -30,7 +30,7 @@
     }
   }
 
-  Modal.VERSION  = '3.3.0'
+  Modal.VERSION  = '3.3.1'
 
   Modal.TRANSITION_DURATION = 300
   Modal.BACKDROP_TRANSITION_DURATION = 150

js/popover.js

 /* ========================================================================
- * Bootstrap: popover.js v3.3.0
+ * Bootstrap: popover.js v3.3.1
  * http://getbootstrap.com/javascript/#popovers
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -19,7 +19,7 @@
 
   if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
 
-  Popover.VERSION  = '3.3.0'
+  Popover.VERSION  = '3.3.1'
 
   Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right',

js/scrollspy.js

 /* ========================================================================
- * Bootstrap: scrollspy.js v3.3.0
+ * Bootstrap: scrollspy.js v3.3.1
  * http://getbootstrap.com/javascript/#scrollspy
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -30,7 +30,7 @@
     this.process()
   }
 
-  ScrollSpy.VERSION  = '3.3.0'
+  ScrollSpy.VERSION  = '3.3.1'
 
   ScrollSpy.DEFAULTS = {
     offset: 10

js/tab.js

 /* ========================================================================
- * Bootstrap: tab.js v3.3.0
+ * Bootstrap: tab.js v3.3.1
  * http://getbootstrap.com/javascript/#tabs
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.
@@ -17,7 +17,7 @@
     this.element = $(element)
   }
 
-  Tab.VERSION = '3.3.0'
+  Tab.VERSION = '3.3.1'
 
   Tab.TRANSITION_DURATION = 150
 

js/tests/unit/affix.js

@@ -68,4 +68,34 @@ $(function () {
       }, 16) // for testing in a browser
     }, 0)
   })
+
+  test('should affix-top when scrolling up to offset when parent has padding', function () {
+    stop()
+
+    var templateHTML = '<div id="padding-offset" style="padding-top: 20px;">'
+        + '<div id="affixTopTarget">'
+        + '<p>Testing affix-top class is added</p>'
+        + '</div>'
+        + '<div style="height: 1000px; display: block;"/>'
+        + '</div>'
+    $(templateHTML).appendTo(document.body)
+
+    $('#affixTopTarget')
+      .bootstrapAffix({
+        offset: { top: 120, bottom: 0 }
+      })
+      .on('affixed-top.bs.affix', function () {
+        ok($('#affixTopTarget').hasClass('affix-top'), 'affix-top class applied')
+        $('#padding-offset').remove()
+        start()
+      })
+
+    setTimeout(function () {
+      window.scrollTo(0, document.body.scrollHeight)
+
+      setTimeout(function () {
+        window.scroll(0, 119)
+      }, 250)
+    }, 250)
+  })
 })

js/tests/unit/carousel.js

@@ -541,4 +541,157 @@ $(function () {
       strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
     })
   })
+
+  test('should wrap around from end to start when wrap option is true', function () {
+    var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
+        + '<ol class="carousel-indicators">'
+        + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+        + '</ol>'
+        + '<div class="carousel-inner">'
+        + '<div class="item active" id="one">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="two">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="three">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+        + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+        + '</div>'
+    var $carousel = $(carouselHTML)
+    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
+
+    stop()
+
+    $carousel
+      .one('slid.bs.carousel', function () {
+        strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
+        $carousel
+          .one('slid.bs.carousel', function () {
+            strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
+            $carousel
+              .one('slid.bs.carousel', function () {
+                strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
+                start()
+              })
+              .bootstrapCarousel('next')
+          })
+          .bootstrapCarousel('next')
+      })
+      .bootstrapCarousel('next')
+  })
+
+  test('should wrap around from start to end when wrap option is true', function () {
+    var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
+        + '<ol class="carousel-indicators">'
+        + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+        + '</ol>'
+        + '<div class="carousel-inner">'
+        + '<div class="item active" id="one">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="two">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="three">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+        + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+        + '</div>'
+    var $carousel = $(carouselHTML)
+
+    stop()
+
+    $carousel
+      .on('slid.bs.carousel', function () {
+        strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
+        start()
+      })
+      .bootstrapCarousel('prev')
+  })
+
+  test('should stay at the end when the next method is called and wrap is false', function () {
+    var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
+        + '<ol class="carousel-indicators">'
+        + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+        + '</ol>'
+        + '<div class="carousel-inner">'
+        + '<div class="item active" id="one">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="two">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="three">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+        + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+        + '</div>'
+    var $carousel = $(carouselHTML)
+    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
+
+    stop()
+
+    $carousel
+      .one('slid.bs.carousel', function () {
+        strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
+        $carousel
+          .one('slid.bs.carousel', function () {
+            strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
+            $carousel
+              .one('slid.bs.carousel', function () {
+                ok(false, 'carousel slid when it should not have slid')
+              })
+              .bootstrapCarousel('next')
+            strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
+            start()
+          })
+          .bootstrapCarousel('next')
+      })
+      .bootstrapCarousel('next')
+  })
+
+  test('should stay at the start when the prev method is called and wrap is false', function () {
+    var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
+        + '<ol class="carousel-indicators">'
+        + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+        + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+        + '</ol>'
+        + '<div class="carousel-inner">'
+        + '<div class="item active" id="one">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="two">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '<div class="item" id="three">'
+        + '<div class="carousel-caption"/>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+        + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+        + '</div>'
+    var $carousel = $(carouselHTML)
+
+    $carousel
+      .on('slid.bs.carousel', function () {
+        ok(false, 'carousel slid when it should not have slid')
+      })
+      .bootstrapCarousel('prev')
+    strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
+  })
 })

js/tests/unit/dropdown.js

@@ -224,4 +224,45 @@ $(function () {
     $(document.body).click()
   })
 
+  test('should ignore keyboard events within <input>s and <textarea>s', function () {
+    stop()
+
+    var dropdownHTML = '<ul class="tabs">'
+        + '<li class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><a href="#">Secondary link</a></li>'
+        + '<li><a href="#">Something else here</a></li>'
+        + '<li class="divider"/>'
+        + '<li><a href="#">Another link</a></li>'
+        + '<li><input type="text" id="input"></li>'
+        + '<li><textarea id="textarea"/></li>'
+        + '</ul>'
+        + '</li>'
+        + '</ul>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    var $input = $('#input')
+    var $textarea = $('#textarea')
+
+    $dropdown
+      .parent('.dropdown')
+      .on('shown.bs.dropdown', function () {
+        ok(true, 'shown was fired')
+
+        $input.focus().trigger($.Event('keydown', { which: 38 }))
+        ok($(document.activeElement).is($input), 'input still focused')
+
+        $textarea.focus().trigger($.Event('keydown', { which: 38 }))
+        ok($(document.activeElement).is($textarea), 'textarea still focused')
+
+        start()
+      })
+
+    $dropdown.click()
+  })
+
 })

js/tests/unit/tooltip.js

@@ -4,7 +4,7 @@ $(function () {
   module('tooltip plugin')
 
   test('should be defined on jquery object', function () {
-    ok($(document.body).tooltip, 'popover method is defined')
+    ok($(document.body).tooltip, 'tooltip method is defined')
   })
 
   module('tooltip', {

js/tooltip.js

 /* ========================================================================
- * Bootstrap: tooltip.js v3.3.0
+ * Bootstrap: tooltip.js v3.3.1
  * http://getbootstrap.com/javascript/#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
@@ -25,7 +25,7 @@
     this.init('tooltip', element, options)
   }
 
-  Tooltip.VERSION  = '3.3.0'
+  Tooltip.VERSION  = '3.3.1'
 
   Tooltip.TRANSITION_DURATION = 150
 

js/transition.js

 /* ========================================================================
- * Bootstrap: transition.js v3.3.0
+ * Bootstrap: transition.js v3.3.1
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.

less/_button-group.less

@@ -18,10 +18,6 @@
     &.active {
       z-index: 2;
     }
-    &:focus {
-      // Remove focus outline when dropdown JS adds it after closing the menu
-      outline: 0;
-    }
   }
 }
 

less/_carousel.less

@@ -27,24 +27,24 @@
 
     // WebKit CSS3 transforms for supported devices
     @media all and (transform-3d), (-webkit-transform-3d) {
-      transition: transform .6s ease-in-out;
-      backface-visibility: hidden;
-      perspective: 1000;
+      .transition-transform(~'0.6s ease-in-out');
+      .backface-visibility(~'hidden');
+      .perspective(1000);
 
       &.next,
       &.active.right {
-        transform: translate3d(100%, 0, 0);
+        .translate3d(100%, 0, 0);
         left: 0;
       }
       &.prev,
       &.active.left {
-        transform: translate3d(-100%, 0, 0);
+        .translate3d(-100%, 0, 0);
         left: 0;
       }
       &.next.left,
       &.prev.right,
       &.active {
-        transform: translate3d(0, 0, 0);
+        .translate3d(0, 0, 0);
         left: 0;
       }
     }
@@ -134,6 +134,7 @@
     height: 20px;
     margin-top: -10px;
     font-family: serif;
+    line-height: 1;
   }
   .icon-prev {
     left: 50%;
@@ -143,8 +144,6 @@
     right: 50%;
     margin-right: -10px;
   }
-
-
   .icon-prev {
     &:before {
       content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)

less/_dropdown.less

@@ -183,7 +183,7 @@
   .dropdown-menu {
     top: auto;
     bottom: 100%;
-    margin-bottom: 1px;
+    margin-bottom: 2px;
   }
 }
 

less/_forms.less

@@ -312,16 +312,27 @@ input[type="checkbox"] {
 //
 // Build on `.form-control` with modifier classes to decrease or increase the
 // height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
-.input-sm,
-.form-group-sm .form-control {
+.input-sm {
   .input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
 }
+.form-group-sm {
+  .form-control {
+    .input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
+  }
+}
 
-.input-lg,
-.form-group-lg .form-control {
+.input-lg {
   .input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
 }
+.form-group-lg {
+  .form-control {
+    .input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
+  }
+}
 
 
 // Form control feedback states

less/_media.less

@@ -7,6 +7,16 @@
   }
 }
 
+.media,
+.media-body {
+  zoom: 1;
+  overflow: hidden;
+}
+
+.media-object {
+  display: block;
+}
+
 .media-right,
 .media > .pull-right {
   padding-left: 10px;

package.json

 {
   "name": "bootstrap",
   "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "keywords": [
     "css",
     "less",
@@ -32,13 +32,13 @@
   },
   "devDependencies": {
     "btoa": "~1.1.2",
-    "glob": "~4.0.6",
+    "glob": "~4.2.1",
     "grunt": "~0.4.5",
-    "grunt-autoprefixer": "~1.0.1",
+    "grunt-autoprefixer": "~2.0.0",
     "grunt-banner": "~0.2.3",
     "grunt-contrib-clean": "~0.6.0",
     "grunt-contrib-concat": "~0.5.0",
-    "grunt-contrib-connect": "~0.8.0",
+    "grunt-contrib-connect": "~0.9.0",
     "grunt-contrib-copy": "~0.7.0",
     "grunt-contrib-csslint": "~0.3.1",
     "grunt-contrib-cssmin": "~0.10.0",
@@ -52,12 +52,12 @@
     "grunt-exec": "~0.4.6",
     "grunt-html-validation": "~0.1.18",
     "grunt-jekyll": "~0.4.2",
-    "grunt-jscs": "~0.8.1",
-    "grunt-saucelabs": "~8.3.2",
+    "grunt-jscs": "~1.0.0",
+    "grunt-saucelabs": "~8.3.3",
     "grunt-sed": "~0.1.1",
     "load-grunt-tasks": "~1.0.0",
-    "npm-shrinkwrap": "~4.0.0",
-    "remarkable": "^1.2.2",
+    "npm-shrinkwrap": "5.0.0",
+    "remarkable": "~1.4.2",
     "time-grunt": "~1.0.0"
   },
   "engines": {