Disable crawling on Netlify. (#29193 )

Update devDependencies and gems.
Add an update-deps npm script.
2019-08-03 17:09:03 +03:00 · 2019-07-15 10:31:06 +03:00 · 2019-07-15 10:31:06 +03:00 · 2019-07-15 10:31:06 +03:00 · 2019-03-27 21:02:22 +02:00 · 2019-03-27 21:02:22 +02:00
348 changed files with 32197 additions and 19688 deletions
@@ -10,5 +10,8 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

+[*.md]
+trim_trailing_whitespace = false
+
 [*.py]
 indent_size = 4
@@ -7,3 +7,9 @@
 *.md    text eol=lf
 *.svg   text eol=lf
 *.yml   text eol=lf
+# Don't diff or textually merge source maps
+*.map   binary
+
+bootstrap-theme.css linguist-vendored=false
+bootstrap.css linguist-vendored=false
+bootstrap.js linguist-vendored=false
@@ -1,7 +1,18 @@
 # Ignore docs files
-_gh_pages
-_site
-.ruby-version
+/.bundle/
+/_gh_pages/
+/_site/
+/site/docs/**/dist/
+/site/static/**/dist/
+/bower_components/
+/js/coverage/
+/node_modules/
+/resources/
+/vendor/
+/.ruby-version
+
+# Jekyll metadata
+/docs/.jekyll-metadata

 # Numerous always-ignore extensions
 *.diff
@@ -32,11 +43,3 @@ Thumbs.db
 # Komodo
 .komodotools
 *.komodoproject
-
-# grunt-html-validation
-validation-report.json
-validation-status.json
-
-# Folders to ignore
-bower_components
-node_modules
@@ -1,45 +1,23 @@
 language: node_js
 git:
-  depth: 10
+  depth: 3
 node_js:
-  - "0.10"
-before_install:
-  - travis_retry sudo pip install -r test-infra/requirements.txt
-  - rvm use 1.9.3 --fuzzy
-  - export GEMDIR=$(rvm gemdir)
-  - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $GEMDIR) jekyll=$JEKYLL_VERSION rouge=$ROUGE_VERSION" > pseudo_Gemfile.lock; fi
-  - "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
-  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
-  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
-  - 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 [ "$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
+  - "6"
 env:
-  global:
-    - 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
-    - TWBS_TEST=sauce-js-unit
-matrix:
-  fast_finish: true
+    - TWBS_TEST=browserstack
+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 browserstack\]'; export TWBS_DO_BROWSERSTACK=$?; true
+install:
+  - bundle install --deployment --jobs=3 --retry=3 --clean
+  - npm install
+cache:
+  directories:
+    - node_modules
+    - vendor/bundle
 notifications:
-  slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
-  webhooks:
-    - http://savage.twbsapps.com/savage/travis
+  email: false
@@ -0,0 +1,5 @@
+Bootstrap uses [GitHub's Releases feature](https://blog.github.com/2013-07-02-release-your-software/) for its changelogs.
+
+See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.
+
+Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
@@ -18,24 +18,32 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat
 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](README.md#community) are better places to get help.
+* Please **do not** use the issue tracker for personal support requests. Stack
+  Overflow ([`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag),
+  [Slack](https://bootstrap-slack.herokuapp.com/) 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.

+* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
+  Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)
+  instead. We reserve the right to delete comments which violate this rule.
+
 * Please **do not** open issues or pull requests regarding the code in
  [`Normalize`](https://github.com/necolas/normalize.css) (open them in
  their respective repositories).

+* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
+  Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
+

 ## 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.
+- `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 an 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.
+- `css` - Issues stemming from our compiled CSS or source Less/Sass 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.
@@ -55,7 +63,7 @@ Good bug reports are extremely helpful, so thanks!

 Guidelines for bug reports:

-0. **Validate and lint your code** &mdash; [validate your HTML](http://html5.validator.nu)
+0. **Validate and lint your code** &mdash; [validate your HTML](https://html5.validator.nu/)
   and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
   problem isn't caused by a simple error in your own code.

@@ -63,10 +71,10 @@ Guidelines for bug reports:
   reported.

 2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
-   latest `master` or development branch in the repository.
+   latest `v3-dev` or development branch in the repository.

 3. **Isolate the problem** &mdash; ideally create a [reduced test
-   case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
+   case](https://css-tricks.com/reduced-test-cases/) and a live example.
   [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.


@@ -98,23 +106,24 @@ 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/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
+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](https://getbootstrap.com/docs/3.4/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                                                    |
 | ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | Mozilla       | Firefox                      | Gecko            | https://bugzilla.mozilla.org/enter_bug.cgi                                            | "Core" is normally the right product option to choose.   |
 | Apple         | Safari                       | WebKit           | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
 | Google, Opera | Chrome, Chromium, Opera v15+ | Blink            | https://code.google.com/p/chromium/issues/list                                        | Click the "New issue" button.                            |
-| Microsoft     | Internet Explorer            | Trident          | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm                      |                                                          |
-
-### Issues bots
-
-[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
-
+| Microsoft     | Edge                         | EdgeHTML         | https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/                 |                                                          |

 ## Feature requests

-Feature requests are welcome. But take a moment to find out whether your idea
+Feature requests are welcome, but please note that they **must target
+[Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because
+Bootstrap v3 is now in maintenance mode and is closed off to new features.
+This is so that we can focus our efforts on Bootstrap v4, the future of the
+framework.
+
+Before opening a feature request, please take a moment to find out whether your idea
 fits with the scope and aims of the project. It's up to *you* to make a strong
 case to convince the project's developers of the merits of this feature. Please
 provide as much detail and context as possible.
@@ -131,25 +140,33 @@ implementing features, refactoring code, porting to a different language),
 otherwise you risk spending a lot of time working on something that the
 project's developers might not want to merge into the project.

+In particular, **pull requests that add new features to Bootstrap v3 will be
+rejected.** Bootstrap v3 is now in maintenance mode and is therefore closed
+off to new features, so that we can focus our efforts on Bootstrap v4, the
+future of the framework. Pull requests that add new features should target
+[Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev)
+instead, where they will be welcomed and duly considered.
+
 Please adhere to the [coding guidelines](#code-guidelines) used throughout the
 project (indentation, accurate comments, etc.) and any other requirements
 (such as test coverage).

 **Do not edit `bootstrap.css`, `bootstrap-theme.css`, or `bootstrap.js`
 directly!** Those files are automatically generated. You should edit the
-source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/master/less)
-and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.
+source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/v3-dev/less),
+[`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/v4-dev/scss) (for Bootstrap v4),
+and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/v3-dev/js) instead.

 Similarly, when contributing to Bootstrap's documentation, you should edit the
 documentation source files in
-[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/docs).
+[the `/bootstrap/docs/` directory of the `v3-dev` branch](https://github.com/twbs/bootstrap/tree/v3-dev/docs).
 **Do not edit the `gh-pages` branch.** That branch is generated from the
 documentation source files and is managed separately by the Bootstrap Core Team.

 Adhering to the following process is the best way to get your work
 included in the project:

-1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
+1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
   and configure the remotes:

   ```bash
@@ -164,8 +181,8 @@ included in the project:
 2. If you cloned a while ago, get the latest changes from upstream:

   ```bash
-   git checkout master
-   git pull upstream master
+   git checkout v3-dev
+   git pull upstream v3-dev
   ```

 3. Create a new topic branch (off the main project development branch) to
@@ -177,14 +194,14 @@ included in the project:

 4. Commit your changes in logical chunks. Please adhere to these [git commit
   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
-   or your code is unlikely be merged into the main project. Use Git's
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   or your code is unlikely to be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/about-git-rebase/)
   feature to tidy up your commits before making them public.

 5. Locally merge (or rebase) the upstream development branch into your topic branch:

   ```bash
-   git pull [--rebase] upstream master
+   git pull [--rebase] upstream v3-dev
   ```

 6. Push your topic branch up to your fork:
@@ -194,7 +211,7 @@ included in the project:
   ```

 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
-    with a clear title and description against the `master` branch.
+    with a clear title and description against the `v3-dev` 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) (if it
@@ -202,16 +219,6 @@ includes code changes) and under the terms of the
 [Creative Commons Attribution 3.0 Unported License](docs/LICENSE)
 (if it includes documentation changes).

-### 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

 ### HTML
@@ -226,8 +233,8 @@ includes code changes) and under the terms of the

 [Adhere to the Code Guide.](http://codeguide.co/#css)

- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://a11yproject.com/posts/never-remove-css-outlines/) for more details.

 ### JS

@@ -235,6 +242,7 @@ includes code changes) and under the terms of the
 - 2 spaces (no tabs)
 - strict mode
 - "Attractive"
+- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](https://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](https://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.

 ### Checking coding style

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+group :development, :test do
+  gem 'jekyll', '~> 3.8.6'
+  gem 'jekyll-sitemap', '~> 1.3.1'
+  gem 'wdm', '~> 0.1.1', :install_if => Gem.win_platform?
+end
@@ -0,0 +1,71 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.6.0)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.11.1)
+    ffi (1.11.1-x64-mingw32)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.6)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-sitemap (1.3.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.1.1)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (3.6.0)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    wdm (0.1.1)
+
+PLATFORMS
+  ruby
+  x64-mingw32
+
+DEPENDENCIES
+  jekyll (~> 3.8.6)
+  jekyll-sitemap (~> 1.3.1)
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   1.17.3
@@ -1,8 +1,8 @@
 /*!
 * Bootstrap's Gruntfile
- * http://getbootstrap.com
- * Copyright 2013-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * https://getbootstrap.com/
+ * Copyright 2013-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
 */

 module.exports = function (grunt) {
@@ -17,7 +17,6 @@ module.exports = function (grunt) {

  var fs = require('fs');
  var path = require('path');
-  var npmShrinkwrap = require('npm-shrinkwrap');
  var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js');
  var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
  var getLessVarsData = function () {
@@ -44,7 +43,7 @@ module.exports = function (grunt) {
    banner: '/*!\n' +
            ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
            ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
-            ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
+            ' * Licensed under the <%= pkg.license %> license\n' +
            ' */\n',
    jqueryCheck: configBridge.config.jqueryCheck.join('\n'),
    jqueryVersionCheck: configBridge.config.jqueryVersionCheck.join('\n'),
@@ -63,7 +62,7 @@ module.exports = function (grunt) {
        options: {
          jshintrc: 'grunt/.jshintrc'
        },
-        src: ['Gruntfile.js', 'grunt/*.js']
+        src: ['Gruntfile.js', 'package.js', 'grunt/*.js']
      },
      core: {
        src: 'js/*.js'
@@ -105,7 +104,7 @@ module.exports = function (grunt) {
        banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>',
        stripBanners: false
      },
-      bootstrap: {
+      core: {
        src: [
          'js/transition.js',
          'js/alert.js',
@@ -126,74 +125,90 @@ module.exports = function (grunt) {

    uglify: {
      options: {
-        preserveComments: 'some'
+        compress: true,
+        mangle: true,
+        ie8: true,
+        output: {
+          comments: /^!|@preserve|@license|@cc_on/i
+        }
      },
      core: {
-        src: '<%= concat.bootstrap.dest %>',
+        src: '<%= concat.core.dest %>',
        dest: 'dist/js/<%= pkg.name %>.min.js'
      },
      customize: {
        src: configBridge.paths.customizerJs,
        dest: 'docs/assets/js/customize.min.js'
      },
-      docsJs: {
+      docs: {
        src: configBridge.paths.docsJs,
        dest: 'docs/assets/js/docs.min.js'
      }
    },

-    qunit: {
-      options: {
-        inject: 'js/tests/unit/phantom.js'
-      },
-      files: 'js/tests/index.html'
-    },
-
    less: {
-      compileCore: {
+      options: {
+        ieCompat: true,
+        strictMath: true,
+        sourceMap: true,
+        outputSourceFiles: true
+      },
+      core: {
        options: {
-          strictMath: true,
-          sourceMap: true,
-          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src: 'less/bootstrap.less',
        dest: 'dist/css/<%= pkg.name %>.css'
      },
-      compileTheme: {
+      theme: {
        options: {
-          strictMath: true,
-          sourceMap: true,
-          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>-theme.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
        },
        src: 'less/theme.less',
        dest: 'dist/css/<%= pkg.name %>-theme.css'
+      },
+      docs: {
+        options: {
+          sourceMapURL: 'docs.css.map',
+          sourceMapFilename: 'docs/assets/css/docs.css.map'
+        },
+        src: 'docs/assets/less/docs.less',
+        dest: 'docs/assets/css/docs.css'
+      },
+      docsIe: {
+        options: {
+          sourceMap: false
+        },
+        src: 'docs/assets/less/ie10-viewport-bug-workaround.less',
+        dest: 'docs/assets/css/ie10-viewport-bug-workaround.css'
      }
    },

-    autoprefixer: {
+    postcss: {
      options: {
-        browsers: configBridge.config.autoprefixerBrowsers
+        map: {
+          inline: false,
+          sourcesContent: true
+        },
+        processors: [
+          require('autoprefixer')(configBridge.config.autoprefixer)
+        ]
      },
      core: {
-        options: {
-          map: true
-        },
        src: 'dist/css/<%= pkg.name %>.css'
      },
      theme: {
-        options: {
-          map: true
-        },
        src: 'dist/css/<%= pkg.name %>-theme.css'
      },
      docs: {
-        src: 'docs/assets/css/src/docs.css'
+        src: 'docs/assets/css/docs.css'
      },
      examples: {
+        options: {
+          map: false
+        },
        expand: true,
        cwd: 'docs/examples/',
        src: ['**/*.css'],
@@ -201,89 +216,60 @@ module.exports = function (grunt) {
      }
    },

-    csslint: {
+    stylelint: {
      options: {
-        csslintrc: 'less/.csslintrc'
+        configFile: 'grunt/.stylelintrc',
+        reportNeedlessDisables: false
      },
      dist: [
-        'dist/css/bootstrap.css',
-        'dist/css/bootstrap-theme.css'
+        'less/**/*.less'
+      ],
+      docs: [
+        'docs/assets/less/**/*.less'
      ],
      examples: [
        'docs/examples/**/*.css'
-      ],
-      docs: {
-        options: {
-          ids: false,
-          'overqualified-elements': false
-        },
-        src: 'docs/assets/css/src/docs.css'
-      }
+      ]
    },

    cssmin: {
      options: {
        compatibility: 'ie8',
-        keepSpecialComments: '*',
-        advanced: false
+        sourceMap: true,
+        sourceMapInlineSources: true,
+        level: {
+          1: {
+            specialComments: 'all'
+          }
+        }
      },
-      minifyCore: {
+      core: {
        src: 'dist/css/<%= pkg.name %>.css',
        dest: 'dist/css/<%= pkg.name %>.min.css'
      },
-      minifyTheme: {
+      theme: {
        src: 'dist/css/<%= pkg.name %>-theme.css',
        dest: 'dist/css/<%= pkg.name %>-theme.min.css'
      },
      docs: {
-        src: [
-          'docs/assets/css/src/docs.css',
-          'docs/assets/css/src/pygments-manni.css'
-        ],
+        src: 'docs/assets/css/docs.css',
        dest: 'docs/assets/css/docs.min.css'
      }
    },

-    usebanner: {
-      options: {
-        position: 'top',
-        banner: '<%= banner %>'
-      },
-      files: {
-        src: 'dist/css/*.css'
-      }
-    },
-
-    csscomb: {
-      options: {
-        config: 'less/.csscomb.json'
-      },
-      dist: {
-        expand: true,
-        cwd: 'dist/css/',
-        src: ['*.css', '!*.min.css'],
-        dest: 'dist/css/'
-      },
-      examples: {
-        expand: true,
-        cwd: 'docs/examples/',
-        src: '**/*.css',
-        dest: 'docs/examples/'
-      },
-      docs: {
-        src: 'docs/assets/css/src/docs.css',
-        dest: 'docs/assets/css/src/docs.css'
-      }
-    },
-
    copy: {
      fonts: {
-        src: 'fonts/*',
+        expand: true,
+        src: 'fonts/**',
        dest: 'dist/'
      },
      docs: {
-        src: 'dist/*/*',
-        dest: 'docs/'
+        expand: true,
+        cwd: 'dist/',
+        src: [
+          '**/*'
+        ],
+        dest: 'docs/dist/'
      }
    },

@@ -298,9 +284,16 @@ module.exports = function (grunt) {

    jekyll: {
      options: {
-        config: '_config.yml'
+        bundleExec: true,
+        config: '_config.yml',
+        incremental: false
      },
      docs: {},
+      netlify: {
+        options: {
+          raw: 'github: true\nbaseurl: ""\nnetlify: true'
+        }
+      },
      github: {
        options: {
          raw: 'github: true'
@@ -308,103 +301,58 @@ module.exports = function (grunt) {
      }
    },

-    jade: {
+    pug: {
      options: {
        pretty: true,
        data: getLessVarsData
      },
      customizerVars: {
-        src: 'docs/_jade/customizer-variables.jade',
+        src: 'docs/_pug/customizer-variables.pug',
        dest: 'docs/_includes/customizer-variables.html'
      },
      customizerNav: {
-        src: 'docs/_jade/customizer-nav.jade',
+        src: 'docs/_pug/customizer-nav.pug',
        dest: 'docs/_includes/nav/customize.html'
      }
    },

-    validation: {
+    htmllint: {
      options: {
-        charset: 'utf-8',
-        doctype: 'HTML5',
-        failHard: true,
-        reset: true,
-        relaxerror: [
-          '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.',
-          'Bad value separator for attribute role on element li.'
-        ]
+        ignore: [
+          'Element "img" is missing required attribute "src".'
+        ],
+        noLangDetect: true
      },
-      files: {
-        src: '_gh_pages/**/*.html'
-      }
+      src: ['_gh_pages/**/*.html', 'js/tests/**/*.html']
    },

    watch: {
      src: {
        files: '<%= jshint.core.src %>',
-        tasks: ['jshint:src', 'qunit', 'concat']
+        tasks: ['jshint:core', 'exec:karma', 'concat']
      },
      test: {
        files: '<%= jshint.test.src %>',
-        tasks: ['jshint:test', 'qunit']
+        tasks: ['jshint:test', 'exec:karma']
      },
      less: {
        files: 'less/**/*.less',
-        tasks: 'less'
-      }
-    },
-
-    sed: {
-      versionNumber: {
-        pattern: (function () {
-          var old = grunt.option('oldver');
-          return old ? RegExp.quote(old) : old;
-        })(),
-        replacement: grunt.option('newver'),
-        recursive: true
-      }
-    },
-
-    'saucelabs-qunit': {
-      all: {
-        options: {
-          build: process.env.TRAVIS_JOB_ID,
-          throttled: 10,
-          maxRetries: 3,
-          maxPollRetries: 4,
-          urls: ['http://127.0.0.1:3000/js/tests/index.html'],
-          browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
-        }
+        tasks: ['less', 'copy']
+      },
+      docs: {
+        files: 'docs/assets/less/**/*.less',
+        tasks: ['less']
      }
    },

    exec: {
-      npmUpdate: {
-        command: 'npm update'
-      }
-    },
-
-    compress: {
-      main: {
-        options: {
-          archive: 'bootstrap-<%= pkg.version %>-dist.zip',
-          mode: 'zip',
-          level: 9,
-          pretty: true
-        },
-        files: [
-          {
-            expand: true,
-            cwd: 'dist/',
-            src: ['**'],
-            dest: 'bootstrap-<%= pkg.version %>-dist'
-          }
-        ]
+      browserstack: {
+        command: 'cross-env BROWSER=true karma start grunt/karma.conf.js'
+      },
+      karma: {
+        command: 'karma start grunt/karma.conf.js'
      }
    }
-
  });


@@ -413,22 +361,20 @@ module.exports = function (grunt) {
  require('time-grunt')(grunt);

  // Docs HTML validation task
-  grunt.registerTask('validate-html', ['jekyll:docs', 'validation']);
+  grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint']);

  var runSubset = function (subset) {
    return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
  };
  var isUndefOrNonZero = function (val) {
-    return val === undefined || val !== '0';
+    return typeof val === 'undefined' || val !== '0';
  };

  // Test task.
  var testSubtasks = [];
  // Skip core tests if running a different subset of the test suite
-  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']);
+  if (runSubset('core')) {
+    testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'stylelint:dist', 'test-js', 'docs']);
  }
  // Skip HTML validation if running a different subset of the test suite
  if (runSubset('validate-html') &&
@@ -436,24 +382,23 @@ module.exports = function (grunt) {
      isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
    testSubtasks.push('validate-html');
  }
-  // Only run Sauce Labs tests if there's a Sauce access key
-  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
-      // Skip Sauce if running a different subset of the test suite
-      runSubset('sauce-js-unit') &&
-      // Skip Sauce on Travis when [skip sauce] is in the commit message
-      isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
-    testSubtasks.push('connect');
-    testSubtasks.push('saucelabs-qunit');
+  // Only run BrowserStack tests if there's a BrowserStack access key
+  if (typeof process.env.BROWSER_STACK_USERNAME !== 'undefined' &&
+      // Skip BrowserStack if running a different subset of the test suite
+      runSubset('browserstack') &&
+      // Skip BrowserStack on Travis when [skip browserstack] is in the commit message
+      isUndefOrNonZero(process.env.TWBS_DO_BROWSERSTACK)) {
+    testSubtasks.push('exec:browserstack');
  }
+
  grunt.registerTask('test', testSubtasks);
-  grunt.registerTask('test-js', ['jshint:core', 'jshint:test', 'jshint:grunt', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
+  grunt.registerTask('test-js', ['jshint:core', 'jshint:test', 'jshint:grunt', 'jscs:core', 'jscs:test', 'jscs:grunt', 'exec:karma']);

  // JS distribution task.
  grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);

  // CSS distribution task.
-  grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
-  grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'usebanner', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme']);
+  grunt.registerTask('dist-css', ['less:core', 'less:theme', 'postcss:core', 'postcss:theme', 'cssmin:core', 'cssmin:theme']);

  // Full distribution task.
  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
@@ -461,49 +406,30 @@ module.exports = function (grunt) {
  // Default task.
  grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'test']);

-  // Version numbering task.
-  // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
-  // This can be overzealous, so its changes should always be manually reviewed!
-  grunt.registerTask('change-version-number', 'sed');
-
-  grunt.registerTask('build-glyphicons-data', function () { generateGlyphiconsData.call(this, grunt); });
+  grunt.registerTask('build-glyphicons-data', function () {
+    generateGlyphiconsData.call(this, grunt);
+  });

  // task for building customizer
  grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
-  grunt.registerTask('build-customizer-html', 'jade');
+  grunt.registerTask('build-customizer-html', 'pug');
  grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
    var banner = grunt.template.process('<%= banner %>');
    generateRawFiles(grunt, banner);
  });

  grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
-    var srcFiles = grunt.config.get('concat.bootstrap.src');
+    var srcFiles = grunt.config.get('concat.core.src');
    var destFilepath = 'dist/js/npm.js';
    generateCommonJSModule(grunt, srcFiles, destFilepath);
  });

  // Docs task.
-  grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
-  grunt.registerTask('lint-docs-css', ['csslint:docs', 'csslint:examples']);
-  grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
+  grunt.registerTask('docs-css', ['less:docs', 'less:docsIe', 'postcss:docs', 'postcss:examples', 'cssmin:docs']);
+  grunt.registerTask('lint-docs-css', ['stylelint:docs', 'stylelint:examples']);
+  grunt.registerTask('docs-js', ['uglify:docs', 'uglify:customize']);
  grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
  grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-glyphicons-data', 'build-customizer']);

-  grunt.registerTask('prep-release', ['jekyll:github', 'compress']);
-
-  // Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
-  // This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
-  grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
-  grunt.registerTask('_update-shrinkwrap', function () {
-    var done = this.async();
-    npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
-      if (err) {
-        grunt.fail.warn(err);
-      }
-      var dest = 'test-infra/npm-shrinkwrap.json';
-      fs.renameSync('npm-shrinkwrap.json', dest);
-      grunt.log.writeln('File ' + dest.cyan + ' updated.');
-      done();
-    });
-  });
+  grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github']);
 };
@@ -0,0 +1,22 @@
+Before opening an issue:
+
+- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- [Validate](https://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
+- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
+- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/v3-dev/CONTRIBUTING.md)
+
+When asking general "how to" questions:
+
+- Please do not open an issue here
+- Instead, ask for help on [StackOverflow, IRC, or Slack](https://github.com/twbs/bootstrap/blob/v3-dev/README.md#community)
+
+When reporting a bug, include:
+
+- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
+- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com/)
+
+When suggesting a feature, include:
+
+- As much detail as possible for what we should add and why it's important to Bootstrap
+- Relevant links to prior art, screenshots, or live demos whenever possible
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2011-2015 Twitter, Inc
+Copyright (c) 2011-2019 Twitter, Inc.

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,35 +1,42 @@
-# [Bootstrap](http://getbootstrap.com)
-![Bower version](https://img.shields.io/bower/v/bootstrap.svg?style=flat)
-[![npm version](https://img.shields.io/npm/v/bootstrap.svg?style=flat)](https://www.npmjs.com/package/bootstrap)
-[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg?style=flat)](https://travis-ci.org/twbs/bootstrap)
-[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg?style=flat)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
-[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
+# [Bootstrap](https://getbootstrap.com/)
+
+[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
+![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
+[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
+[![Build Status](https://img.shields.io/travis/twbs/bootstrap/v3-dev.svg)](https://travis-ci.org/twbs/bootstrap)
+[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
+[![NuGet](https://img.shields.io/nuget/v/bootstrap.svg)](https://www.nuget.org/packages/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/orgs/twbs/people) with the massive support and involvement of the community.

-To get started, check out <http://getbootstrap.com>!
+To get started, check out <https://getbootstrap.com/>!
+

 ## Table of contents

- [Quick start](#quick-start)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Community](#community)
- [Versioning](#versioning)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)
+* [Quick start](#quick-start)
+* [Bugs and feature requests](#bugs-and-feature-requests)
+* [Documentation](#documentation)
+* [Contributing](#contributing)
+* [Community](#community)
+* [Versioning](#versioning)
+* [Creators](#creators)
+* [Thanks](#thanks)
+* [Copyright and license](#copyright-and-license)
+

 ## Quick start

-Four quick start options are available:
+Several quick start options are available:

- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.2.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`.
+* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.4.1.zip).
+* Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
+* Install with [Bower](https://bower.io/): `bower install bootstrap`.
+* Install with [npm](https://www.npmjs.com/): `npm install bootstrap@3`.
+* Install with [Meteor](https://www.meteor.com/): `meteor add twbs:bootstrap`.
+* Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap`.

-Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
+Read the [Getting started page](https://getbootstrap.com/docs/3.4/getting-started/) for information on the framework contents, templates and examples, and more.

 ### What's included

@@ -41,9 +48,11 @@ bootstrap/
 │   ├── bootstrap.css
 │   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
+│   ├── bootstrap.min.css.map
 │   ├── bootstrap-theme.css
 │   ├── bootstrap-theme.css.map
-│   └── bootstrap-theme.min.css
+│   ├── bootstrap-theme.min.css
+│   └── bootstrap-theme.min.css.map
 ├── js/
 │   ├── bootstrap.js
 │   └── bootstrap.min.js
@@ -55,78 +64,86 @@ bootstrap/
    └── glyphicons-halflings-regular.woff2
 ```

-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. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
-
+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/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.


 ## Bugs and feature requests

-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/v3-dev/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
+
+Note that **feature requests must target [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because Bootstrap v3 is now in maintenance mode and is closed off to new features. This is so that we can focus our efforts on Bootstrap v4.


 ## Documentation

-Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
+Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.

 ### Running documentation locally

-1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x).
-  - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
-2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`.
-3. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
-4. Open <http://localhost:9001> in your browser, and voilà.
+1. If necessary, [install Jekyll](https://jekyllrb.com/docs/installation/) and other Ruby dependencies with `bundle install`.
+   **Note for Windows users:** Read [this guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
+2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
+4. Open `http://localhost:9001` in your browser, and voilà.

-Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
+Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/).

 ### Documentation for previous releases

-Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
+Documentation for v2.3.2 has been made available for the time being at <https://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.

 [Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.


-
 ## Contributing

-Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/v3-dev/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.

-Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
+Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/v3-dev/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).

-Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
+**Bootstrap v3 is now closed off to new features.** It has gone into maintenance mode so that we can focus our efforts on [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev), the future of the framework. Pull requests which add new features (rather than fix bugs) should target [Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev) instead.

+Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/v3-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.


 ## Community

-Keep track of development and community news.
-
- Follow [@twbootstrap on Twitter](https://twitter.com/twbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
+Get updates on Bootstrap's development and chat with the project maintainers and community members.

+* Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
+* Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
+* Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
+* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
+* Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
+* Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.


 ## Versioning

-For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
+For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.

+See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
+
+
+## Thanks
+
+<img src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo" width="490" height="106">
+
+Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!


 ## Creators

 **Mark Otto**

- <https://twitter.com/mdo>
- <https://github.com/mdo>
+* <https://twitter.com/mdo>
+* <https://github.com/mdo>

 **Jacob Thornton**

- <https://twitter.com/fat>
- <https://github.com/fat>
-
+* <https://twitter.com/fat>
+* <https://github.com/fat>


 ## Copyright and license

-Code and documentation copyright 2011-2015 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).
+Code and documentation copyright 2011-2019 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/v3-dev/docs/LICENSE).
@@ -10,23 +10,37 @@ source:           docs
 destination:      _gh_pages
 host:             0.0.0.0
 port:             9001
-url:              http://getbootstrap.com
+url:              https://getbootstrap.com
+baseurl:          /docs/3.4
 encoding:         UTF-8
+exclude:
+  - assets/less/
+
+plugins:
+  - jekyll-sitemap

 # Custom vars
-current_version:  3.3.2
+title:            Bootstrap
+description:      "The world's most popular mobile-first and responsive front-end framework."
+current_version:  3.4.1
+docs_version:     3.4
 repo:             https://github.com/twbs/bootstrap
 sass_repo:        https://github.com/twbs/bootstrap-sass

 download:
-  source:         https://github.com/twbs/bootstrap/archive/v3.3.2.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v3.3.2/bootstrap-3.3.2-dist.zip
-  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.3.2.tar.gz
+  source:         https://github.com/twbs/bootstrap/archive/v3.4.1.zip
+  dist:           https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip
+  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.4.1.tar.gz

-blog:             http://blog.getbootstrap.com
-expo:             http://expo.getbootstrap.com
+blog:             https://blog.getbootstrap.com
+expo:             https://expo.getbootstrap.com
+themes:           https://themes.getbootstrap.com

 cdn:
-  css:            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
-  css_theme:      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css
-  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
+  # See https://www.srihash.org for info on how to generate the hashes
+  css:            https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
+  css_hash:       "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+  css_theme:      https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css
+  css_theme_hash: "sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
+  js:             https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
+  js_hash:        "sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
@@ -1,7 +1,6 @@
 {
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-  "version": "3.3.2",
  "keywords": [
    "css",
    "js",
@@ -12,15 +11,12 @@
    "framework",
    "web"
  ],
-  "homepage": "http://getbootstrap.com",
+  "homepage": "https://getbootstrap.com/",
+  "license": "MIT",
+  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
-    "dist/css/bootstrap.css",
-    "dist/js/bootstrap.js",
-    "dist/fonts/glyphicons-halflings-regular.eot",
-    "dist/fonts/glyphicons-halflings-regular.svg",
-    "dist/fonts/glyphicons-halflings-regular.ttf",
-    "dist/fonts/glyphicons-halflings-regular.woff"
+    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
@@ -33,6 +29,6 @@
    "test-infra"
  ],
  "dependencies": {
-    "jquery": ">= 1.9.1"
+    "jquery": "1.9.1 - 3"
  }
 }
@@ -11,7 +11,7 @@
    "framework",
    "web"
  ],
-  "homepage": "http://getbootstrap.com",
+  "homepage": "https://getbootstrap.com/",
  "authors": [
    {
      "name": "Mark Otto",
@@ -28,7 +28,7 @@
  "license": "MIT",
  "extra": {
    "branch-alias": {
-      "dev-master": "3.3.x-dev"
+      "dev-master": "3.4.x-dev"
    }
  },
  "replace": {
@@ -1,18 +1,17 @@
 /*!
- * Bootstrap v3.3.2 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
-
 .btn-default,
 .btn-primary,
 .btn-success,
 .btn-info,
 .btn-warning,
 .btn-danger {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .btn-default:active,
 .btn-primary:active,
@@ -26,8 +25,29 @@
 .btn-info.active,
 .btn-warning.active,
 .btn-danger.active {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-default.disabled,
+.btn-primary.disabled,
+.btn-success.disabled,
+.btn-info.disabled,
+.btn-warning.disabled,
+.btn-danger.disabled,
+.btn-default[disabled],
+.btn-primary[disabled],
+.btn-success[disabled],
+.btn-info[disabled],
+.btn-warning[disabled],
+.btn-danger[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-danger {
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 .btn-default .badge,
 .btn-primary .badge,
@@ -42,15 +62,15 @@
  background-image: none;
 }
 .btn-default {
-  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
-  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
-  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border-color: #dbdbdb;
+  text-shadow: 0 1px 0 #fff;
  border-color: #ccc;
 }
 .btn-default:hover,
@@ -64,16 +84,31 @@
  border-color: #dbdbdb;
 }
 .btn-default.disabled,
-.btn-default:disabled,
-.btn-default[disabled] {
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
  background-color: #e0e0e0;
  background-image: none;
 }
 .btn-primary {
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
-  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
-  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
@@ -90,16 +125,31 @@
  border-color: #245580;
 }
 .btn-primary.disabled,
-.btn-primary:disabled,
-.btn-primary[disabled] {
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
  background-color: #265a88;
  background-image: none;
 }
 .btn-success {
  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
@@ -116,16 +166,31 @@
  border-color: #3e8f3e;
 }
 .btn-success.disabled,
-.btn-success:disabled,
-.btn-success[disabled] {
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
  background-color: #419641;
  background-image: none;
 }
 .btn-info {
  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
@@ -142,16 +207,31 @@
  border-color: #28a4c9;
 }
 .btn-info.disabled,
-.btn-info:disabled,
-.btn-info[disabled] {
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
  background-color: #2aabd2;
  background-image: none;
 }
 .btn-warning {
  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
@@ -168,16 +248,31 @@
  border-color: #e38d13;
 }
 .btn-warning.disabled,
-.btn-warning:disabled,
-.btn-warning[disabled] {
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
  background-color: #eb9316;
  background-image: none;
 }
 .btn-danger {
  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
@@ -194,87 +289,103 @@
  border-color: #b92c28;
 }
 .btn-danger.disabled,
-.btn-danger:disabled,
-.btn-danger[disabled] {
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
  background-color: #c12e2a;
  background-image: none;
 }
 .thumbnail,
 .img-thumbnail {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-  background-color: #e8e8e8;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
+  background-color: #e8e8e8;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  background-color: #2e6da4;
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
-  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
-  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
  background-repeat: repeat-x;
+  background-color: #2e6da4;
 }
 .navbar-default {
-  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
-  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .active > a {
  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
-  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
-  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
 }
 .navbar-brand,
 .navbar-nav > li > a {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 .navbar-inverse {
  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
-  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
-  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
 }
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .active > a {
  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
-  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
-  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
 }
 .navbar-inverse .navbar-brand,
 .navbar-inverse .navbar-nav > li > a {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 .navbar-static-top,
 .navbar-fixed-top,
@@ -287,120 +398,120 @@
  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
-    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
-    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
    background-repeat: repeat-x;
  }
 }
 .alert {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 .alert-success {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
 }
 .alert-info {
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
  background-repeat: repeat-x;
  border-color: #9acfea;
 }
 .alert-warning {
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
  background-repeat: repeat-x;
  border-color: #f5e79e;
 }
 .alert-danger {
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
  background-repeat: repeat-x;
  border-color: #dca7a7;
 }
 .progress {
  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
-  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar {
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
-  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
-  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar-success {
  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar-info {
  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar-warning {
  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar-danger {
  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
  background-repeat: repeat-x;
 }
 .progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 .list-group {
  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
  text-shadow: 0 -1px 0 #286090;
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
-  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
-  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
  background-repeat: repeat-x;
  border-color: #2b669a;
@@ -411,66 +522,66 @@
  text-shadow: none;
 }
 .panel {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 .panel-default > .panel-heading {
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
 }
 .panel-primary > .panel-heading {
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
-  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
-  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
  background-repeat: repeat-x;
 }
 .panel-success > .panel-heading {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
  background-repeat: repeat-x;
 }
 .panel-info > .panel-heading {
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
  background-repeat: repeat-x;
 }
 .panel-warning > .panel-heading {
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
  background-repeat: repeat-x;
 }
 .panel-danger > .panel-heading {
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
  background-repeat: repeat-x;
 }
 .well {
  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
-  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
-  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
  background-repeat: repeat-x;
  border-color: #dcdcdc;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
 }
-/*# sourceMappingURL=bootstrap-theme.css.map */
+/*# sourceMappingURL=bootstrap-theme.css.map */
@@ -316,4 +316,4 @@ Creative Commons Notice
    available upon request from time to time. For the avoidance of doubt,
    this trademark restriction does not form part of this License.

-    Creative Commons may be contacted at http://creativecommons.org/.
+    Creative Commons may be contacted at https://creativecommons.org/.
@@ -1,23 +1,93 @@
 -
  browser: >
-    Internet Explorer 11
+    Microsoft Edge
+  summary: >
+    Visual artifacts in scrollable modal dialogs
+  upstream_bug: >
+    Edge#9011176
+  origin: >
+    Bootstrap#20755
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
+  upstream_bug: >
+    Edge#6793560
+  origin: >
+    Bootstrap#18692
+
+-
+  browser: >
+    Microsoft Edge
  summary: >
    Hovered element still remains in `:hover` state after scrolling away.
  upstream_bug: >
-    IE#926665
+    Edge#5381673
  origin: >
    Bootstrap#14211

 -
  browser: >
-    Internet Explorer 11
+    Microsoft Edge
  summary: >
    When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
  upstream_bug: >
-    IE#963961
+    Edge#817822
  origin: >
    Bootstrap#14528

+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
+  upstream_bug: >
+    Edge#3342037
+  origin: >
+    Bootstrap#16671
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    `background` of `<tr>` is only applied to first child cell instead of all cells in the row
+  upstream_bug: >
+    Edge#5865620
+  origin: >
+    Bootstrap#18504
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    `@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
+  upstream_bug: >
+    Edge#7165383
+  origin: >
+    Bootstrap#18543
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Background color from lower layer bleeds through transparent border in some cases
+  upstream_bug: >
+    Edge#6274505
+  origin: >
+    Bootstrap#18228
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Hovering over descendant SVG element fires `mouseleave` event at ancestor
+  upstream_bug: >
+    Edge#7787318
+  origin: >
+    Bootstrap#19670
+
 -
  browser: >
    Firefox
@@ -28,36 +98,6 @@
  origin: >
    Bootstrap#13453

-
-  browser: >
-    Firefox
-  summary: >
-    `max-width: 100%;` doesn't work inside tables.
-  upstream_bug: >
-    Mozilla#975632
-  origin: >
-    Bootstrap#10690
-
-
-  browser: >
-    Firefox (Windows)
-  summary: >
-    Java applets that are descendants of elements with forced hardware acceleration using `translate3d(0,0,0)` are invisible.
-  upstream_bug: >
-    Mozilla#1048279
-  origin: >
-    Bootstrap#14124
-
-
-  browser: >
-    Firefox
-  summary: >
-    Button elements with `width: 100%` become cropped in long tables.
-  upstream_bug: >
-    Mozilla#1060131
-  origin: >
-    Bootstrap#14320
-
 -
  browser: >
    Firefox
@@ -68,6 +108,76 @@
  origin: >
    Bootstrap#793

+-
+  browser: >
+    Firefox
+  summary: >
+    `focus` events should not be fired at the `document` object
+  upstream_bug: >
+    Mozilla#1228802
+  origin: >
+    Bootstrap#18365
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Wide floated table doesn't wrap onto new line
+  upstream_bug: >
+    Mozilla#1277782
+  origin: >
+    Bootstrap#19839
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
+  upstream_bug: >
+    Mozilla#577785
+  origin: >
+    Bootstrap#19670
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `position: absolute` element that's wider than its column renders differently than other browsers
+  upstream_bug: >
+    Mozilla#1282363
+  origin: >
+    Bootstrap#20161
+
+-
+  browser: >
+    Firefox (Windows)
+  summary: >
+    Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
+  upstream_bug: >
+    Mozilla#545685
+  origin: >
+    Bootstrap#15990
+
+-
+  browser: >
+    Firefox (OS X & Linux)
+  summary: >
+    Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
+  upstream_bug: >
+    Mozilla#1259972
+  origin: >
+    Bootstrap#19626
+
+-
+  browser: >
+    Chrome (Android)
+  summary: >
+    Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
+  upstream_bug: >
+    Chromium#595210
+  origin: >
+    Bootstrap#17338
+
 -
  browser: >
    Chrome (OS X)
@@ -78,26 +188,6 @@
  origin: >
    Offshoot of Bootstrap#8350 & Chromium#337668

-
-  browser: >
-    Chrome
-  summary: >
-    `display: table;` within `display: block;` forces sibling content to new line.
-  upstream_bug: >
-    Chromium#309483
-  origin: >
-    Bootstrap#9950
-
-
-  browser: >
-    Chrome
-  summary: >
-    Incorrect viewport size used for media queries when printing.
-  upstream_bug: >
-    Chromium#273306
-  origin: >
-    Bootstrap#12078
-
 -
  browser: >
    Chrome
@@ -108,6 +198,46 @@
  origin: >
    Bootstrap#14409

+-
+  browser: >
+    Chrome
+  summary: >
+    `:focus` `outline` style causes cursor to not be displayed when toggling a `readonly` `<input>` to read-write.
+  upstream_bug: >
+    Chromium#465274
+  origin: >
+    Bootstrap#16022
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `table-cell` borders not overlapping despite `margin-right: -1px`
+  upstream_bug: >
+    Chromium#534750
+  origin: >
+    Bootstrap#17438, Bootstrap#14237
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
+  upstream_bug: >
+    Chromium#597642
+  origin: >
+    Bootstrap#19810
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    Chromium#370155
+  origin: >
+    Bootstrap#12832
+
 -
  browser: >
    Chrome (Windows & Linux)
@@ -118,15 +248,27 @@
  origin: >
    Bootstrap#15298

+-
+  browser: >
+    Safari
+  summary: >
+    Safari
+  summary: >
+    `rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
+  upstream_bug: >
+    WebKit#156684
+  origin: >
+    Bootstrap#17403
+
 -
  browser: >
    Safari (OS X)
  summary: >
-    Scrollbar clipped in `select[multiple]` with padding.
+    `px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
  upstream_bug: >
-    WebKit#128489, Safari#19208483
+    WebKit#156687
  origin: >
-    Bootstrap#12536
+    Bootstrap#17403

 -
  browser: >
@@ -140,16 +282,6 @@
    Normalize#283,
    Chromium#337668

-
-  browser: >
-    Safari (OS X)
-  summary: >
-    `display: table-cell;` within media query renders incorrectly when resizing the window.
-  upstream_bug: >
-    WebKit#138167, Safari#18987206
-  origin: >
-    Bootstrap#9774
-
 -
  browser: >
    Safari (OS X)
@@ -162,13 +294,13 @@

 -
  browser: >
-    Safari (OS X)
+    Safari (iPad)
  summary: >
-    Alpha linear-gradient has dark line at its edge.
+    `<select>` menu on iPad causes shifting of hit-testing areas
  upstream_bug: >
-    WebKit#139803, Safari#19434933
+    WebKit#150079, Safari#23082521
  origin: >
-    Bootstrap#15205
+    Bootstrap#14975

 -
  browser: >
@@ -190,6 +322,16 @@
  origin: >
    Bootstrap#14708

+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Can't move cursor to start of text after entering long string of text into `<input type="text">`
+  upstream_bug: >
+    WebKit#148061, Safari#22299624
+  origin: >
+    Bootstrap#16988
+
 -
  browser: >
    Safari (iOS)
@@ -199,3 +341,93 @@
    WebKit#139848, Safari#19434878
  origin: >
    Bootstrap#11266, Bootstrap#13098
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping on `<body>` doesn't fire `click` events
+  upstream_bug: >
+    WebKit#151933
+  origin: >
+    Bootstrap#16028
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
+  upstream_bug: >
+    WebKit#153056
+  origin: >
+    Bootstrap#18859
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
+  upstream_bug: >
+    WebKit#153224, Safari#24235301
+  origin: >
+    Bootstrap#17497
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `<body>` with `overflow:hidden` CSS is scrollable on iOS
+  upstream_bug: >
+    WebKit#153852
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
+  upstream_bug: >
+    WebKit#153856
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping from one `<input>` to another in an overlay can cause shaking/jiggling effect
+  upstream_bug: >
+    WebKit#158276
+  origin: >
+    Bootstrap#19927
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
+  upstream_bug: >
+    WebKit#158342
+  origin: >
+    Bootstrap#17695
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    WebKit#158517
+  origin: >
+    Bootstrap#12832
+
+-
+  browser: >
+    Safari (iPad Pro)
+  summary: >
+    Rendering of descendants of `position: fixed` element gets clipped on iPad Pro in Landscape orientation
+  upstream_bug: >
+    WebKit#152637, Safari#24030853
+  origin: >
+    Bootstrap#18738
@@ -0,0 +1,109 @@
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    UserVoice#12299532
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
+  upstream_bug: >
+    UserVoice#6263621
+  origin: >
+    Bootstrap#17021
+
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    UserVoice#6508895
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    Mozilla#1264125
+  origin: >
+    Mozilla#1182856
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Mozilla#854148
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    Mozilla#840640
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Chromium#304163
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    Chromium#576815
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
+  upstream_bug: >
+    Chromium#231752
+  origin: >
+    Bootstrap#17021
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    WebKit#64861
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    WebKit#84635
+  origin: >
+    Bootstrap#20175
@@ -1,27 +0,0 @@
- name: Mark Otto
-  user: mdo
-  gravatar: bc4ab438f7a4ce1c406aadc688427f2c
-
- name: Jacob Thornton
-  user: fat
-  gravatar: a98244cbdacaf1c0b55499466002f7a8
-
- name: Chris Rebert
-  user: cvrebert
-  gravatar: edec428c425453955f770095a7d26c50
-
- name: Julian Thilo
-  user: juthilo
-  gravatar: 0f7dd3ce58a416be5685ea6194f82b11
-
- name: XhmikosR
-  user: xhmikosr
-  gravatar: e37759b1ea0125d4e97b1e00b5eed26f
-
- name: Heinrich Fenkart
-  user: hnrch02
-  gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f
-
- name: Patrick H. Lauke
-  user: patrickhlauke
-  gravatar: 357f279672db832fc41a5a2f36559fcb
@@ -227,8 +227,12 @@
 - glyphicon-piggy-bank
 - glyphicon-scissors
 - glyphicon-bitcoin
+- glyphicon-btc
+- glyphicon-xbt
 - glyphicon-yen
+- glyphicon-jpy
 - glyphicon-ruble
+- glyphicon-rub
 - glyphicon-scale
 - glyphicon-ice-lolly
 - glyphicon-ice-lolly-tasted
@@ -1,19 +1,14 @@
 - name: Lyft
  url: https://www.lyft.com
-  expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
+  expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/
  img: lyft

 - name: Vogue
  url: http://www.vogue.com
-  expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
+  expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/
  img: vogue

- name: Riot Design
-  url: http://riotdesign.eu/en/
-  expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
-  img: riot
-
 - name: Newsweek
  url: http://www.newsweek.com/
-  expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
+  expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/
  img: newsweek
@@ -0,0 +1,20 @@
+- name: Mark Otto
+  user: mdo
+
+- name: Jacob Thornton
+  user: fat
+
+- name: Chris Rebert
+  user: cvrebert
+
+- name: XhmikosR
+  user: xhmikosr
+
+- name: Patrick H. Lauke
+  user: patrickhlauke
+
+- name: Johann-S
+  user: johann-s
+
+- name: Andres Galante
+  user: andresgalante
@@ -1,7 +1,7 @@
 - name: Chinese
  code: zh
  description: Bootstrap 中文文档
-  url: http://v3.bootcss.com/
+  url: https://v3.bootcss.com/

 - name: Danish
  code: da
@@ -11,7 +11,7 @@
 - name: French
  code: fr
  description: Bootstrap en Français
-  url: http://www.oneskyapp.com/docs/bootstrap/fr
+  url: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/

 - name: German
  code: de
@@ -21,24 +21,39 @@
 - name: Italian
  code: it
  description: Bootstrap in Italiano
-  url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
+  url: https://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/

 - name: Korean
  code: ko
  description: Bootstrap 한국어
-  url: http://bootstrapk.com/BS3/
+  url: http://bootstrapk.com/
+
+- name: Brazilian Portuguese
+  code: pt-BR
+  description: Bootstrap em Português do Brasil
+  url: https://getbootstrap.com.br/

 - name: Russian
  code: ru
  description: Bootstrap по-русски
-  url: http://www.oneskyapp.com/docs/bootstrap/ru
+  url: http://www.oneskyapp.com/ru/docs/bootstrap/

 - name: Spanish
  code: es
  description: Bootstrap en Español
-  url: http://www.oneskyapp.com/docs/bootstrap/es
+  url: http://www.oneskyapp.com/es/docs/bootstrap/
+
+- name: Turkish
+  code: tr
+  description: Türkçe Bootstrap
+  url: http://www.trbootstrap.com

 - name: Ukrainian
  code: uk
  description: Bootstrap українською
-  url: http://twbs.docs.org.ua
+  url: https://twbs.docs.org.ua/
+
+- name: Vietnamese
+  code: vi
+  description: Bootstrap bằng tiếng Việt
+  url: http://getbootstrap.com.vn
@@ -1 +1 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
@@ -36,7 +36,7 @@
  <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
  <div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-plugin">
    <h4>Requires JavaScript alert plugin</h4>
-    <p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
+    <p>For fully functioning, dismissible alerts, you must use the <a href="{{ site.baseurl }}/javascript/#alerts">alerts JavaScript plugin</a>.</p>
  </div>
  <div class="bs-example" data-example-id="dismissible-alert-css">
    <div class="alert alert-warning alert-dismissible" role="alert">
@@ -11,7 +11,7 @@
      <li><a href="#">Home</a></li>
      <li class="active">Library</li>
    </ol>
-    <ol class="breadcrumb" style="margin-bottom: 5px;">
+    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
@@ -5,69 +5,69 @@

  <div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
    <h4>Plugin dependency</h4>
-    <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
+    <p>Button dropdowns require the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
  </div>

-  <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
+  <h2 id="btn-dropdowns-single">Single button dropdowns</h2>
  <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
  <div class="bs-example" data-example-id="single-button-dropdown">
    <div class="btn-group">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
-      <ul class="dropdown-menu" role="menu">
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button>
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
@@ -75,103 +75,103 @@
 {% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
-    <li class="divider"></li>
+    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
 </div>
 {% endhighlight %}

-  <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
+  <h2 id="btn-dropdowns-split">Split button dropdowns</h2>
  <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
  <div class="bs-example" data-example-id="split-button-dropdown">
    <div class="btn-group">
      <button type="button" class="btn btn-default">Default</button>
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
      <button type="button" class="btn btn-success">Success</button>
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
      <button type="button" class="btn btn-info">Info</button>
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
      <button type="button" class="btn btn-warning">Warning</button>
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
    <div class="btn-group">
      <button type="button" class="btn btn-danger">Danger</button>
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu" role="menu">
+      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
-        <li class="divider"></li>
+        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div><!-- /btn-group -->
@@ -180,61 +180,61 @@
 <!-- Split button -->
 <div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
-  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
-    <li class="divider"></li>
+    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
 </div>
 {% endhighlight %}

-  <h3 id="btn-dropdowns-sizing">Sizing</h3>
+  <h2 id="btn-dropdowns-sizing">Sizing</h2>
  <p>Button dropdowns work with buttons of all sizes.</p>
  <div class="bs-example" data-example-id="button-dropdown-sizing">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
-        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Large button <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
-        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Small button <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
-        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Extra small button <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
@@ -243,64 +243,64 @@
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    ...
  </ul>
 </div>

 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    ...
  </ul>
 </div>

 <!-- Extra small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    ...
  </ul>
 </div>
 {% endhighlight %}

-  <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
+  <h2 id="btn-dropdowns-dropup">Dropup variation</h2>
  <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
  <div class="bs-example" data-example-id="button-dropdown-dropup">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group dropup">
        <button type="button" class="btn btn-default">Dropup</button>
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <div class="btn-group dropup">
        <button type="button" class="btn btn-primary">Right dropup</button>
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
-        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
@@ -309,11 +309,11 @@
 {% highlight html %}
 <div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
 </div>
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
  <h1 id="btn-groups" class="page-header">Button groups</h1>

-  <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
+  <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="{{ site.baseurl }}/javascript/#buttons">our buttons plugin</a>.</p>

  <div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
    <h4>Tooltips &amp; popovers in button groups require special setting</h4>
@@ -15,7 +15,7 @@
    <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
  </div>

-  <h3 id="btn-groups-single">Basic example</h3>
+  <h2 id="btn-groups-single">Basic example</h2>
  <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
  <div class="bs-example" data-example-id="simple-button-group">
    <div class="btn-group" role="group" aria-label="Basic example">
@@ -32,7 +32,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="btn-groups-toolbar">Button toolbar</h3>
+  <h2 id="btn-groups-toolbar">Button toolbar</h2>
  <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
  <div class="bs-example" data-example-id="simple-button-toolbar">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
@@ -60,7 +60,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="btn-groups-sizing">Sizing</h3>
+  <h2 id="btn-groups-sizing">Sizing</h2>
  <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
  <div class="bs-example" data-example-id="button-group-sizing">
    <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
@@ -94,7 +94,7 @@
 <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}

-  <h3 id="btn-groups-nested">Nesting</h3>
+  <h2 id="btn-groups-nested">Nesting</h2>
  <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
  <div class="bs-example" data-example-id="button-group-nesting">
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
@@ -102,11 +102,11 @@
      <button type="button" class="btn btn-default">2</button>

      <div class="btn-group" role="group">
-        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
+        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
@@ -119,11 +119,11 @@
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
-    <ul class="dropdown-menu" role="menu">
+    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
@@ -131,18 +131,18 @@
 </div>
 {% endhighlight %}

-  <h3 id="btn-groups-vertical">Vertical variation</h3>
+  <h2 id="btn-groups-vertical">Vertical variation</h2>
  <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
  <div class="bs-example" data-example-id="vertical-button-group">
    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group" role="group">
-        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
+        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
@@ -150,31 +150,31 @@
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group" role="group">
-        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
+        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
-        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
+        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
-        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
+        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
@@ -187,7 +187,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="btn-groups-justified">Justified button groups</h3>
+  <h2 id="btn-groups-justified">Justified button groups</h2>
  <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>

  <div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
@@ -213,14 +213,14 @@
      <a href="#" class="btn btn-default" role="button">Left</a>
      <a href="#" class="btn btn-default" role="button">Middle</a>
      <div class="btn-group" role="group">
-        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
@@ -1,40 +1,70 @@
 <div class="bs-docs-section">
  <h1 id="dropdowns" class="page-header">Dropdowns</h1>

-  <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
+  <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>

-  <h3 id="dropdowns-example">Example</h3>
+  <h2 id="dropdowns-example">Example</h2>
  <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
  <div class="bs-example" data-example-id="static-dropdown">
    <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
      </ul>
    </div>
  </div><!-- /example -->
 {% highlight html %}
 <div class="dropdown">
-  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
  </ul>
 </div>
 {% endhighlight %}

-  <h3 id="dropdowns-alignment">Alignment</h3>
+  <p>Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
+  <div class="bs-example" data-example-id="static-dropup">
+    <div class="dropup clearfix">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropup
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+      </ul>
+    </div>
+  </div><!-- /example -->
+{% highlight html %}
+<div class="dropup">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropup
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+
+  <h2 id="dropdowns-alignment">Alignment</h2>
  <p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
  <div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
    <h4>May require additional positioning</h4>
@@ -45,82 +75,82 @@
    <p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
  </div>
 {% highlight html %}
-<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
+<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
 </ul>
 {% endhighlight %}

-  <h3 id="dropdowns-headers">Headers</h3>
+  <h2 id="dropdowns-headers">Headers</h2>
  <p>Add a header to label sections of actions in any dropdown menu.</p>
  <div class="bs-example">
    <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
-        <li role="presentation" class="dropdown-header">Dropdown header</li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation" class="dropdown-header">Dropdown header</li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
+        <li class="dropdown-header">Dropdown header</li>
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li class="dropdown-header">Dropdown header</li>
+        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div><!-- /example -->
 {% highlight html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
+<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
-  <li role="presentation" class="dropdown-header">Dropdown header</li>
+  <li class="dropdown-header">Dropdown header</li>
  ...
 </ul>
 {% endhighlight %}

-  <h3 id="dropdowns-divider">Divider</h3>
+  <h2 id="dropdowns-divider">Divider</h2>
  <p>Add a divider to separate series of links in a dropdown menu.</p>
  <div class="bs-example">
    <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li role="separator" class="divider"></li>
+        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div><!-- /example -->
 {% highlight html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
+<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
-  <li role="presentation" class="divider"></li>
+  <li role="separator" class="divider"></li>
  ...
 </ul>
 {% endhighlight %}

-  <h3 id="dropdowns-disabled">Disabled menu items</h3>
+  <h2 id="dropdowns-disabled">Disabled menu items</h2>
  <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
  <div class="bs-example">
    <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
-        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
+        <li><a href="#">Regular link</a></li>
+        <li class="disabled"><a href="#">Disabled link</a></li>
+        <li><a href="#">Another link</a></li>
      </ul>
    </div>
  </div><!-- /example -->
 {% highlight html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
-  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
-  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
+<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
+  <li><a href="#">Regular link</a></li>
+  <li class="disabled"><a href="#">Disabled link</a></li>
+  <li><a href="#">Another link</a></li>
 </ul>
 {% endhighlight %}
 </div>
@@ -2,7 +2,7 @@
  <h1 id="glyphicons" class="page-header">Glyphicons</h1>

  <h2 id="glyphicons-glyphs">Available glyphs</h2>
-  <p>Includes 260 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
+  <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="https://www.glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="https://www.glyphicons.com/">Glyphicons</a> whenever possible.</p>
  <div class="bs-glyphicons">
    <ul class="bs-glyphicons-list">
      {% for iconClassName in site.data.glyphicons %}
@@ -30,7 +30,7 @@
    <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
    <ul>
      <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
-      <li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
+      <li>Utilize the <a href="http://lesscss.org/usage/#less-options-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
      <li>Change the <code>url()</code> paths in the compiled CSS.</li>
    </ul>
    <p>Use whatever option best suits your specific development setup.</p>
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
  <h1 id="input-groups" class="page-header">Input groups</h1>

-  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
+  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.</p>

  <div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
    <h4>Textual <code>&lt;input&gt;</code>s only</h4>
@@ -19,12 +19,12 @@
  <div class="bs-callout bs-callout-warning" id="callout-inputgroup-form-labels">
    <h4>Always add labels</h4>
    <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
-    <p>The exact technique to be used (<code>&lt;label&gt;</code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
+    <p>The exact technique to be used (visible <code>&lt;label&gt;</code> elements, <code>&lt;label&gt;</code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
  </div>

  <h2 id="input-groups-basic">Basic example</h2>
  <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
-  <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
+  <p><strong class="text-danger">We do not support multiple add-ons (<code>.input-group-addon</code> or <code>.input-group-btn</code>) on a single side.</strong></p>
  <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
  <form class="bs-example bs-example-form" data-example-id="simple-input-groups">
    <div class="input-group">
@@ -42,6 +42,12 @@
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon">.00</span>
    </div>
+    <br>
+    <label for="basic-url">Your vanity URL</label>
+    <div class="input-group">
+      <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
+      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+    </div>
  </form>
 {% highlight html %}
 <div class="input-group">
@@ -59,6 +65,12 @@
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
 </div>
+
+<label for="basic-url">Your vanity URL</label>
+<div class="input-group">
+  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
+  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+</div>
 {% endhighlight %}

  <h2 id="input-groups-sizing">Sizing</h2>
@@ -96,7 +108,6 @@
 </div>
 {% endhighlight %}

-
  <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
  <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
  <form class="bs-example bs-example-form" data-example-id="input-group-with-checkbox-radio">
@@ -140,7 +151,6 @@
 </div><!-- /.row -->
 {% endhighlight %}

-
  <h2 id="input-groups-buttons">Button addons</h2>
  <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
  <form class="bs-example bs-example-form" data-example-id="input-group-with-button">
@@ -185,18 +195,17 @@
 {% endhighlight %}

  <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
-  <p></p>
  <form class="bs-example bs-example-form" data-example-id="input-group-dropdowns">
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
-            <ul class="dropdown-menu" role="menu">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
+            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
+              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
@@ -207,12 +216,12 @@
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with dropdown button">
          <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
+            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
+              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
@@ -225,12 +234,12 @@
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu" role="menu">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
@@ -241,12 +250,12 @@
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
@@ -262,15 +271,15 @@
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
-            <ul class="dropdown-menu" role="menu">
+            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
+              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
@@ -282,15 +291,15 @@
          <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu">
+            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
+              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
@@ -312,5 +321,45 @@
    <!-- Button and dropdown menu -->
  </div>
 </div>
+{% endhighlight %}
+
+  <h2 id="input-groups-buttons-multiple">Multiple buttons</h2>
+  <p>While you can only have one add-on per side, you can have multiple buttons inside a single <code>.input-group-btn</code>.</p>
+  <form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons">
+    <div class="row">
+      <div class="col-lg-6">
+        <div class="input-group">
+          <div class="input-group-btn">
+            <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button>
+            <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button>
+          </div>
+          <input type="text" class="form-control" aria-label="Text input with multiple buttons">
+        </div><!-- /.input-group -->
+      </div><!-- /.col-lg-6 -->
+      <div class="col-lg-6">
+        <div class="input-group">
+          <input type="text" class="form-control" aria-label="Text input with multiple buttons">
+          <div class="input-group-btn">
+            <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button>
+            <button type="button" class="btn btn-default">Action</button>
+          </div>
+        </div><!-- /.input-group -->
+      </div><!-- /.col-lg-6 -->
+    </div><!-- /.row -->
+  </form>
+{% highlight html %}
+<div class="input-group">
+  <div class="input-group-btn">
+    <!-- Buttons -->
+  </div>
+  <input type="text" class="form-control" aria-label="...">
+</div>
+
+<div class="input-group">
+  <input type="text" class="form-control" aria-label="...">
+  <div class="input-group-btn">
+    <!-- Buttons -->
+  </div>
+</div>
 {% endhighlight %}
 </div>
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
  <h1 id="labels" class="page-header">Labels</h1>

-  <h3>Example</h3>
+  <h2>Example</h2>
  <div class="bs-example" data-example-id="labels-in-headings">
    <h1>Example heading <span class="label label-default">New</span></h1>
    <h2>Example heading <span class="label label-default">New</span></h2>
@@ -14,7 +14,7 @@
 <h3>Example heading <span class="label label-default">New</span></h3>
 {% endhighlight %}

-  <h3>Available variations</h3>
+  <h2>Available variations</h2>
  <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
  <div class="bs-example" data-example-id="label-variants">
    <span class="label label-default">Default</span>
@@ -3,7 +3,7 @@

  <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>

-  <h3 id="list-group-basic">Basic example</h3>
+  <h2 id="list-group-basic">Basic example</h2>
  <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
  <div class="bs-example" data-example-id="simple-list-group">
    <ul class="list-group">
@@ -24,7 +24,7 @@
 </ul>
 {% endhighlight %}

-  <h3 id="list-group-badges">Badges</h3>
+  <h2 id="list-group-badges">Badges</h2>
  <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
  <div class="bs-example" data-example-id="list-group-badges">
    <ul class="list-group">
@@ -51,7 +51,7 @@
 </ul>
 {% endhighlight %}

-  <h3 id="list-group-linked">Linked items</h3>
+  <h2 id="list-group-linked">Linked items</h2>
  <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
  <div class="bs-example" data-example-id="list-group-anchors">
    <div class="list-group">
@@ -76,7 +76,28 @@
 </div>
 {% endhighlight %}

-  <h3 id="list-group-disabled">Disabled items</h3>
+  <h2 id="list-group-buttons">Button items</h2>
+  <p>List group items may be buttons instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
+  <div class="bs-example" data-example-id="list-group-btns">
+    <div class="list-group">
+      <button type="button" class="list-group-item">Cras justo odio</button>
+      <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
+      <button type="button" class="list-group-item">Morbi leo risus</button>
+      <button type="button" class="list-group-item">Porta ac consectetur ac</button>
+      <button type="button" class="list-group-item">Vestibulum at eros</button>
+    </div>
+  </div>
+{% highlight html %}
+<div class="list-group">
+  <button type="button" class="list-group-item">Cras justo odio</button>
+  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
+  <button type="button" class="list-group-item">Morbi leo risus</button>
+  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
+  <button type="button" class="list-group-item">Vestibulum at eros</button>
+</div>
+{% endhighlight %}
+
+  <h2 id="list-group-disabled">Disabled items</h2>
  <p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
  <div class="bs-example" data-example-id="list-group-disabled">
    <div class="list-group">
@@ -101,7 +122,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="list-group-contextual-classes">Contextual classes</h3>
+  <h2 id="list-group-contextual-classes">Contextual classes</h2>
  <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
  <div class="bs-example" data-example-id="list-group-variants">
    <div class="row">
@@ -138,7 +159,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="list-group-custom-content">Custom content</h3>
+  <h2 id="list-group-custom-content">Custom content</h2>
  <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
  <div class="bs-example" data-example-id="list-group-custom-content">
    <div class="list-group">
@@ -3,7 +3,7 @@

  <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>

-  <h3 id="media-default">Default media</h3>
+  <h2 id="media-default">Default media</h2>
  <p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
  <div class="bs-example" data-example-id="default-media">
    <div class="media">
@@ -82,7 +82,7 @@
 {% endhighlight %}

  <p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
-  <h3 id="media-alignment">Media alignment</h3>
+  <h2 id="media-alignment">Media alignment</h2>
  <p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
  <div class="bs-example" data-example-id="media-alignment">
    <div class="media">
@@ -136,7 +136,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="media-list">Media list</h3>
+  <h2 id="media-list">Media list</h2>
  <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
  <div class="bs-example" data-example-id="media-list">
    <ul class="media-list">
@@ -10,14 +10,14 @@
    <p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
    <ol type="a">
      <li>Reduce the amount or width of navbar items.</li>
-      <li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
+      <li>Hide certain navbar items at certain screen sizes using <a href="{{ site.baseurl }}/css/#responsive-utilities">responsive utility classes</a>.</li>
      <li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
    </ol>
  </div>
  <div class="bs-callout bs-callout-danger" id="callout-navbar-js">
    <h4>Requires JavaScript plugin</h4>
    <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
-    <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
+    <p>The responsive navbar requires the <a href="{{ site.baseurl }}/javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
  </div>
  <div class="bs-callout bs-callout-info" id="callout-navbar-breakpoint">
    <h4>Changing the collapsed mobile navbar breakpoint</h4>
@@ -33,7 +33,7 @@
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -48,19 +48,19 @@
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
-              <ul class="dropdown-menu" role="menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
+                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
-                <li class="divider"></li>
+                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
-          <form class="navbar-form navbar-left" role="search">
+          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
@@ -69,12 +69,12 @@
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
-              <ul class="dropdown-menu" role="menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
+                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
@@ -88,7 +88,7 @@
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
@@ -103,19 +103,19 @@
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
+            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
-            <li class="divider"></li>
+            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
-      <form class="navbar-form navbar-left" role="search">
+      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
@@ -124,12 +124,12 @@
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
+            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
@@ -147,7 +147,7 @@
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
-            <img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC">
+            <img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC">
          </a>
        </div>
      </div>
@@ -173,7 +173,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -182,7 +182,7 @@
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
-          <form class="navbar-form navbar-left" role="search">
+          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
@@ -203,7 +203,7 @@

  <div class="bs-callout bs-callout-warning" id="callout-navbar-mobile-caveats">
    <h4>Mobile device caveats</h4>
-    <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+    <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="{{ site.baseurl }}/getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
  </div>

  <div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels">
@@ -218,7 +218,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -238,7 +238,7 @@

  <div class="bs-callout bs-callout-warning" id="callout-navbar-btn-context">
    <h4>Context-specific usage</h4>
-    <p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code>&lt;a&gt;</code> elements within <code>.navbar-nav</code>.</p>
+    <p>Like the standard <a href="{{ site.baseurl }}/css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code>&lt;a&gt;</code> elements within <code>.navbar-nav</code>.</p>
  </div>

  <h2 id="navbar-text">Text</h2>
@@ -247,7 +247,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -272,7 +272,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -308,7 +308,7 @@
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -352,7 +352,7 @@ body { padding-top: 70px; }
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -397,7 +397,7 @@ body { padding-bottom: 70px; }
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -433,7 +433,7 @@ body { padding-bottom: 70px; }
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -5,7 +5,7 @@

  <div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
    <h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
-    <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
+    <p>For tabs with tabbable areas, you must use the <a href="{{ site.baseurl }}/javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="{{ site.baseurl }}/javascript/#tabs-usage">example markup</a> for further details.</p>
  </div>

  <div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
@@ -49,7 +49,7 @@
 {% endhighlight %}
  <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
  <div class="bs-example" data-example-id="simple-nav-stacked">
-    <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+    <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
@@ -67,7 +67,7 @@
  <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
  <div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
    <h4>Safari and responsive justified navs</h4>
-    <p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
+    <p>As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="{{ site.baseurl }}/examples/justified-nav/">justified nav example</a>.</p>
  </div>
  <div class="bs-example" data-example-id="simple-nav-justified">
    <ul class="nav nav-tabs nav-justified">
@@ -117,7 +117,7 @@


  <h2 id="nav-dropdowns">Using dropdowns</h2>
-  <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
+  <p>Add dropdown menus with a little extra HTML and the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>

  <h3>Tabs with dropdowns</h3>
  <div class="bs-example" data-example-id="nav-tabs-with-dropdown">
@@ -125,14 +125,14 @@
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
@@ -142,10 +142,10 @@
 <ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
-    <ul class="dropdown-menu" role="menu">
+    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
@@ -159,14 +159,14 @@
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
-          <li class="divider"></li>
+          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
@@ -176,10 +176,10 @@
 <ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
-    <ul class="dropdown-menu" role="menu">
+    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
@@ -6,7 +6,7 @@
  <h2 id="pagination-default">Default pagination</h2>
  <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
  <div class="bs-example" data-example-id="simple-pagination">
-    <nav>
+    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
@@ -27,7 +27,7 @@
    </nav>
  </div>
 {% highlight html %}
-<nav>
+<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
@@ -48,10 +48,15 @@
 </nav>
 {% endhighlight %}

+  <div class="bs-callout bs-callout-info" id="callout-pagination-label">
+    <h4>Labelling the pagination component</h4>
+    <p>The pagination component should be wrapped in a <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
+  </div>
+
  <h3>Disabled and active states</h3>
  <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
  <div class="bs-example" data-example-id="disabled-active-pagination">
-    <nav>
+    <nav aria-label="...">
      <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
@@ -64,7 +69,7 @@
   </nav>
  </div>
 {% highlight html %}
-<nav>
+<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
@@ -72,9 +77,9 @@
  </ul>
 </nav>
 {% endhighlight %}
-  <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
+  <p>We recommend that you swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
 {% highlight html %}
-<nav>
+<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
@@ -93,7 +98,7 @@
  <h3>Sizing</h3>
  <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
  <div class="bs-example" data-example-id="pagination-sizing">
-    <nav>
+    <nav aria-label="...">
      <ul class="pagination pagination-lg">
        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li><a href="#">1</a></li>
@@ -104,7 +109,7 @@
        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
    </nav>
-    <nav>
+    <nav aria-label="...">
      <ul class="pagination">
        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li><a href="#">1</a></li>
@@ -115,7 +120,7 @@
        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
    </nav>
-    <nav>
+    <nav aria-label="...">
      <ul class="pagination pagination-sm">
        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li><a href="#">1</a></li>
@@ -128,9 +133,9 @@
    </nav>
  </div>
 {% highlight html %}
-<nav><ul class="pagination pagination-lg">...</ul></nav>
-<nav><ul class="pagination">...</ul></nav>
-<nav><ul class="pagination pagination-sm">...</ul></nav>
+<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
+<nav aria-label="..."><ul class="pagination">...</ul></nav>
+<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
 {% endhighlight %}


@@ -140,7 +145,7 @@
  <h3>Default example</h3>
  <p>By default, the pager centers links.</p>
  <div class="bs-example" data-example-id="simple-pager">
-    <nav>
+    <nav aria-label="...">
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
@@ -148,7 +153,7 @@
    </nav>
  </div>
 {% highlight html %}
-<nav>
+<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
@@ -159,7 +164,7 @@
  <h3>Aligned links</h3>
  <p>Alternatively, you can align each link to the sides:</p>
  <div class="bs-example" data-example-id="aligned-pager-links">
-    <nav>
+    <nav aria-label="...">
      <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
@@ -167,7 +172,7 @@
    </nav>
  </div>
 {% highlight html %}
-<nav>
+<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
@@ -179,7 +184,7 @@
  <h3>Optional disabled state</h3>
  <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
  <div class="bs-example" data-example-id="disabled-pager">
-    <nav>
+    <nav aria-label="...">
      <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
@@ -187,7 +192,7 @@
    </nav>
  </div>
 {% highlight html %}
-<nav>
+<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
@@ -3,7 +3,7 @@

  <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>

-  <h3 id="panels-basic">Basic example</h3>
+  <h2 id="panels-basic">Basic example</h2>
  <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
  <div class="bs-example" data-example-id="simple-panel">
    <div class="panel panel-default">
@@ -20,8 +20,8 @@
 </div>
 {% endhighlight %}

-  <h3 id="panels-heading">Panel with heading</h3>
-  <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
+  <h2 id="panels-heading">Panel with heading</h2>
+  <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading. However, the font sizes of <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> are overridden by <code>.panel-heading</code>.</p>
  <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
  <div class="bs-example" data-example-id="panel-with-heading">
    <div class="panel panel-default">
@@ -57,7 +57,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="panels-footer">Panel with footer</h3>
+  <h2 id="panels-footer">Panel with footer</h2>
  <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
  <div class="bs-example" data-example-id="panel-with-footer">
    <div class="panel panel-default">
@@ -76,7 +76,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="panels-alternatives">Contextual alternatives</h3>
+  <h2 id="panels-alternatives">Contextual alternatives</h2>
  <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
  <div class="bs-example" data-example-id="contextual-panels">
    <div class="panel panel-primary">
@@ -128,7 +128,7 @@
 <div class="panel panel-danger">...</div>
 {% endhighlight %}

-  <h3 id="panels-tables">With tables</h3>
+  <h2 id="panels-tables">With tables</h2>
  <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
  <div class="bs-example" data-example-id="table-within-panel">
    <div class="panel panel-default">
@@ -238,7 +238,7 @@
 {% endhighlight %}


-  <h3 id="panels-list-group">With list groups</h3>
+  <h2 id="panels-list-group">With list groups</h2>
  <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
  <div class="bs-example" data-example-id="panel-with-list-group">
    <div class="panel panel-default">
@@ -8,7 +8,12 @@
    <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
  </div>

-  <h3 id="progress-basic">Basic example</h3>
+  <div class="bs-callout bs-callout-info">
+    <h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4>
+    <p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
+  </div>
+
+  <h2 id="progress-basic">Basic example</h2>
  <p>Default progress bar.</p>
  <div class="bs-example" data-example-id="simple-progress-bar">
    <div class="progress">
@@ -25,7 +30,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="progress-label">With label</h3>
+  <h2 id="progress-label">With label</h2>
  <p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
  <div class="bs-example" data-example-id="progress-bar-with-label">
    <div class="progress">
@@ -68,7 +73,7 @@
 {% endhighlight %}


-  <h3 id="progress-alternatives">Contextual alternatives</h3>
+  <h2 id="progress-alternatives">Contextual alternatives</h2>
  <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
  <div class="bs-example" data-example-id="contextual-progress-bar">
    <div class="progress">
@@ -115,8 +120,8 @@
 </div>
 {% endhighlight %}

-  <h3 id="progress-striped">Striped</h3>
-  <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
+  <h2 id="progress-striped">Striped</h2>
+  <p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p>
  <div class="bs-example" data-example-id="striped-progress-bar">
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
@@ -162,13 +167,13 @@
 </div>
 {% endhighlight %}

-  <h3 id="progress-animated">Animated</h3>
+  <h2 id="progress-animated">Animated</h2>
  <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
  <div class="bs-example" data-example-id="animated-progress-bar">
    <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
    </div>
-    <button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle animation</button>
+    <button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false">Toggle animation</button>
  </div>
 {% highlight html %}
 <div class="progress">
@@ -178,7 +183,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="progress-stacked">Stacked</h3>
+  <h2 id="progress-stacked">Stacked</h2>
  <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
  <div class="bs-example" data-example-id="stacked-progress-bar">
    <div class="progress">
@@ -6,7 +6,7 @@
  <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
  <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
    <div class="embed-responsive embed-responsive-16by9">
-      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
+      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
  </div>
 {% highlight html %}
@@ -1,10 +1,10 @@
 <div class="bs-docs-section">
  <h1 id="thumbnails" class="page-header">Thumbnails</h1>

-  <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
-  <p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
+  <p class="lead">Extend Bootstrap's <a href="{{ site.baseurl }}/css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
+  <p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="https://masonry.desandro.com/">Masonry</a>, <a href="https://isotope.metafizzy.co/">Isotope</a>, or <a href="https://salvattore.js.org/">Salvattore</a>.</p>

-  <h3 id="thumbnails-default">Default example</h3>
+  <h2 id="thumbnails-default">Default example</h2>
  <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
  <div class="bs-example" data-example-id="simple-thumbnails">
    <div class="row">
@@ -41,7 +41,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="thumbnails-custom-content">Custom content</h3>
+  <h2 id="thumbnails-custom-content">Custom content</h2>
  <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
  <div class="bs-example" data-example-id="thumbnails-with-custom-content">
    <div class="row">
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
  <h1 id="wells" class="page-header">Wells</h1>

-  <h3>Default well</h3>
+  <h2>Default well</h2>
  <p>Use the well as a simple effect on an element to give it an inset effect.</p>
  <div class="bs-example" data-example-id="default-well">
    <div class="well">
@@ -11,7 +11,7 @@
 {% highlight html %}
 <div class="well">...</div>
 {% endhighlight %}
-  <h3>Optional classes</h3>
+  <h2>Optional classes</h2>
  <p>Control padding and rounded corners with two optional modifier classes.</p>
  <div class="bs-example" data-example-id="large-well">
    <div class="well well-lg">
@@ -112,7 +112,7 @@

  <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
  <div class="bs-example" data-example-id="block-btns">
-    <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
+    <div class="well center-block" style="max-width: 400px;">
      <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
      <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    </div>
@@ -7,7 +7,7 @@
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
@@ -30,7 +30,7 @@
 <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
@@ -51,7 +51,7 @@
 {% endhighlight %}
  <div class="bs-callout bs-callout-warning" id="callout-formgroup-inputgroup">
    <h4>Don't mix form groups with input groups</h4>
-    <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+    <p>Do not mix form groups directly with <a href="{{ site.baseurl }}/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
  </div>


@@ -97,7 +97,7 @@
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
+        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
@@ -115,7 +115,7 @@
 <form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
+    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
@@ -240,7 +240,7 @@
 {% endhighlight %}
  <div class="bs-callout bs-callout-info" id="callout-xref-input-group">
    <h4>Input groups</h4>
-    <p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
+    <p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="{{ site.baseurl }}/components/#input-groups">check out the input group component</a>.</p>
  </div>

  <h3>Textarea</h3>
@@ -256,7 +256,7 @@

  <h3>Checkboxes and radios</h3>
  <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
-  <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
+  <p>Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <code>&lt;label&gt;</code>, you'll need to add the <code>.disabled</code> class to the parent <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, or <code>.checkbox-inline</code>.</p>
  <h4>Default (stacked)</h4>
  <div class="bs-example" data-example-id="block-checkboxes-radios">
    <form>
@@ -528,7 +528,7 @@


  <h2 id="forms-control-disabled">Disabled state</h2>
-  <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
+  <p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p>
  <div class="bs-example" data-example-id="text-form-control-disabled">
    <form>
      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
@@ -598,7 +598,7 @@


  <h2 id="forms-control-readonly">Readonly state</h2>
-  <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
+  <p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
  <div class="bs-example" data-example-id="readonly-text-form-control">
    <form>
      <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
@@ -609,20 +609,45 @@
 {% endhighlight %}


+  <h2 id="forms-help-text">Help text</h2>
+  <p>Block level help text for form controls.</p>
+  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
+    <h4>Associating help text with form controls</h4>
+    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
+  </div>
+  <div class="bs-example" data-example-id="simple-help-text">
+    <form>
+      <div class="form-group">
+        <label for="inputHelpBlock">Input with help text</label>
+        <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+      </div>
+      <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<label for="inputHelpBlock">Input with help text</label>
+<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+...
+<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+{% endhighlight %}
+</div>
+
+
  <h2 id="forms-control-validation">Validation states</h2>
  <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>

  <div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
-    <h4>Conveying validation state to assistive technologies</h4>
-    <p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
-    <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
+    <h4>Conveying validation state to assistive technologies and colorblind users</h4>
+    <p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p>
+    <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), include a <a href="{{ site.baseurl }}/components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="{{ site.baseurl }}/components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
  </div>

  <div class="bs-example" data-example-id="form-validation-states">
    <form>
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess1">
+        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
+        <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">Input with warning</label>
@@ -661,7 +686,8 @@
 {% highlight html %}
 <div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess1">
+  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
+  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>
 <div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
@@ -702,7 +728,7 @@
  <p><strong class="text-danger">Feedback icons only work with textual <code>&lt;input class="form-control"&gt;</code> elements.</strong></p>
  <div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-positioning">
    <h4>Icons, labels, and input groups</h4>
-    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
+    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="{{ site.baseurl }}/components/#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
  </div>
  <div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-accessibility">
    <h4>Conveying the icon's meaning to assistive technologies</h4>
@@ -1000,26 +1026,3 @@
  </div>
 </div>
 {% endhighlight %}
-
-  <h2 id="forms-help-text">Help text</h2>
-  <p>Block level help text for form controls.</p>
-  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
-    <h4>Associating help text with form controls</h4>
-    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
-  </div>
-  <div class="bs-example" data-example-id="simple-help-text">
-    <form>
-      <div class="form-group">
-        <label for="inputHelpBlock">Input with help text</label>
-        <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
-      </div>
-      <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-    </form>
-  </div><!-- /.bs-example -->
-{% highlight html %}
-<label class="sr-only" for="inputHelpBlock">Input with help text</label>
-<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
-...
-<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-{% endhighlight %}
-</div>
@@ -3,7 +3,7 @@

  <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>

-  <h3 id="grid-intro">Introduction</h3>
+  <h2 id="grid-intro">Introduction</h2>
  <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
  <ul>
    <li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
@@ -18,7 +18,7 @@
  </ul>
  <p>Look to the examples for applying these principles to your code.</p>

-  <h3 id="grid-media-queries">Media queries</h3>
+  <h2 id="grid-media-queries">Media queries</h2>
  <p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
 {% highlight scss %}
 /* Extra small devices (phones, less than 768px) */
@@ -41,7 +41,7 @@
@media (min-width: @screen-lg-min) { ... }
 {% endhighlight %}

-  <h3 id="grid-options">Grid options</h3>
+  <h2 id="grid-options">Grid options</h2>
  <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
@@ -117,36 +117,34 @@
    </table>
  </div>

-  <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
+  <h2 id="grid-example-basic">Example: Stacked-to-horizontal</h2>
  <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-      <div class="col-md-1">.col-md-1</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-md-8">.col-md-8</div>
-      <div class="col-md-4">.col-md-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-md-4">.col-md-4</div>
-      <div class="col-md-4">.col-md-4</div>
-      <div class="col-md-4">.col-md-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-md-6">.col-md-6</div>
-      <div class="col-md-6">.col-md-6</div>
-    </div>
+  <div class="row show-grid">
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+    <div class="col-md-1">.col-md-1</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-8">.col-md-8</div>
+    <div class="col-md-4">.col-md-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-4">.col-md-4</div>
+    <div class="col-md-4">.col-md-4</div>
+    <div class="col-md-4">.col-md-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-6">.col-md-6</div>
+    <div class="col-md-6">.col-md-6</div>
  </div>
 {% highlight html %}
 <div class="row">
@@ -178,7 +176,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-example-fluid">Example: Fluid container</h3>
+  <h2 id="grid-example-fluid">Example: Fluid container</h2>
  <p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
 {% highlight html %}
 <div class="container-fluid">
@@ -188,22 +186,20 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
+  <h2 id="grid-example-mixed">Example: Mobile and desktop</h2>
  <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
-      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-xs-6">.col-xs-6</div>
-      <div class="col-xs-6">.col-xs-6</div>
-    </div>
+  <div class="row show-grid">
+    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-xs-6">.col-xs-6</div>
+    <div class="col-xs-6">.col-xs-6</div>
  </div>
 {% highlight html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
@@ -226,20 +222,18 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3>
+  <h2 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h2>
  <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
-      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
-      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
-      <!-- Optional: clear the XS cols if their content doesn't match in height -->
-      <div class="clearfix visible-xs-block"></div>
-      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
-    </div>
+  <div class="row show-grid">
+    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+    <!-- Optional: clear the XS cols if their content doesn't match in height -->
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  </div>
 {% highlight html %}
 <div class="row">
@@ -255,14 +249,12 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-example-wrapping">Example: Column wrapping</h3>
+  <h2 id="grid-example-wrapping">Example: Column wrapping</h2>
  <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-xs-9">.col-xs-9</div>
-      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
-      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
-    </div>
+  <div class="row show-grid">
+    <div class="col-xs-9">.col-xs-9</div>
+    <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+    <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  </div>
 {% highlight html %}
 <div class="row">
@@ -272,23 +264,21 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-responsive-resets">Responsive column resets</h3>
+  <h2 id="grid-responsive-resets">Responsive column resets</h2>
  <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-xs-6 col-sm-3">
-        .col-xs-6 .col-sm-3
-        <br>
-        Resize your viewport or check it out on your phone for an example.
-      </div>
-      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
-
-      <!-- Add the extra clearfix for only the required viewport -->
-      <div class="clearfix visible-xs-block"></div>
-
-      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
-      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <div class="row show-grid">
+    <div class="col-xs-6 col-sm-3">
+      .col-xs-6 .col-sm-3
+      <br>
+      Resize your viewport or check it out on your phone for an example.
    </div>
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+    <!-- Add the extra clearfix for only the required viewport -->
+    <div class="clearfix visible-xs-block"></div>
+
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  </div>
 {% highlight html %}
 <div class="row">
@@ -302,7 +292,7 @@
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 </div>
 {% endhighlight %}
-  <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
+  <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="{{ site.baseurl }}/examples/grid/">the grid example</a>.</p>
 {% highlight html %}
 <div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
@@ -316,20 +306,50 @@
 {% endhighlight %}


-  <h3 id="grid-offsetting">Offsetting columns</h3>
+  <h2 id="grid-remove-gutters">Remove gutters</h2>
+  <p>Remove the gutters from a row and it's columns with the <code>.row-no-gutters</code> class.</p>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6">.col-xs-6</div>
+    <div class="col-xs-6">.col-xs-6</div>
+  </div>
+{% highlight html %}
+<div class="row row-no-gutters">
+  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+</div>
+{% endhighlight %}
+
+
+  <h2 id="grid-offsetting">Offsetting columns</h2>
  <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
-  <div class="bs-docs-grid">
-    <div class="row show-grid">
-      <div class="col-md-4">.col-md-4</div>
-      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
-      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
-    </div>
-    <div class="row show-grid">
-      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
-    </div>
+  <div class="row show-grid">
+    <div class="col-md-4">.col-md-4</div>
+    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
 {% highlight html %}
 <div class="row">
@@ -345,8 +365,19 @@
 </div>
 {% endhighlight %}

+  <p>You can also override offsets from lower grid tiers with <code>.col-*-offset-0</code> classes.</p>
+{% highlight html %}
+<div class="row">
+  <div class="col-xs-6 col-sm-4">
+  </div>
+  <div class="col-xs-6 col-sm-4">
+  </div>
+  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
+  </div>
+</div>
+{% endhighlight %}

-  <h3 id="grid-nesting">Nesting columns</h3>
+  <h2 id="grid-nesting">Nesting columns</h2>
  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
  <div class="row show-grid">
    <div class="col-sm-9">
@@ -377,7 +408,7 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-column-ordering">Column ordering</h3>
+  <h2 id="grid-column-ordering">Column ordering</h2>
  <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
  <div class="row show-grid">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
@@ -391,10 +422,10 @@
 </div>
 {% endhighlight %}

-  <h3 id="grid-less">Less mixins and variables</h3>
+  <h2 id="grid-less">Less mixins and variables</h2>
  <p>In addition to <a href="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.</p>

-  <h4>Variables</h4>
+  <h3>Variables</h3>
  <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
 {% highlight scss %}
@grid-columns:              12;
@@ -402,7 +433,7 @@
@grid-float-breakpoint:     768px;
 {% endhighlight %}

-  <h4>Mixins</h4>
+  <h3>Mixins</h3>
  <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
 {% highlight scss %}
 // Creates a wrapper for a series of columns
@@ -538,7 +569,7 @@
 }
 {% endhighlight %}

-  <h4>Example usage</h4>
+  <h3>Example usage</h3>
  <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
 {% highlight scss %}
 .wrapper {
@@ -64,7 +64,7 @@


  <h3 id="helper-classes-carets">Carets</h3>
-  <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
+  <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="{{ site.baseurl }}/components/#btn-dropdowns-dropup">dropup menus</a>.</p>
  <div class="bs-example" data-example-id="caret">
    <span class="caret"></span>
  </div>
@@ -99,7 +99,7 @@

  <div class="bs-callout bs-callout-warning" id="callout-helper-pull-navbar">
    <h4>Not for use in navbars</h4>
-    <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
+    <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="{{ site.baseurl }}/components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
  </div>


@@ -109,14 +109,14 @@
 <div class="center-block">...</div>
 {% endhighlight %}
 {% highlight scss %}
-// Classes
+// Class
 .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }

-// Usage as mixins
+// Usage as a mixin
 .element {
  .center-block();
 }
@@ -142,7 +142,7 @@
  }
 }

-// Usage as a Mixin
+// Usage as a mixin
 .element {
  .clearfix();
 }
@@ -164,7 +164,6 @@
 }
 .hidden {
  display: none !important;
-  visibility: hidden !important;
 }
 .invisible {
  visibility: hidden;
@@ -181,12 +180,12 @@


  <h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
-  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
+  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="{{ site.baseurl }}/getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
 {% highlight html %}
 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 {% endhighlight %}
 {% highlight scss %}
-// Usage as a Mixin
+// Usage as a mixin
 .skip-navigation {
  .sr-only();
  .sr-only-focusable();
@@ -199,8 +198,8 @@
 {% highlight html %}
 <h1 class="text-hide">Custom heading</h1>
 {% endhighlight %}
-  {% highlight scss %}
-// Usage as a Mixin
+{% highlight scss %}
+// Usage as a mixin
 .heading {
  .text-hide();
 }
@@ -2,7 +2,8 @@
  <h1 id="images" class="page-header">Images</h1>

  <h2 id="images-responsive">Responsive images</h2>
-  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
+  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
+  <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="{{ site.baseurl }}/css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
  <div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
    <h4>SVG images and IE 8-10</h4>
    <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
@@ -7,11 +7,11 @@


  <h2 id="less-bootstrap">Compiling Bootstrap</h2>
-  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
+  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="{{ site.baseurl }}/getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
  <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>

  <h2 id="less-variables">Variables</h2>
-  <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
+  <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}/customize/#less-variables-section">the Customizer</a>.</p>

  <h3 id="less-variables-colors">Colors</h3>
  <p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
@@ -92,7 +92,7 @@ a {
  <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>

  <h3 id="less-variables-typography">Typography</h3>
-  <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
+  <p>Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
 {% highlight scss %}
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@@ -161,8 +161,8 @@ a {


  <h3 id="less-mixins-box-sizing">Box-sizing</h3>
-  <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
-  <p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
+  <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="noopener" target="_blank">helpful article from Mozilla</a>.</p>
+  <p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
 {% highlight scss %}
 .box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
@@ -205,7 +205,7 @@ a {

  <h3 id="less-mixins-transitions">Transitions</h3>
  <p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
-  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
+  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 {% highlight scss %}
 .transition(@transition) {
  -webkit-transition: @transition;
@@ -237,7 +237,7 @@ a {

  <h3 id="less-mixins-transformations">Transformations</h3>
  <p>Rotate, scale, translate (move), or skew any object.</p>
-  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
+  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 {% highlight scss %}
 .rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
@@ -294,7 +294,7 @@ a {

  <h3 id="less-mixins-animations">Animations</h3>
  <p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
-  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
+  <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 {% highlight scss %}
 .animation(@animation) {
  -webkit-animation: @animation;
@@ -390,7 +390,7 @@ a {
  <p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>

  <h3 id="less-mixins-clearfix">Clearfix</h3>
-  <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>.</p>
+  <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="noopener" target="_blank">micro clearfix</a> from <a href="https://twitter.com/necolas" rel="noopener" target="_blank">Nicolas Gallagher</a>.</p>
 {% highlight scss %}
 // Mixin
 .clearfix() {
@@ -3,16 +3,16 @@

  <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>

-  <h3 id="overview-doctype">HTML5 doctype</h3>
+  <h2 id="overview-doctype">HTML5 doctype</h2>
  <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
 {% highlight html %}
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  ...
 </html>
 {% endhighlight %}

-  <h3 id="overview-mobile">Mobile first</h3>
+  <h2 id="overview-mobile">Mobile first</h2>
  <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
  <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
 {% highlight html %}
@@ -23,7 +23,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 {% endhighlight %}

-  <h3 id="overview-type-links">Typography and links</h3>
+  <h2 id="overview-type-links">Typography and links</h2>
  <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
  <ul>
    <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
@@ -32,10 +32,10 @@
  </ul>
  <p>These styles can be found within <code>scaffolding.less</code>.</p>

-  <h3 id="overview-normalize">Normalize.css</h3>
-  <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
+  <h2 id="overview-normalize">Normalize.css</h2>
+  <p>For improved cross-browser rendering, we use <a href="https://necolas.github.io/normalize.css/" rel="noopener" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" rel="noopener" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" rel="noopener" target="_blank">Jonathan Neal</a>.</p>

-  <h3 id="overview-container">Containers</h3>
+  <h2 id="overview-container">Containers</h2>
  <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>
  <p>Use <code>.container</code> for a responsive fixed width container.</p>
 {% highlight html %}
@@ -357,13 +357,13 @@
  </div>
  <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
    <h4>Firefox and fieldsets</h4>
-    <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
+    <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
 {% highlight css %}
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
 }
 {% endhighlight %}
-    <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
+    <p>For more information, read <a href="https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
  </div>

  <div class="bs-example" data-example-id="simple-responsive-table">
@@ -246,8 +246,8 @@ You can use the mark tag to <mark>highlight</mark> text.
  <div class="bs-example" data-example-id="simple-address">
    <address>
      <strong>Twitter, Inc.</strong><br>
-      795 Folsom Ave, Suite 600<br>
-      San Francisco, CA 94107<br>
+      1355 Market Street, Suite 900<br>
+      San Francisco, CA 94103<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <address>
@@ -258,8 +258,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 {% highlight html %}
 <address>
  <strong>Twitter, Inc.</strong><br>
-  795 Folsom Ave, Suite 600<br>
-  San Francisco, CA 94107<br>
+  1355 Market Street, Suite 900<br>
+  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
 </address>

@@ -1,93 +1,53 @@
 <!-- Footer
 ================================================== -->
-<footer class="bs-docs-footer" role="contentinfo">
+<footer class="bs-docs-footer">
  <div class="container">
-    {% include social-buttons.html %}

-    <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 text-muted">
-      <li>Currently v{{ site.current_version }}</li>
-      <li>&middot;</li>
+    <ul class="bs-docs-footer-links">
      <li><a href="{{ site.repo }}">GitHub</a></li>
-      <li>&middot;</li>
-      <li><a href="../getting-started/#examples">Examples</a></li>
-      <li>&middot;</li>
-      <li><a href="../2.3.2/">v2.3.2 docs</a></li>
-      <li>&middot;</li>
-      <li><a href="../about/">About</a></li>
-      <li>&middot;</li>
-      <li><a href="{{ site.expo }}">Expo</a></li>
-      <li>&middot;</li>
-      <li><a href="{{ site.blog }}">Blog</a></li>
-      <li>&middot;</li>
-      <li><a href="{{ site.repo }}/issues">Issues</a></li>
-      <li>&middot;</li>
-      <li><a href="{{ site.repo }}/releases">Releases</a></li>
+      <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
+      <li><a href="{{ site.baseurl }}/getting-started/#examples">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/about/">About</a></li>
    </ul>
+
+    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" rel="noopener" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" rel="noopener" target="_blank">@fat</a>. 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 <a href="https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE" rel="license noopener" target="_blank">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" rel="license noopener" target="_blank">CC BY 3.0</a>.</p>
+
  </div>
 </footer>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>

 {% if site.github %}
-  <script src="../dist/js/bootstrap.min.js"></script>
+  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
 {% else %}
-  <script src="../dist/js/bootstrap.js"></script>
+  <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
+{% endif %}
+
+{% if page.layout == "default" %}
+<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 {% endif %}

 {% if site.github %}
-  <script src="../assets/js/docs.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
 {% else %}
  {% for file in site.data.configBridge.paths.docsJs %}
-  <script src="{{ file }}"></script>
+  <script src="{{ file | replace_first: '..', site.baseurl }}"></script>
  {% endfor %}
 {% endif %}

 {% if page.slug == "customize" %}
  <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script>
  {% if site.github %}
-    <script src="../assets/js/customize.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/customize.min.js"></script>
  {% else %}
    {% for file in site.data.configBridge.paths.customizerJs %}
-    <script src="{{ file }}"></script>
+    <script src="{{ file | replace_first: '..', site.baseurl }}"></script>
    {% endfor %}
  {% endif %}
 {% endif %}
-
-<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
-
-{% comment %}
-  Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
-  JS interface site: https://dev.twitter.com/docs/tfw-javascript
-
-  * "js.async=1;" added to add async attribute to the generated script tag.
-{% endcomment %}
-<script>
-  window.twttr = (function (d,s,id) {
-    var t, js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
-    js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
-    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
-  }(document, "script", "twitter-wjs"));
-</script>
-
-<!-- Analytics
-================================================== -->
-<script>
-  var _gauges = _gauges || [];
-  (function() {
-    var t   = document.createElement('script');
-    t.async = true;
-    t.id    = 'gauges-tracker';
-    t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
-    t.src = '//secure.gaug.es/track.js';
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(t, s);
-  })();
-</script>
@@ -2,31 +2,36 @@
  <h1 id="accessibility" class="page-header">Accessibility</h1>
  <p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>

-  <h3>Skip navigation</h3>
-  <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a>. Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
+  <h2>Skip navigation</h2>
+  <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation (for a simple explanation, see this <a href="https://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
+  <div class="bs-callout bs-callout-danger" id="callout-skiplinks">
+    <p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
+    <p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
+    <p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
+  </div>
 {% highlight html %}
 <body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
-  <div class="container" id="content">
+  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
 </body>
 {% endhighlight %}

-  <h3>Nested headings</h3>
+  <h2>Nested headings</h2>
  <p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> such that screen readers can construct a table of contents for your pages.</p>
-  <p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
+  <p>Learn more at <a href="https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings/">Penn State's AccessAbility</a>.</p>

-  <h3>Color contrast</h3>
-  <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="../css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
+  <h2>Color contrast</h2>
+  <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="{{ site.baseurl }}/css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="{{ site.baseurl }}/css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="{{ site.baseurl }}/css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>

-  <h3>Additional resources</h3>
+  <h2>Additional resources</h2>
  <ul>
    <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
    <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
-    <li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
-    <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
-    <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
+    <li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
+    <li><a href="https://a11yproject.com/">The A11Y Project</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
  </ul>
 </div>
@@ -2,8 +2,44 @@
  <h1 id="support" class="page-header">Browser and device support</h1>
  <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>

-  <h3 id="support-browsers">Supported browsers</h3>
-  <p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms. On Windows, <strong>we support Internet Explorer 8-11</strong>. More specific support information is provided below.</p>
+  <h2 id="support-browsers">Supported browsers</h2>
+  <p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms.</p>
+
+  <p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
+
+  <h3 id="mobile-devices">Mobile devices</h3>
+  <p>Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.</p>
+
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <td></td>
+          <th>Chrome</th>
+          <th>Firefox</th>
+          <th>Safari</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">Android</th>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <th scope="row">iOS</th>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <h3 id="desktop-browsers">Desktop browsers</h3>
+  <p>Similarly, the latest versions of most desktop browsers are supported.</p>
+
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
@@ -18,24 +54,10 @@
      </thead>
      <tbody>
        <tr>
-          <th scope="row">Android</th>
+          <th scope="row">Mac</th>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
-          <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
-          <td class="text-muted">N/A</td>
-        </tr>
-        <tr>
-          <th scope="row">iOS</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-muted">N/A</td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
-        </tr>
-        <tr>
-          <th scope="row">Mac OS X</th>
-          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
-          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
        </tr>
@@ -45,15 +67,20 @@
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
+          <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
        </tr>
      </tbody>
    </table>
  </div>
-  <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
-  <p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="../browser-bugs/">Wall of browser bugs</a>.</p>

-  <h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
+  <p>On Windows, <strong>we support Internet Explorer 8-11</strong>.</p>
+
+  <p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/organizations/">Extended Support Release (ESR)</a> version of Firefox.</p>
+
+  <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.</p>
+  <p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="{{ site.baseurl }}/browser-bugs/">Wall of browser bugs</a>.</p>
+
+  <h2 id="support-ie8-ie9">Internet Explorer 8 and 9</h2>
  <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
@@ -92,47 +119,47 @@
    </table>
  </div>

-  <p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
+  <p>Visit <a href="https://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>

-  <h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
+  <h2 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h2>
  <p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
-  <h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
+  <h3 id="respond-js-x-domain">Respond.js and cross-domain CSS</h3>
  <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
-  <h4 id="respond-file-proto">Respond.js and <code>file://</code></h4>
+  <h3 id="respond-file-proto">Respond.js and <code>file://</code></h3>
  <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
-  <h4 id="respond-import">Respond.js and <code>@import</code></h4>
+  <h3 id="respond-import">Respond.js and <code>@import</code></h3>
  <p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>

-  <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
+  <h2 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h2>
  <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>

-  <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
+  <h2 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h2>
  <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>

-  <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
+  <h2 id="support-ie-compatibility-modes">IE Compatibility modes</h2>
  <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
 {% highlight html %}
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
  <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
  <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
-  <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
+  <p>See <a href="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">this StackOverflow question</a> for more information.</p>

-  <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
+  <h2 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
  <p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
 {% highlight scss %}
@-ms-viewport       { width: device-width; }
 {% endhighlight %}
-  <p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
+  <p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
 {% highlight scss %}
-@-webkit-viewport   { width: device-width; }
-@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
 {% endhighlight %}

 {% highlight js %}
+// Copyright 2014-2019 Twitter, Inc.
+// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
 if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
@@ -143,48 +170,53 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  document.querySelector('head').appendChild(msViewportStyle)
 }
 {% endhighlight %}
-  <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
+  <p>For more information and usage guidelines, read <a href="https://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
  <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>

-  <h3 id="support-safari-percentages">Safari percent rounding</h3>
+  <h2 id="support-safari-percentages">Safari percent rounding</h2>
  <p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p>
  <ul>
    <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
    <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
  </ul>

-  <h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3>
-  <h4>Overflow and scrolling</h4>
-  <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
-  <h4>Virtual keyboards</h4>
+  <h2 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h2>
+  <h3>Overflow and scrolling</h3>
+  <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
+  <h3>iOS text fields and scrolling</h3>
+  <p>As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code>&lt;input&gt;</code> or a <code>&lt;textarea&gt;</code>, the <code>&lt;body&gt;</code> content underneath the modal will be scrolled instead of the modal itself. See <a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
+  <h3>Virtual keyboards</h3>
  <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
-  <h4>Navbar Dropdowns</h4>
+  <h3>Navbar Dropdowns</h3>
  <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>

-  <h3 id="support-browser-zooming">Browser zooming</h3>
+  <h2 id="support-browser-zooming">Browser zooming</h2>
  <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>

-  <h3 id="support-printing">Printing</h3>
+  <h2 id="support-sticky-hover-mobile">Sticky <code>:hover</code>/<code>:focus</code> on mobile</h2>
+  <p>Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make <code>:hover</code> "sticky". In other words, <code>:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's <code>:hover</code> states to become undesirably "stuck" on such browsers. Some mobile browsers also make <code>:focus</code> similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.</p>
+
+  <h2 id="support-printing">Printing</h2>
  <p>Even in some modern browsers, printing can be quirky.</p>
-  <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
+  <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See issue #12078</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=273306">Chrome bug #273306</a> for some details. Suggested workarounds:</p>
  <ul>
    <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
    <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
    <li>Add custom media queries to change the grid size breakpoints for print media only.</li>
  </ul>
-  <p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
-  {% highlight css %}
+  <p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a> for more details. One potential workaround for this is adding the following CSS:</p>
+{% highlight css %}
@media print {
  .container {
    width: auto;
  }
 }
-  {% endhighlight %}
+{% endhighlight %}

-  <h3 id="support-android-stock-browser">Android stock browser</h3>
+  <h2 id="support-android-stock-browser">Android stock browser</h2>
  <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
-  <h4>Select menus</h4>
-  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
+  <h3>Select menus</h3>
+  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
 {% highlight html %}
 <script>
 $(function () {
@@ -196,9 +228,9 @@ $(function () {
 })
 </script>
 {% endhighlight %}
-  <p>Want to see an example? <a href="http://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
+  <p>Want to see an example? <a href="http://output.jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>

-  <h3 id="support-validators">Validators</h3>
+  <h2 id="support-validators">Validators</h2>
  <p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
  <p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
  <p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
@@ -3,10 +3,11 @@

  <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
  <ul>
-    <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
+    <li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
    <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
-    <li>For help using Bootstrap, ask on <a href="http://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
-    <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
+    <li>For help using Bootstrap, ask on <a href="https://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
+    <li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
+    <li>Find inspiring examples of people building with Bootstrap at the <a href="https://expo.getbootstrap.com/">Bootstrap Expo</a>.</li>
  </ul>
-  <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
+  <p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
 </div>
@@ -2,11 +2,11 @@
  <h1 id="disable-responsive" class="page-header">Disabling responsiveness</h1>

  <p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
-    Here's how to disable this feature so your page works like <a href="../examples/non-responsive/">this non-responsive example</a>.</p>
+    Here's how to disable this feature so your page works like <a href="{{ site.baseurl }}/examples/non-responsive/">this non-responsive example</a>.</p>

-  <h3>Steps to disable page responsiveness</h3>
+  <h2>Steps to disable page responsiveness</h2>
  <ol>
-    <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
+    <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="{{ site.baseurl }}/css/#overview-mobile">the CSS docs</a></li>
    <li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
    <li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
    <li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
@@ -14,9 +14,9 @@
  <p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
    This disables the "mobile site" aspects of Bootstrap.</p>

-  <h3>Bootstrap template with responsiveness disabled</h3>
+  <h2>Bootstrap template with responsiveness disabled</h2>
  <p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
  <p>
-    <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
+    <a href="{{ site.baseurl }}/examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
  </p>
 </div>
@@ -8,52 +8,56 @@
      <h3 id="download-bootstrap">Bootstrap</h3>
      <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
      <p>
-        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
+        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
      </p>
    </div>
    <div class="col-sm-4">
      <h3 id="download-source">Source code</h3>
      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
      <p>
-        <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+        <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
      </p>
    </div>
    <div class="col-sm-4">
      <h3 id="download-sass">Sass</h3>
      <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
      <p>
-        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
+        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
      </p>
    </div>
  </div>

-  <h3 id="download-cdn">Bootstrap CDN</h3>
-  <p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
+  <h2 id="download-cdn">BootstrapCDN</h2>
+  <p>The folks over at <a href="https://www.stackpath.com/">StackPath</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> links.</p>
 {% highlight html %}
 <!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="{{ site.cdn.css }}">
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">

 <!-- Optional theme -->
-<link rel="stylesheet" href="{{ site.cdn.css_theme }}">
+<link rel="stylesheet" href="{{ site.cdn.css_theme }}" integrity="{{ site.cdn.css_theme_hash }}" crossorigin="anonymous">

 <!-- Latest compiled and minified JavaScript -->
-<script src="{{ site.cdn.js }}"></script>
+<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}

-  <h3 id="download-bower">Install with Bower</h3>
-  <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>:</p>
-  {% highlight bash %}$ bower install bootstrap{% endhighlight %}
+  <h2 id="download-bower">Install with Bower</h2>
+  <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://bower.io/">Bower</a>:</p>
+  {% highlight bash %}bower install bootstrap{% endhighlight %}

-  <h3 id="download-npm">Install with npm</h3>
-  <p>You can also install Bootstrap using <a href="https://www.npmjs.com">npm</a>:</p>
-  {% highlight bash %}$ npm install bootstrap{% endhighlight %}
+  <h2 id="download-npm">Install with npm</h2>
+  <p>You can also install Bootstrap using <a href="https://www.npmjs.com/">npm</a>:</p>
+  {% highlight bash %}npm install bootstrap@3{% endhighlight %}
  <p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p>
  <p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p>
  <ul>
-    <li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org">Less</a> source file</li>
+    <li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org/">Less</a> source file</li>
    <li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
  </ul>

-  <h3 id="download-autoprefixer">Autoprefixer required for Less/Sass</h3>
-  <p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
+  <h2 id="download-composer">Install with Composer</h2>
+  <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org/">Composer</a>:</p>
+  {% highlight bash %}composer require twbs/bootstrap{% endhighlight %}
+
+  <h2 id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
+  <p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="https://www.lifewire.com/css-vendor-prefixes-3466867">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
 </div>
@@ -3,156 +3,158 @@

  <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>

-  <h3 id="examples-framework">Using the framework</h3>
+  <p>Get the source code for every example below by <a href="{{ site.download.source }}">downloading the Bootstrap repository</a>. Examples can be found in the <code>docs/examples/</code> directory.</p>
+
+  <h2 id="examples-framework">Using the framework</h2>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/starter-template/">
-        <img src="../examples/screenshots/starter-template.jpg" alt="Starter template example">
+        <img src="../examples/screenshots/starter-template.jpg" alt="Starter template example" width="800" height="600">
      </a>
-      <h4>Starter template</h4>
+      <h3>Starter template</h3>
      <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/theme/">
-        <img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example">
+        <img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example" width="800" height="600">
      </a>
-      <h4>Bootstrap theme</h4>
+      <h3>Bootstrap theme</h3>
      <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/grid/">
-        <img src="../examples/screenshots/grid.jpg" alt="Multiple grids example">
+        <img src="../examples/screenshots/grid.jpg" alt="Multiple grids example" width="800" height="600">
      </a>
-      <h4>Grids</h4>
+      <h3>Grids</h3>
      <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/jumbotron/">
-        <img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example">
+        <img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example" width="800" height="600">
      </a>
-      <h4>Jumbotron</h4>
+      <h3>Jumbotron</h3>
      <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/jumbotron-narrow/">
-        <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example">
+        <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example" width="800" height="600">
      </a>
-      <h4>Narrow jumbotron</h4>
+      <h3>Narrow jumbotron</h3>
      <p>Build a more custom page by narrowing the default container and jumbotron.</p>
    </div>
  </div>

-  <h3 id="examples-navbars">Navbars in action</h3>
+  <h2 id="examples-navbars">Navbars in action</h2>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar/">
-        <img src="../examples/screenshots/navbar.jpg" alt="Navbar example">
+        <img src="../examples/screenshots/navbar.jpg" alt="Navbar example" width="800" height="600">
      </a>
-      <h4>Navbar</h4>
+      <h3>Navbar</h3>
      <p>Super basic template that includes the navbar along with some additional content.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar-static-top/">
-        <img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example">
+        <img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example" width="800" height="600">
      </a>
-      <h4>Static top navbar</h4>
+      <h3>Static top navbar</h3>
      <p>Super basic template with a static top navbar along with some additional content.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar-fixed-top/">
-        <img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example">
+        <img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example" width="800" height="600">
      </a>
-      <h4>Fixed navbar</h4>
+      <h3>Fixed navbar</h3>
      <p>Super basic template with a fixed top navbar along with some additional content.</p>
    </div>
  </div>

-  <h3 id="examples-custom">Custom components</h3>
+  <h2 id="examples-custom">Custom components</h2>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/cover/">
-        <img src="../examples/screenshots/cover.jpg" alt="A one-page template example">
+        <img src="../examples/screenshots/cover.jpg" alt="A one-page template example" width="800" height="600">
      </a>
-      <h4>Cover</h4>
+      <h3>Cover</h3>
      <p>A one-page template for building simple and beautiful home pages.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/carousel/">
-        <img src="../examples/screenshots/carousel.jpg" alt="Carousel example">
+        <img src="../examples/screenshots/carousel.jpg" alt="Carousel example" width="800" height="600">
      </a>
-      <h4>Carousel</h4>
+      <h3>Carousel</h3>
      <p>Customize the navbar and carousel, then add some new components.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/blog/">
-        <img src="../examples/screenshots/blog.jpg" alt="Blog layout example">
+        <img src="../examples/screenshots/blog.jpg" alt="Blog layout example" width="800" height="600">
      </a>
-      <h4>Blog</h4>
+      <h3>Blog</h3>
      <p>Simple two-column blog layout with custom navigation, header, and type.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/dashboard/">
-        <img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example">
+        <img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example" width="800" height="600">
      </a>
-      <h4>Dashboard</h4>
+      <h3>Dashboard</h3>
      <p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/signin/">
-        <img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example">
+        <img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example" width="800" height="600">
      </a>
-      <h4>Sign-in page</h4>
+      <h3>Sign-in page</h3>
      <p>Custom form layout and design for a simple sign in form.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/justified-nav/">
-        <img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example">
+        <img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example" width="800" height="600">
      </a>
-      <h4>Justified nav</h4>
-      <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
+      <h3>Justified nav</h3>
+      <p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}/components/#nav-justified">Not too Safari friendly.</a></p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/sticky-footer/">
-        <img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example">
+        <img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example" width="800" height="600">
      </a>
-      <h4>Sticky footer</h4>
+      <h3>Sticky footer</h3>
      <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/sticky-footer-navbar/">
-        <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example">
+        <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example" width="800" height="600">
      </a>
-      <h4>Sticky footer with navbar</h4>
+      <h3>Sticky footer with navbar</h3>
      <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
    </div>
  </div>

-  <h3 id="examples-experiments">Experiments</h3>
+  <h2 id="examples-experiments">Experiments</h2>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/non-responsive/">
-        <img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example">
+        <img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example" width="800" height="600">
      </a>
-      <h4>Non-responsive Bootstrap</h4>
+      <h3>Non-responsive Bootstrap</h3>
      <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/offcanvas/">
-        <img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example">
+        <img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example" width="800" height="600">
      </a>
-      <h4>Offcanvas</h4>
+      <h3>Off-canvas</h3>
      <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
    </div>
  </div>
@@ -1,15 +1,15 @@
 <div class="bs-docs-section">
  <h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>

-  <p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
+  <p class="lead">Bootstrap uses <a href="https://gruntjs.com/">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>

  <h2 id="grunt-installing">Installing Grunt</h2>
-  <p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
+  <p>To install Grunt, you must <strong>first <a href="https://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="https://www.npmjs.com/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>

  Then, from the command line:
  <ol>
    <li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
-    <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
+    <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/v3-dev/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
  </ol>

  <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
@@ -22,13 +22,13 @@
  <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>

  <h3><code>grunt test</code> (Run tests)</h3>
-  <p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p>
+  <p>Runs <a href="https://jshint.com/">JSHint</a> and runs the <a href="https://qunitjs.com/">QUnit</a> tests in real browsers thanks to <a href="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>

  <h3><code>grunt docs</code> (Build &amp; test the docs assets)</h3>
-  <p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>jekyll serve</code>.</p>
+  <p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>bundle exec jekyll serve</code>.</p>

  <h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
-  <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="http://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
+  <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="https://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>

  <h2 id="grunt-troubleshooting">Troubleshooting</h2>
  <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
@@ -2,12 +2,12 @@
  <h1 id="license-faqs" class="page-header">License FAQs</h1>
  <p class="lead">Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>

-  <h4>It requires you to:</h4>
+  <h2>It requires you to:</h2>
  <ul>
-    <li>Include the license and copyright notice in your works</li>
+    <li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li>
  </ul>

-  <h4>It permits you to:</h4>
+  <h2>It permits you to:</h2>
  <ul>
    <li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
    <li>Use Bootstrap in packages or distributions that you create</li>
@@ -15,7 +15,7 @@
    <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
  </ul>

-  <h4>It forbids you to:</h4>
+  <h2>It forbids you to:</h2>
  <ul>
    <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
    <li>Hold the creators or copyright holders of Bootstrap liable</li>
@@ -24,11 +24,11 @@
    <li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
  </ul>

-  <h4>It does not require you to:</h4>
+  <h2>It does not require you to:</h2>
  <ul>
    <li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
    <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
  </ul>

-  <p>The full Bootstrap license is located <a href="{{ site.repo }}/blob/master/LICENSE">in the project repository</a> for more information.</p>
+  <p>The full Bootstrap license is located <a href="{{ site.repo }}/blob/v3-dev/LICENSE">in the project repository</a> for more information.</p>
 </div>
@@ -5,21 +5,22 @@

  <p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
 {% highlight html %}
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
@@ -27,9 +28,9 @@
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="js/bootstrap.min.js"></script>
+    <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
  </body>
 </html>
 {% endhighlight %}
@@ -2,8 +2,8 @@
  <h1 id="third-parties" class="page-header">Third party support</h1>
  <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>

-  <h3 id="third-box-sizing">Box-sizing</h3>
-  <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
+  <h2 id="third-box-sizing">Box-sizing</h2>
+  <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
  <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
 {% highlight scss %}
 /* Box-sizing resets
@@ -2,5 +2,5 @@
  <h1 id="tools" class="page-header">Tools</h1>

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

  <div class="bs-callout bs-callout-warning" id="jquery-required">
    <h4>jQuery required</h4>
-    <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
+    <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v3-dev/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
  </div>

  <h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
  <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
 <!-- NOTE: This info is intentionally duplicated in the README.
 Copy any changes made here over to the README too. -->
-{% highlight bash %}
+{% highlight text %}
 bootstrap/
 ├── css/
 │   ├── bootstrap.css
 │   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
+│   ├── bootstrap.min.css.map
 │   ├── bootstrap-theme.css
 │   ├── bootstrap-theme.css.map
-│   └── bootstrap-theme.min.css
+│   ├── bootstrap-theme.min.css
+│   └── bootstrap-theme.min.css.map
 ├── js/
 │   ├── bootstrap.js
 │   └── bootstrap.min.js
@@ -33,11 +35,11 @@ bootstrap/
 {% endhighlight %}
 <!-- NOTE: This info is intentionally duplicated in the README.
 Copy any changes made here over to the README too. -->
-  <p>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 (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developers.google.com/chrome-developer-tools/docs/css-preprocessors">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
+  <p>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 (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>

  <h2 id="whats-included-source">Bootstrap source code</h2>
  <p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:</p>
-{% highlight bash %}
+{% highlight text %}
 bootstrap/
 ├── less/
 ├── js/
@@ -2,57 +2,62 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
-<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

 <title>
-  {% if page.layout == "home" %}
-    {{ page.title }}
-  {% else %}
-    {{ page.title }} &middot; Bootstrap
-  {% endif %}
+  {%- if page.title -%}
+    {{ page.title | smartify }} · {{ site.title | smartify }}
+  {%- else -%}
+    {{ site.title | smartify }} · {{ site.description | smartify }}
+  {%- endif -%}
 </title>

+<link rel="canonical" href="{{ site.url | append: site.baseurl | append: page.url }}">
+
 <!-- Bootstrap core CSS -->
 {% if site.github %}
-<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
 {% else %}
-<link href="../dist/css/bootstrap.css" rel="stylesheet">
+  <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
 {% endif %}
+
 {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
  <!-- Optional Bootstrap Theme -->
-{% if site.github %}
-  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-{% else %}
-  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+  {% if site.github %}
+    <link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+  {% else %}
+    <link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}/dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+  {% endif %}
 {% endif %}
+
+{% if page.layout == "default" %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
 {% endif %}

 <!-- Documentation extras -->
 {% if site.github %}
-<link href="../assets/css/docs.min.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 {% else %}
-<link href="../assets/css/src/docs.css" rel="stylesheet">
-<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/docs.css" rel="stylesheet">
 {% endif %}
-<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
-<script src="../assets/js/ie-emulation-modes-warning.js"></script>
+<!--[if lt IE 9]><script src="{{ site.baseurl }}/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

 <!-- Favicons -->
-<link rel="apple-touch-icon" href="/apple-touch-icon.png">
-<link rel="icon" href="/favicon.ico">
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">

 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
 </script>
@@ -2,15 +2,16 @@
  <h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>

  <h2 id="affix-examples">Example</h2>
-  <p>The subnavigation on the right is a live demo of the affix plugin.</p>
+  <p>The affix plugin toggles <code>position: fixed;</code> on and off, emulating the effect found with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning"><code>position: sticky;</code></a>. The subnavigation on the right is a live demo of the affix plugin.</p>

  <hr class="bs-docs-separator">

  <h2 id="affix-usage">Usage</h2>
  <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
+  <p>Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a <a href="https://github.com/twbs/bootstrap/issues/12126">Safari rendering bug</a>.</p>

  <h3>Positioning via CSS</h3>
-  <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
+  <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles, with the exception of <code>position: fixed;</code> on <code>.affix</code>, for these classes yourself (independent of this plugin) to handle the actual positions.</p>
  <p>Here's how the affix plugin works:</p>
  <ol>
    <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
@@ -46,12 +47,12 @@ $('#myAffix').affix({
  <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-top="200"</code>.</p>

  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 100px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
         <th>description</th>
       </tr>
      </thead>
@@ -73,6 +74,19 @@ $('#myAffix').affix({
    </table>
  </div><!-- /.table-responsive -->

+  <h3 id="affix-methods">Methods</h3>
+
+  <h4><code>.affix(options)</code></h4>
+  <p>Activates your content as affixed content. Accepts an optional options <code>object</code>.</p>
+{% highlight js %}
+$('#myAffix').affix({
+  offset: 15
+})
+{% endhighlight %}
+
+  <h4><code>.affix('checkPosition')</code></h4>
+  <p>Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code> classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.</p>
+  {% highlight js %}$('#myAffix').affix('checkPosition'){% endhighlight %}

  <h3 id="affix-events">Events</h3>
  <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p>
@@ -80,7 +94,7 @@ $('#myAffix').affix({
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
        <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -36,10 +36,10 @@

  <h3 id="alerts-methods">Methods</h3>

-  <h4>$().alert()</h4>
+  <h4><code>$().alert()</code></h4>
  <p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>

-  <h4>$().alert('close')</h4>
+  <h4><code>$().alert('close')</code></h4>
  <p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p>


@@ -49,7 +49,7 @@
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
        <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -10,17 +10,18 @@

  <h2 id="buttons-stateful">Stateful</h2>
  <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
+  <p><strong class="text-danger">This feature is deprecated since v3.3.5 and has been removed in v4.</strong></p>
  <div class="bs-callout bs-callout-info" id="callout-buttons-state-names">
    <h4>Use whichever state you like!</h4>
    <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
  </div>
  <div class="bs-example">
-    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
+    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
      Loading state
    </button>
  </div><!-- /example -->
 {% highlight html %}
-<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
 </button>

@@ -40,12 +41,12 @@
    <p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
  </div>
  <div class="bs-example">
-    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
      Single toggle
    </button>
  </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
 </button>
 {% endhighlight %}
@@ -63,26 +64,26 @@
  <div class="bs-example" data-example-id="buttons-checkbox">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
-        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
+        <input type="checkbox" checked> Checkbox 1 (pre-checked)
      </label>
      <label class="btn btn-primary">
-        <input type="checkbox" autocomplete="off"> Checkbox 2
+        <input type="checkbox"> Checkbox 2
      </label>
      <label class="btn btn-primary">
-        <input type="checkbox" autocomplete="off"> Checkbox 3
+        <input type="checkbox"> Checkbox 3
      </label>
    </div>
  </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
-    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
+    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Checkbox 2
+    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Checkbox 3
+    <input type="checkbox"> Checkbox 3
  </label>
 </div>
 {% endhighlight %}
@@ -90,42 +91,42 @@
  <div class="bs-example" data-example-id="buttons-radio">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
-        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
+        <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
      </label>
      <label class="btn btn-primary">
-        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
+        <input type="radio" name="options" id="option2"> Radio 2
      </label>
      <label class="btn btn-primary">
-        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
+        <input type="radio" name="options" id="option3"> Radio 3
      </label>
    </div>
  </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
+    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
+    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
+    <input type="radio" name="options" id="option3"> Radio 3
  </label>
 </div>
 {% endhighlight %}

  <h2 id="buttons-methods">Methods</h2>
-
-  <h4>$().button('toggle')</h4>
+  <h4><code>$().button('toggle')</code></h4>
  <p>Toggles push state. Gives the button the appearance that it has been activated.</p>

-  <h4>$().button('reset')</h4>
-  <p>Resets button state - swaps text to original text.</p>
+  <h4><code>$().button('reset')</code></h4>
+  <p>Resets button state - swaps text to original text. <strong>This method is asynchronous and returns before the resetting has actually completed.</strong></p>

-  <h4>$().button(string)</h4>
+  <h4><code>$().button(string)</code></h4>
  <p>Swaps text to any data defined text state.</p>
+
 {% highlight html %}
-<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
+<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
 </button>

@@ -85,6 +85,11 @@
    <p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
  </div>

+  <div class="bs-callout bs-callout-info" id="callout-carousel-without-glyphicons">
+    <h4>Glyphicon icons not necessary</h4>
+    <p>The <code>.glyphicon .glyphicon-chevron-left</code> and <code>.glyphicon .glyphicon-chevron-right</code> classes are not necessarily needed for the controls. Bootstrap provides <code>.icon-prev</code> and <code>.icon-next</code> as plain unicode alternatives.</p>
+  </div>
+
  <h3>Optional captions</h3>
  <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
  <div class="bs-example" data-example-id="carousel-with-captions">
@@ -110,7 +115,7 @@
          </div>
        </div>
        <div class="item">
-          <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
+          <img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
          <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -155,12 +160,12 @@ $('.carousel').carousel()
  <h3 id="carousel-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-interval=""</code>.</p>
  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
         <th>description</th>
       </tr>
      </thead>
@@ -173,9 +178,9 @@ $('.carousel').carousel()
       </tr>
       <tr>
         <td>pause</td>
-         <td>string</td>
+         <td>string | null</td>
         <td>"hover"</td>
-         <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
+         <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td>
       </tr>
       <tr>
         <td>wrap</td>
@@ -195,7 +200,7 @@ $('.carousel').carousel()

  <h3 id="carousel-methods">Methods</h3>

-  <h4>.carousel(options)</h4>
+  <h4><code>.carousel(options)</code></h4>
  <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
 {% highlight js %}
 $('.carousel').carousel({
@@ -203,20 +208,20 @@ $('.carousel').carousel({
 })
 {% endhighlight %}

-  <h4>.carousel('cycle')</h4>
+  <h4><code>.carousel('cycle')</code></h4>
  <p>Cycles through the carousel items from left to right.</p>

-  <h4>.carousel('pause')</h4>
+  <h4><code>.carousel('pause')</code></h4>
  <p>Stops the carousel from cycling through items.</p>


-  <h4>.carousel(number)</h4>
+  <h4><code>.carousel(number)</code></h4>
  <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>

-  <h4>.carousel('prev')</h4>
+  <h4><code>.carousel('prev')</code></h4>
  <p>Cycles to the previous item.</p>

-  <h4>.carousel('next')</h4>
+  <h4><code>.carousel('next')</code></h4>
  <p>Cycles to the next item.</p>

  <h3 id="carousel-events">Events</h3>
@@ -226,11 +231,12 @@ $('.carousel').carousel({
    <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
    <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
  </ul>
+  <p>All carousel events are fired at the carousel itself (i.e. at the <code>&lt;div class="carousel"&gt;</code>).</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
       <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
@@ -19,7 +19,7 @@

  <div class="bs-example">
    <p>
-      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      <a class="btn btn-primary" role="button" 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">
@@ -33,7 +33,7 @@
    </div>
  </div>
 {% highlight html %}
-<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+<a class="btn btn-primary" role="button" 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">
@@ -54,7 +54,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
@@ -68,7 +68,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
-            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
@@ -82,7 +82,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
-            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
@@ -100,7 +100,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
@@ -114,7 +114,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
@@ -128,7 +128,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
@@ -148,7 +148,7 @@
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
        <h4 class="panel-title">
-          <a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
+          <a class="collapsed" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
            Collapsible list group
          </a>
        </h4>
@@ -167,7 +167,7 @@
  <div class="bs-callout bs-callout-warning" id="callout-collapse-accessibility">
    <h4>Make expand/collapse controls accessible</h4>
    <p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
-    <p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
+    <p>Additionally, if your control element is targeting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
  </div>

  <h2 id="collapse-usage">Usage</h2>
@@ -192,12 +192,12 @@ $('.collapse').collapse()
  <h3 id="collapse-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-parent=""</code>.</p>
  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
         <th>description</th>
       </tr>
      </thead>
@@ -220,22 +220,22 @@ $('.collapse').collapse()

  <h3 id="collapse-methods">Methods</h3>

-  <h4>.collapse(options)</h4>
-  <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+  <h4><code>.collapse(options)</code></h4>
+  <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.</p>
 {% highlight js %}
 $('#myCollapsible').collapse({
  toggle: false
 })
 {% endhighlight %}

-  <h4>.collapse('toggle')</h4>
-  <p>Toggles a collapsible element to shown or hidden.</p>
+  <h4><code>.collapse('toggle')</code></h4>
+  <p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</p>

-  <h4>.collapse('show')</h4>
-  <p>Shows a collapsible element.</p>
+  <h4><code>.collapse('show')</code></h4>
+  <p>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (i.e. before the <code>shown.bs.collapse</code> event occurs).</p>

-  <h4>.collapse('hide')</h4>
-  <p>Hides a collapsible element.</p>
+  <h4><code>.collapse('hide')</code></h4>
+  <p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code>hidden.bs.collapse</code> event occurs).</p>

  <h3 id="collapse-events">Events</h3>
  <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
@@ -243,7 +243,7 @@ $('#myCollapsible').collapse({
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
       <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
@@ -20,44 +20,44 @@
        <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
-              <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+              <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
              </a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+              <ul class="dropdown-menu" aria-labelledby="drop1">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
            <li class="dropdown">
-              <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+              <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
              </a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+              <ul class="dropdown-menu" aria-labelledby="drop2">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li id="fat-menu" class="dropdown">
-              <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+              <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
              </a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+              <ul class="dropdown-menu" aria-labelledby="drop3">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
@@ -71,42 +71,42 @@
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Regular link</a></li>
      <li role="presentation" class="dropdown">
-        <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+        <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </a>
-        <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-          <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+        <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li role="separator" class="divider"></li>
+          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li role="presentation" class="dropdown">
-        <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+        <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </a>
-        <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-          <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+        <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li role="separator" class="divider"></li>
+          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li role="presentation" class="dropdown">
-        <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+        <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </a>
-        <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-          <li role="presentation" class="divider"></li>
-          <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+        <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li role="separator" class="divider"></li>
+          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul> <!-- /pills -->
@@ -126,7 +126,7 @@
    Dropdown trigger
    <span class="caret"></span>
  </button>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
 </div>
@@ -134,12 +134,12 @@
  <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
+  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
 </div>
@@ -159,7 +159,7 @@ $('.dropdown-toggle').dropdown()
  <p><em>None</em></p>

  <h3 id="dropdowns-methods">Methods</h3>
-  <h4>$().dropdown('toggle')</h4>
+  <h4><code>$().dropdown('toggle')</code></h4>
  <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>

  <h3 id="dropdowns-events">Events</h3>
@@ -169,7 +169,7 @@ $('.dropdown-toggle').dropdown()
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
        <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -3,7 +3,7 @@
  <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>

  <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
-    <h4>Overlapping modals not supported</h4>
+    <h4>Multiple open modals not supported</h4>
    <p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
  </div>
  <div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
@@ -12,23 +12,23 @@
  </div>
  <div class="bs-callout bs-callout-warning" id="callout-modal-mobile-caveats">
    <h4>Mobile device caveats</h4>
-    <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+    <p>There are some caveats regarding using modals on mobile devices. <a href="{{ site.baseurl }}/getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
  </div>

  <p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
-  {% highlight js %}
-  $('#myModal').on('shown.bs.modal', function () {
-    $('#myInput').focus()
-  })
-  {% endhighlight %}
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+  $('#myInput').focus()
+})
+{% endhighlight %}

  <h2 id="modals-examples">Examples</h2>

  <h3>Static example</h3>
  <p>A rendered modal with header, body, and set of actions in the footer.</p>
  <div class="bs-example bs-example-modal" data-example-id="static-modal">
-    <div class="modal">
-      <div class="modal-dialog">
+    <div class="modal" tabindex="-1" role="dialog">
+      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -46,8 +46,8 @@
    </div><!-- /.modal -->
  </div><!-- /example -->
 {% highlight html %}
-<div class="modal fade">
-  <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -68,8 +68,8 @@
  <h3>Live demo</h3>
  <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
  <!-- sample modal content -->
-  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
+  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
@@ -108,7 +108,7 @@
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
@@ -120,8 +120,8 @@
 </button>

 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -141,13 +141,13 @@

  <div class="bs-callout bs-callout-warning" id="callout-modal-accessibility">
    <h4>Make modals accessible</h4>
-    <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
+    <p>Be sure to add <code>role="dialog"</code> and <code>aria-labelledby="..."</code>, referencing the modal title, to <code>.modal</code>, and <code>role="document"</code> to the <code>.modal-dialog</code>  itself.</p>
    <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
  </div>

  <div class="bs-callout bs-callout-info" id="callout-modal-youtube">
    <h4>Embedding YouTube videos</h4>
-    <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
+    <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
  </div>

  <h2 id="modals-sizes">Optional sizes</h2>
@@ -160,8 +160,8 @@
 <!-- Large modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

-<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
+  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
@@ -171,8 +171,8 @@
 <!-- Small modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

-<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-sm">
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
@@ -181,8 +181,8 @@
 {% endhighlight %}

  <!--  Modal content for the above example -->
-  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
+    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">

        <div class="modal-header">
@@ -195,8 +195,8 @@
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
-  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
+  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">

        <div class="modal-header">
@@ -213,21 +213,113 @@
  <h2 id="modals-remove-animation">Remove animation</h2>
  <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p>
 {% highlight html %}
-<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
 </div>
+{% endhighlight %}
+
+  <h2 id="modals-grid-system">Using the grid system</h2>
+  <p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.row</code>s within the <code>.modal-body</code> and then use the normal grid system classes.</p>
+<!-- sample modal content -->
+  <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-4">.col-md-4</div>
+            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+          </div>
+          <div class="row">
+            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+          </div>
+          <div class="row">
+            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+          </div>
+          <div class="row">
+            <div class="col-sm-9">
+              Level 1: .col-sm-9
+              <div class="row">
+                <div class="col-xs-8 col-sm-6">
+                  Level 2: .col-xs-8 .col-sm-6
+                </div>
+                <div class="col-xs-4 col-sm-6">
+                  Level 2: .col-xs-4 .col-sm-6
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+<div class="bs-example bs-example-padded-bottom">
+  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+    Launch demo modal
+  </button>
+</div><!-- /example -->
+{% highlight html %}
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-md-4">.col-md-4</div>
+          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+        </div>
+        <div class="row">
+          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-9">
+            Level 1: .col-sm-9
+            <div class="row">
+              <div class="col-xs-8 col-sm-6">
+                Level 2: .col-xs-8 .col-sm-6
+              </div>
+              <div class="col-xs-4 col-sm-6">
+                Level 2: .col-xs-4 .col-sm-6
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
 {% endhighlight %}

  <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
-  <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
+  <div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
    ...more buttons...

-    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <div class="modal-dialog">
+    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
+      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -256,11 +348,11 @@
 {% highlight html %}
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
 ...more buttons...

-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
+  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -314,12 +406,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
  <h3 id="modals-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-backdrop=""</code>.</p>
  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
         <th>description</th>
       </tr>
      </thead>
@@ -347,7 +439,7 @@ $('#exampleModal').on('show.bs.modal', function (event) {
         <td>path</td>
         <td>false</td>
         <td>
-          <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
+          <p><strong class="text-danger">This option is deprecated since v3.3.0 and has been removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</p>
          <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
 {% highlight html %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
@@ -360,7 +452,7 @@ $('#exampleModal').on('show.bs.modal', function (event) {

  <h3 id="modals-methods">Methods</h3>

-  <h4>.modal(options)</h4>
+  <h4><code>.modal(options)</code></h4>
  <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
 {% highlight js %}
 $('#myModal').modal({
@@ -368,25 +460,31 @@ $('#myModal').modal({
 })
 {% endhighlight %}

-  <h4>.modal('toggle')</h4>
+  <h4><code>.modal('toggle')</code></h4>
  <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
  {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}

-  <h4>.modal('show')</h4>
+  <h4><code>.modal('show')</code></h4>
  <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
  {% highlight js %}$('#myModal').modal('show'){% endhighlight %}

-  <h4>.modal('hide')</h4>
+  <h4><code>.modal('hide')</code></h4>
  <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
  {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}

+  <h4><code>.modal('handleUpdate')</code></h4>
+  <p>Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.</p>
+  <p>Only needed when the height of the modal changes while it is open.</p>
+  {% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
+
  <h3 id="modals-events">Events</h3>
  <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
+  <p>All modal events are fired at the modal itself (i.e. at the <code>&lt;div class="modal"&gt;</code>).</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
       <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
  <h1 id="js-overview" class="page-header">Overview</h1>

-  <h3 id="js-individual-compiled">Individual or compiled</h3>
+  <h2 id="js-individual-compiled">Individual or compiled</h2>
  <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>

  <div class="bs-callout bs-callout-danger" id="callout-overview-not-both">
@@ -11,10 +11,10 @@

  <div class="bs-callout bs-callout-danger" id="callout-overview-dependencies">
    <h4>Plugin dependencies</h4>
-    <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
+    <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/v3-dev/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
  </div>

-  <h3 id="js-data-attrs">Data attributes</h3>
+  <h2 id="js-data-attrs">Data attributes</h2>
  <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>

  <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p>
@@ -32,7 +32,7 @@ $(document).off('.alert.data-api')
    <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>

-  <h3 id="js-programmatic-api">Programmatic API</h3>
+  <h2 id="js-programmatic-api">Programmatic API</h2>
  <p>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.</p>
 {% highlight js %}
 $('.btn.danger').button('toggle').addClass('fat')
@@ -48,19 +48,19 @@ $('#myModal').modal('show')                // initializes and invokes show immed
  <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>

  <h4>Default settings</h4>
-  <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:<p>
+  <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p>
 {% highlight js %}
 $.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
 {% endhighlight %}

-  <h3 id="js-noconflict">No conflict</h3>
+  <h2 id="js-noconflict">No conflict</h2>
  <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
 {% highlight js %}
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
 {% endhighlight %}

-  <h3 id="js-events">Events</h3>
+  <h2 id="js-events">Events</h2>
  <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
  <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
  <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
@@ -70,13 +70,88 @@ $('#myModal').on('show.bs.modal', function (e) {
 })
 {% endhighlight %}

-  <h3 id="js-version-nums">Version numbers</h3>
+  <h2 id="js-sanitizer">Sanitizer</h2>
+
+  <p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>
+  <p>The default <code>whiteList</code> value is the following:</p>
+
+{% highlight js %}
+var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
+var DefaultWhitelist = {
+  // Global attributes allowed on any supplied element below.
+  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
+  a: ['target', 'href', 'title', 'rel'],
+  area: [],
+  b: [],
+  br: [],
+  col: [],
+  code: [],
+  div: [],
+  em: [],
+  hr: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: [],
+  i: [],
+  img: ['src', 'alt', 'title', 'width', 'height'],
+  li: [],
+  ol: [],
+  p: [],
+  pre: [],
+  s: [],
+  small: [],
+  span: [],
+  sub: [],
+  sup: [],
+  strong: [],
+  u: [],
+  ul: []
+}
+{% endhighlight %}
+
+  <p>If you want to add new values to this default <code>whiteList</code> you can do the following:</p>
+
+{% highlight js %}
+var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
+
+// To allow table elements
+myDefaultWhiteList.table = []
+
+// To allow td elements and data-option attributes on td elements
+myDefaultWhiteList.td = ['data-option']
+
+// You can push your custom regex to validate your attributes.
+// Be careful about your regular expressions being too lax
+var myCustomRegex = /^data-my-app-[\w-]+/
+myDefaultWhiteList['*'].push(myCustomRegex)
+{% endhighlight %}
+
+  <p>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>
+
+{% highlight js %}
+$('#yourTooltip').tooltip({
+  sanitizeFn: function (content) {
+    return DOMPurify.sanitize(content)
+  }
+})
+{% endhighlight %}
+
+  <div class="bs-callout bs-callout-danger" id="callout-sanitizer-no-createhtmldocument">
+    <h4>Browsers without <code>document.implementation.createHTMLDocument</code></h4>
+    <p>In case of browsers that don't support <code>document.implementation.createHTMLDocument</code>, like Internet Explorer 8, the built-in sanitize function returns the HTML as is.</p>
+    <p>If you want to perform sanitization in this case, please specify <code>sanitizeFn</code> and use an external library like <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>.</p>
+  </div>
+
+  <h2 id="js-version-nums">Version numbers</h2>
  <p>The version of each of Bootstrap's jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin's constructor. For example, for the tooltip plugin:</p>
 {% highlight js %}
 $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
 {% endhighlight %}

-  <h3 id="js-disabled">No special fallbacks when JavaScript is disabled</h3>
+  <h2 id="js-disabled">No special fallbacks when JavaScript is disabled</h2>
  <p>Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>

  <div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
@@ -19,8 +19,8 @@ $(function () {
 {% endhighlight %}
  </div>
  <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>
+    <h4>Popovers in button groups, input groups, and tables require special setting</h4>
+    <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, or on table-related elements (<code>&lt;td&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</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" id="callout-popover-hidden">
    <h4>Don't try to show popovers on hidden elements</h4>
@@ -76,7 +76,7 @@ $(function () {
  </div>

  <h3>Live demo</h3>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
  </div>
 {% highlight html %}
@@ -86,8 +86,8 @@ $(function () {
  <h4>Four directions</h4>
  <div class="bs-example popover-demo">
    <div class="bs-example-popovers">
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-        Popover on left
+      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on right
      </button>
      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
@@ -95,8 +95,8 @@ $(function () {
      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
      </button>
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-        Popover on right
+      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on left
      </button>
    </div>
  </div><!-- /example -->
@@ -123,9 +123,9 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
  <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" 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>
+    <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 the <code>role="button"</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a> attributes.</p>
  </div>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
    <a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
  </div>
 {% highlight html %}
@@ -139,13 +139,18 @@ sagittis lacus vel augue laoreet rutrum faucibus.">

  <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="bs-callout bs-callout-warning" id="callout-popover-disabled-options">
+    <p>Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code> and <code>whiteList</code> options cannot be supplied using data attributes.</p>
+  </div>
+
  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table js-options-table">
      <thead>
        <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 100px;">Type</th>
-          <th style="width: 50px;">Default</th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -229,16 +234,35 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
          <td>trigger</td>
          <td>string</td>
          <td>'click'</td>
-          <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+          <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
        </tr>
        <tr>
          <td>viewport</td>
-          <td>string | object</td>
+          <td>string | object | function</td>
          <td>{ selector: 'body', padding: 0 }</td>
          <td>
            <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+            <p>If a function is given, it is called with the triggering element DOM node as its only argument. The <code>this</code> context is set to the popover instance.</p>
          </td>
-       </tr>
+        </tr>
+        <tr>
+          <td>sanitize</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>
+        </tr>
+        <tr>
+          <td>whiteList</td>
+          <td>object</td>
+          <td><a href="#js-sanitizer">Default value</a></td>
+          <td>Object which contains allowed attributes and tags</td>
+        </tr>
+        <tr>
+          <td>sanitizeFn</td>
+          <td>null | function</td>
+          <td>null</td>
+          <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
+        </tr>
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
@@ -247,24 +271,24 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
    <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
  </div>

-  <h3>Methods</h3>
-  <h4>$().popover(options)</h4>
+  <h3 id="popovers-methods">Methods</h3>
+  <h4><code>$().popover(options)</code></h4>
  <p>Initializes popovers for an element collection.</p>

-  <h4>.popover('show')</h4>
+  <h4><code>.popover('show')</code></h4>
  <p>Reveals an element's popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code>shown.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p>
  {% highlight js %}$('#element').popover('show'){% endhighlight %}

-  <h4>.popover('hide')</h4>
+  <h4><code>.popover('hide')</code></h4>
  <p>Hides an element's popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
  {% highlight js %}$('#element').popover('hide'){% endhighlight %}

-  <h4>.popover('toggle')</h4>
+  <h4><code>.popover('toggle')</code></h4>
  <p>Toggles an element's popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
  {% highlight js %}$('#element').popover('toggle'){% endhighlight %}

-  <h4>.popover('destroy')</h4>
-  <p>Hides and destroys an element's popover.</p>
+  <h4><code>.popover('destroy')</code></h4>
+  <p>Hides and destroys an element's popover. Popovers that use delegation (which are created using <a href="#popovers-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
  {% highlight js %}$('#element').popover('destroy'){% endhighlight %}

  <h3 id="popovers-events">Events</h3>
@@ -272,7 +296,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
        <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -293,6 +317,10 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
          <td>hidden.bs.popover</td>
          <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
        </tr>
+        <tr>
+          <td>inserted.bs.popover</td>
+          <td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td>
+        </tr>
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
@@ -20,12 +20,12 @@
            <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" 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>
-                <li class="divider"></li>
-                <li><a href="#three" tabindex="-1">three</a></li>
+              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
+                <li><a href="#one">one</a></li>
+                <li><a href="#two">two</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="#three">three</a></li>
              </ul>
            </li>
          </ul>
@@ -53,7 +53,7 @@

  <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>
+    <p>Scrollspy currently requires the use of a <a href="{{ site.baseurl }}/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>
@@ -61,11 +61,11 @@
  </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>
+    <p>Target elements that are not <a href="https://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>
+  <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>. When scrollspying on elements other than the <code>&lt;body&gt;</code>, be sure to have a <code>height</code> set and <code>overflow-y: scroll;</code> applied.</p>

  <h3>Via data attributes</h3>
  <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
@@ -75,9 +75,9 @@ body {
 }
 {% endhighlight %}
 {% highlight html %}
-<body data-spy="scroll" data-target=".navbar-example">
+<body data-spy="scroll" data-target="#navbar-example">
  ...
-  <div class="navbar-example">
+  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
@@ -89,12 +89,12 @@ body {
  <h3>Via JavaScript</h3>
  <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
 {% highlight js %}
-$('body').scrollspy({ target: '.navbar-example' })
+$('body').scrollspy({ target: '#navbar-example' })
 {% endhighlight %}


  <h3 id="scrollspy-methods">Methods</h3>
-  <h4>.scrollspy('refresh')</h4>
+  <h4><code>.scrollspy('refresh')</code></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 %}
 $('[data-spy="scroll"]').each(function () {
@@ -106,12 +106,12 @@ $('[data-spy="scroll"]').each(function () {
  <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">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
       <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 100px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
         <th>description</th>
       </tr>
      </thead>
@@ -131,7 +131,7 @@ $('[data-spy="scroll"]').each(function () {
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
       <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
@@ -2,30 +2,30 @@
  <h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1>

  <h2 id="tabs-examples">Example tabs</h2>
-  <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
-  <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
-    <ul id="myTab" class="nav nav-tabs" role="tablist">
+  <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. <strong>Nested tabs are not supported.</strong></p>
+  <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
+    <ul id="myTabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
      <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
      <li role="presentation" class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Dropdown <span class="caret"></span></a>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
-          <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
-          <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
+        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
+          <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
+          <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
        </ul>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
-      <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
+      <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
-      <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
+      <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </div>
-      <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
+      <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
      </div>
-      <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
+      <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
      </div>
    </div>
@@ -33,7 +33,7 @@

  <div class="bs-callout bs-callout-info" id="callout-tabs-extends-component">
    <h4>Extends tabbed navigation</h4>
-    <p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
+    <p>This plugin extends the <a href="{{ site.baseurl }}/components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
  </div>


@@ -41,7 +41,7 @@
  <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>

 {% highlight js %}
-$('#myTab a').click(function (e) {
+$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
 })
@@ -50,16 +50,16 @@ $('#myTab a').click(function (e) {
  <p>You can activate individual tabs in several ways:</p>

 {% highlight js %}
-$('#myTab a[href="#profile"]').tab('show') // Select tab by name
-$('#myTab a:first').tab('show') // Select first tab
-$('#myTab a:last').tab('show') // Select last tab
-$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
+$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
+$('#myTabs a:first').tab('show') // Select first tab
+$('#myTabs a:last').tab('show') // Select last tab
+$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}

  <h3>Markup</h3>
-  <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
+  <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ site.baseurl }}/components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ site.baseurl }}/components/#nav-pills">pill styling</a>.</p>
 {% highlight html %}
-<div role="tabpanel">
+<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
@@ -81,7 +81,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}

  <h3>Fade effect</h3>
-  <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
+  <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to make the initial content visible.</p>
 {% highlight html %}
 <div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
@@ -92,31 +92,14 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}

  <h3 id="tabs-methods">Methods</h3>
-  <h4>$().tab</h4>
+  <h4><code>$().tab</code></h4>
  <p>
-    Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
+    Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. In the above examples, the tabs are the <code>&lt;a&gt;</code>s with <code>data-toggle="tab"</code> attributes.
  </p>
-{% highlight html %}
-<ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
-  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
-  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
-  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
-</ul>

-<div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="home">...</div>
-  <div role="tabpanel" class="tab-pane" id="profile">...</div>
-  <div role="tabpanel" class="tab-pane" id="messages">...</div>
-  <div role="tabpanel" class="tab-pane" id="settings">...</div>
-</div>
-
-<script>
-  $(function () {
-    $('#myTab a:last').tab('show')
-  })
-</script>
-{% endhighlight %}
+  <h4><code>.tab('show')</code></h4>
+  <p>Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (i.e. before the <code>shown.bs.tab</code> event occurs).</p>
+  {% highlight js %}$('#someTab').tab('show'){% endhighlight %}

  <h3 id="tabs-events">Events</h3>
  <p>When showing a new tab, the events fire in the following order:</p>
@@ -131,7 +114,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
       <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
@@ -68,18 +68,6 @@ $(function () {
 {% endhighlight %}

  </div>
-  <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" 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" 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>

  <h2 id="tooltips-usage">Usage</h2>
  <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
@@ -90,10 +78,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" 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>
+
 {% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
@@ -107,15 +92,41 @@ $('#example').tooltip(options)
 </div>
 {% endhighlight %}

+  <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>
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
+    <h4>Tooltips in button groups, input groups, and tables require special setting</h4>
+    <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, or on table-related elements (<code>&lt;td&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</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" 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-warning" id="callout-tooltip-accessibility">
+    <h4>Accessible tooltips for keyboard and assistive technology users</h4>
+    <p>For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a <code>tabindex="0"</code> attribute.</p>
+  </div>
+  <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>
+
  <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="bs-callout bs-callout-warning" id="callout-tooltip-disabled-options">
+    <p>Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code> and <code>whiteList</code> options cannot be supplied using data attributes.</p>
+  </div>
+
  <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
      <thead>
        <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 100px;">Type</th>
-          <th style="width: 50px;">Default</th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -163,7 +174,7 @@ $('#example').tooltip(options)
          <td>selector</td>
          <td>string</td>
          <td>false</td>
-          <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+          <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (<code>jQuery.on</code> support). See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
        </tr>
        <tr>
          <td>template</td>
@@ -189,16 +200,35 @@ $('#example').tooltip(options)
          <td>trigger</td>
          <td>string</td>
          <td>'hover focus'</td>
-          <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+          <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
        </tr>
        <tr>
          <td>viewport</td>
-          <td>string | object</td>
+          <td>string | object | function</td>
          <td>{ selector: 'body', padding: 0 }</td>
          <td>
            <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+            <p>If a function is given, it is called with the triggering element DOM node as its only argument. The <code>this</code> context is set to the tooltip instance.</p>
          </td>
        </tr>
+        <tr>
+          <td>sanitize</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>
+        </tr>
+        <tr>
+          <td>whiteList</td>
+          <td>object</td>
+          <td><a href="#js-sanitizer">Default value</a></td>
+          <td>Object which contains allowed attributes and tags</td>
+        </tr>
+        <tr>
+          <td>sanitizeFn</td>
+          <td>null | function</td>
+          <td>null</td>
+          <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
+        </tr>
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
@@ -209,23 +239,23 @@ $('#example').tooltip(options)

  <h3 id="tooltips-methods">Methods</h3>

-  <h4>$().tooltip(options)</h4>
+  <h4><code>$().tooltip(options)</code></h4>
  <p>Attaches a tooltip handler to an element collection.</p>

-  <h4>.tooltip('show')</h4>
+  <h4><code>.tooltip('show')</code></h4>
  <p>Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
  {% highlight js %}$('#element').tooltip('show'){% endhighlight %}

-  <h4>.tooltip('hide')</h4>
+  <h4><code>.tooltip('hide')</code></h4>
  <p>Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
  {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}

-  <h4>.tooltip('toggle')</h4>
+  <h4><code>.tooltip('toggle')</code></h4>
  <p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
  {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}

-  <h4>.tooltip('destroy')</h4>
-  <p>Hides and destroys an element's tooltip.</p>
+  <h4><code>.tooltip('destroy')</code></h4>
+  <p>Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using <a href="#tooltips-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
  {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}

  <h3 id="tooltips-events">Events</h3>
@@ -233,7 +263,7 @@ $('#example').tooltip(options)
    <table class="table table-bordered table-striped bs-events-table">
      <thead>
        <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
@@ -254,6 +284,10 @@ $('#example').tooltip(options)
          <td>hidden.bs.tooltip</td>
          <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
        </tr>
+        <tr>
+          <td>inserted.bs.tooltip</td>
+          <td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td>
+        </tr>
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
@@ -1,8 +1,15 @@
 <div class="bs-docs-section">
  <h1 id="transitions" class="page-header">Transitions <small>transition.js</small></h1>

-  <h3>About transitions</h3>
+  <h2>About transitions</h2>
  <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
-  <h3>What's inside</h3>
+
+  <h2>What's inside</h2>
  <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
+
+  <h2>Disabling transitions</h2>
+  <p>Transitions can be globally disabled using the following JavaScript snippet, which must come after <code>transition.js</code> (or <code>bootstrap.js</code> or <code>bootstrap.min.js</code>, as the case may be) has loaded:</p>
+{% highlight js %}
+$.support.transition = false
+{% endhighlight %}
 </div>
@@ -45,6 +45,7 @@
    <li><a href="#input-groups-buttons">Button addons</a></li>
    <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
    <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li>
+    <li><a href="#input-groups-buttons-multiple">Multiple buttons</a></li>
  </ul>
 </li>
 <li>
@@ -124,6 +125,7 @@
    <li><a href="#list-group-basic">Basic example</a></li>
    <li><a href="#list-group-badges">Badges</a></li>
    <li><a href="#list-group-linked">Linked items</a></li>
+    <li><a href="#list-group-buttons">Button items</a></li>
    <li><a href="#list-group-disabled">Disabled items</a></li>
    <li><a href="#list-group-contextual-classes">Contextual classes</a></li>
    <li><a href="#list-group-custom-content">Custom content</a></li>
@@ -134,9 +136,10 @@
  <ul class="nav">
    <li><a href="#panels-basic">Basic example</a></li>
    <li><a href="#panels-heading">Panel with heading</a></li>
+    <li><a href="#panels-footer">Panel with footer</a></li>
    <li><a href="#panels-alternatives">Contextual alternatives</a></li>
-    <li><a href="#panels-tables">With tables</a>
-    <li><a href="#panels-list-group">With list groups</a>
+    <li><a href="#panels-tables">With tables</a></li>
+    <li><a href="#panels-list-group">With list groups</a></li>
  </ul>
 </li>
 <li><a href="#responsive-embed">Responsive embed</a></li>
@@ -20,6 +20,7 @@
    <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
    <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
    <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
+    <li><a href="#grid-remove-gutters">Remove gutters</a></li>
    <li><a href="#grid-offsetting">Offsetting columns</a></li>
    <li><a href="#grid-nesting">Nesting columns</a></li>
    <li><a href="#grid-column-ordering">Column ordering</a></li>
@@ -73,9 +74,9 @@
    <li><a href="#forms-control-focus">Focus state</a></li>
    <li><a href="#forms-control-disabled">Disabled state</a></li>
    <li><a href="#forms-control-readonly">Readonly state</a></li>
+    <li><a href="#forms-help-text">Help text</a></li>
    <li><a href="#forms-control-validation">Validation states</a></li>
    <li><a href="#forms-control-sizes">Control sizing</a></li>
-    <li><a href="#forms-help-text">Help text</a></li>
  </ul>
 </li>
 <li>
@@ -1,5 +1,5 @@

-<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.pug template.-->
 <li><a href="#import-drop-target">Import</a></li>
 <li><a href="#less">Less components</a></li>
 <li><a href="#plugins">jQuery plugins</a></li>
@@ -44,4 +44,4 @@
  </ul>
 </li>
 <li><a href="#download">Download</a></li>
-<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.pug template.-->
@@ -56,6 +56,7 @@
    <li><a href="#support-safari-percentages">Safari percent rounding</a></li>
    <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
    <li><a href="#support-browser-zooming">Browser zooming</a></li>
+    <li><a href="#support-sticky-hover-mobile">Sticky :hover/:focus on mobile</a></li>
    <li><a href="#support-printing">Printing</a></li>
    <li><a href="#support-android-stock-browser">Android stock browser</a></li>
    <li><a href="#support-validators">Validators</a></li>
@@ -6,6 +6,7 @@
    <li><a href="#js-programmatic-api">Programmatic API</a></li>
    <li><a href="#js-noconflict">No conflict</a></li>
    <li><a href="#js-events">Events</a></li>
+    <li><a href="#js-sanitizer">Sanitizer</a></li>
    <li><a href="#js-version-nums">Version numbers</a></li>
    <li><a href="#js-disabled">When JavaScript is disabled</a></li>
    <li><a href="#callout-third-party-libs">Third-party libraries</a></li>
@@ -69,6 +70,7 @@
    <li><a href="#popovers-examples">Examples</a></li>
    <li><a href="#popovers-usage">Usage</a></li>
    <li><a href="#popovers-options">Options</a></li>
+    <li><a href="#popovers-methods">Methods</a></li>
    <li><a href="#popovers-events">Events</a></li>
  </ul>
 </li>
@@ -117,6 +119,7 @@
    <li><a href="#affix-examples">Examples</a></li>
    <li><a href="#affix-usage">Usage</a></li>
    <li><a href="#affix-options">Options</a></li>
+    <li><a href="#affix-methods">Methods</a></li>
    <li><a href="#affix-events">Events</a></li>
  </ul>
 </li>
@@ -1,33 +1,47 @@
-<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
+<header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
-      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
-      <a href="../" class="navbar-brand">Bootstrap</a>
+      <a href="{{ site.baseurl }}/" class="navbar-brand">Bootstrap</a>
    </div>
-    <nav class="collapse navbar-collapse bs-navbar-collapse">
+    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="../getting-started/">Getting started</a>
+          <a href="{{ site.baseurl }}/getting-started/">Getting started</a>
        </li>
        <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="../css/">CSS</a>
+          <a href="{{ site.baseurl }}/css/">CSS</a>
        </li>
        <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="../components/">Components</a>
+          <a href="{{ site.baseurl }}/components/">Components</a>
        </li>
        <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="../javascript/">JavaScript</a>
+          <a href="{{ site.baseurl }}/javascript/">JavaScript</a>
        </li>
        <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="../customize/">Customize</a>
+          <a href="{{ site.baseurl }}/customize/">Customize</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            v{{ site.current_version }} <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
+            <li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
+            <li class="divider"></li>
+            <li class="active"><a href="https://getbootstrap.com/docs/{{ site.docs_version }}/">v{{ site.current_version }}</a></li>
+            <li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
+            <li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
+          </ul>
+        </li>
+        <li><a href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
        <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
        <li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
      </ul>
@@ -0,0 +1,5 @@
+<a id="skippy" class="sr-only sr-only-focusable text-center" href="#content">
+  <div class="container">
+    <span class="skiplink-text">Skip to main content</span>
+  </div>
+</a>
@@ -1,16 +0,0 @@
-<div class="bs-docs-social">
-  <ul class="bs-docs-social-buttons">
-    <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
-    </li>
-    <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
-    </li>
-    <li class="follow-btn">
-      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
-    </li>
-    <li class="tweet-btn">
-      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a>
-    </li>
-  </ul>
-</div>
@@ -0,0 +1 @@
+<a href="https://getbootstrap.com/" class="v4-tease">Looking for Bootstrap 4?</a>
@@ -1,17 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
-    <!-- Meta, title, CSS, favicons, etc. -->
    {% include header.html %}
  </head>
  <body>
-    <a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
+    {% include skippy.html %}
+    {% include v4.html %}

-    <!-- Docs master nav -->
    {% include nav/main.html %}

-    <!-- Docs page layout -->
-    <div class="bs-docs-header" id="content">
+    <div class="bs-docs-header" id="content" tabindex="-1">
      <div class="container">
        <h1>{{ page.title }}</h1>
        <p>{{ page.lead }}</p>
@@ -28,6 +26,10 @@
        {% unless page.fullwidth == true %}
        <div class="col-md-3" role="complementary">
          <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
+            <form class="bs-docs-search">
+              <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
+            </form>
+
            <ul class="nav bs-docs-sidenav">
              {% if page.slug == "getting-started" %}
                {% include nav/getting-started.html %}
@@ -1,16 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
-    <!-- Meta, title, CSS, favicons, etc. -->
    {% include header.html %}
  </head>
  <body class="bs-docs-home">
-    <a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
+    {% include skippy.html %}
+    {% include v4.html %}

-    <!-- Docs master nav -->
    {% include nav/main.html %}

-    <!-- Page content of course! -->
    {{ content }}

    {% include footer.html %}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<a href="https://getbootstrap.com/" class="v4-tease">Looking for Bootstrap 4?</a>`