Merge remote-tracking branch 'twbs/v4-dev' into patch-1

Conflicts: scss/_custom-forms.scss scss/_variables.scss
2025-02-23 18:40:03 +00:00 · 2015-09-11 16:43:00 +03:00 · 2015-09-11 16:43:00 +03:00 · c9725926b2
commit c9725926b2
parent 353e0a49a9 b811f8cf96
170 changed files with 3586 additions and 3727 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -3,13 +3,14 @@
 *.html  text eol=lf
 *.js    text eol=lf
 *.json  text eol=lf
-*.less  text eol=lf
 *.md    text eol=lf
+*.py    text eol=lf
+*.rb    text eol=lf
+*.scss  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
--- a/.gitignore
+++ b/.gitignore
@ -6,6 +6,7 @@ _site
 .ruby-version
 .bundle
 vendor/cache
+vendor/bundle

 # Numerous always-ignore extensions
 *.diff
--- a/.travis.yml
+++ b/.travis.yml
@ -1,38 +1,29 @@
+sudo: false
 language: node_js
 git:
  depth: 10
 node_js:
  - "0.12"
 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
+  - rvm install 2.0.0 && rvm use 2.0.0
  - "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:
+  - bundle install --deployment --jobs=3
  - 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
+  - npm install
+cache:
+  directories:
+    - node_modules
+    - vendor/bundle
 env:
  global:
-    - JEKYLL_VERSION="2.5.3"
-    - ROUGE_VERSION="1.8.0"
    - 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
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -27,6 +27,7 @@ restrictions:
 * 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 <http://themes.getbootstrap.com/>. Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.


 ## Issues and labels
@ -35,7 +36,7 @@ Our bug tracker utilizes several labels to help organize and identify issues. He

 - `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 Sass files.
 - `docs` - Issues for improving or updating our documentation.
 - `examples` - Issues involving the example templates included in our docs.
 - `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
@ -134,9 +135,9 @@ 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`
+**Do not edit `bootstrap.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)
+source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/master/scss)
 and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.

 Similarly, when contributing to Bootstrap's documentation, you should edit the
--- a/10
+++ b/10
@ -4,8 +4,10 @@
 source 'https://rubygems.org'

 group :development, :test do
-  gem 'jekyll', '~> 2.5.2'
-  gem 'rouge', '~> 1.7.4'
-  gem 'sass', '~> 3.4.9'
-  gem 'scss-lint', '~> 0.31'
+  gem 'jekyll', '~> 2.5.3'
+  gem 'jekyll-redirect-from', '~> 0.8.0'
+  gem 'jekyll-sitemap', '~> 0.8.1'
+  gem 'rouge', '~> 1.9.1'
+  gem 'sass', '~> 3.4.18'
+  gem 'scss_lint', '~> 0.41'
 end
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -4,18 +4,18 @@ GEM
    blankslate (2.1.2.4)
    celluloid (0.16.0)
      timers (~> 4.0.0)
-    classifier-reborn (2.0.2)
+    classifier-reborn (2.0.3)
      fast-stemmer (~> 1.0)
-    coffee-script (2.3.0)
+    coffee-script (2.4.1)
      coffee-script-source
      execjs
-    coffee-script-source (1.8.0)
+    coffee-script-source (1.9.1.1)
    colorator (0.1)
-    execjs (2.2.2)
+    execjs (2.6.0)
    fast-stemmer (1.0.2)
-    ffi (1.9.6)
+    ffi (1.9.10)
    hitimes (1.2.2)
-    jekyll (2.5.2)
+    jekyll (2.5.3)
      classifier-reborn (~> 2.0)
      colorator (~> 0.1)
      jekyll-coffeescript (~> 1.0)
@ -32,47 +32,55 @@ GEM
      toml (~> 0.1.0)
    jekyll-coffeescript (1.0.1)
      coffee-script (~> 2.2)
-    jekyll-gist (1.1.0)
+    jekyll-gist (1.3.4)
    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.8.0)
+      jekyll (>= 2.0)
    jekyll-sass-converter (1.3.0)
      sass (~> 3.2)
-    jekyll-watch (1.2.0)
+    jekyll-sitemap (0.8.1)
+    jekyll-watch (1.2.1)
      listen (~> 2.7)
-    kramdown (1.5.0)
-    liquid (2.6.1)
-    listen (2.8.4)
-      celluloid (>= 0.15.2)
+    kramdown (1.8.0)
+    liquid (2.6.3)
+    listen (2.10.1)
+      celluloid (~> 0.16.0)
      rb-fsevent (>= 0.9.3)
      rb-inotify (>= 0.9)
    mercenary (0.3.5)
    parslet (1.5.0)
      blankslate (~> 2.0)
-    posix-spawn (0.3.9)
-    pygments.rb (0.6.0)
+    posix-spawn (0.3.11)
+    pygments.rb (0.6.3)
      posix-spawn (~> 0.3.6)
-      yajl-ruby (~> 1.1.0)
+      yajl-ruby (~> 1.2.0)
    rainbow (2.0.0)
-    rb-fsevent (0.9.4)
+    rb-fsevent (0.9.5)
    rb-inotify (0.9.5)
      ffi (>= 0.5.0)
-    redcarpet (3.2.2)
-    rouge (1.7.4)
+    redcarpet (3.3.2)
+    rouge (1.9.1)
    safe_yaml (1.0.4)
-    sass (3.4.9)
-    scss-lint (0.31.0)
+    sass (3.4.18)
+    scss_lint (0.41.0)
      rainbow (~> 2.0)
-      sass (~> 3.4.1)
-    timers (4.0.1)
+      sass (~> 3.4.15)
+    timers (4.0.4)
      hitimes
    toml (0.1.2)
      parslet (~> 1.5.0)
-    yajl-ruby (1.1.0)
+    yajl-ruby (1.2.1)

 PLATFORMS
  ruby

 DEPENDENCIES
-  jekyll (~> 2.5.2)
-  rouge (~> 1.7.4)
-  sass (~> 3.4.9)
-  scss-lint (~> 0.31)
+  jekyll (~> 2.5.3)
+  jekyll-redirect-from (~> 0.8.0)
+  jekyll-sitemap (~> 0.8.1)
+  rouge (~> 1.9.1)
+  sass (~> 3.4.18)
+  scss_lint (~> 0.41)
+
+BUNDLED WITH
+   1.10.6
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,7 +1,7 @@
 /*!
 * Bootstrap's Gruntfile
 * http://getbootstrap.com
- * Copyright 2013-2014 Twitter, Inc.
+ * Copyright 2013-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@ -190,10 +190,6 @@ module.exports = function (grunt) {
        src: '<%= concat.bootstrap.dest %>',
        dest: 'dist/js/<%= pkg.name %>.min.js'
      },
-      customize: {
-        src: configBridge.paths.customizerJs,
-        dest: 'docs/assets/js/customize.min.js'
-      },
      docsJs: {
        src: configBridge.paths.docsJs,
        dest: 'docs/assets/js/docs.min.js'
@ -210,6 +206,7 @@ module.exports = function (grunt) {
    // CSS build configuration
    scsslint: {
      options: {
+        bundleExec: true,
        config: 'scss/.scsslint.yml',
        reporterOutput: null
      },
@ -260,7 +257,7 @@ module.exports = function (grunt) {
      options: {
        // TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
        //    and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
-        compatibility: 'ie8',
+        compatibility: 'ie9',
        keepSpecialComments: '*',
        sourceMap: true,
        noAdvanced: true
@ -282,16 +279,6 @@ module.exports = function (grunt) {
      }
    },

-    usebanner: {
-      options: {
-        position: 'top',
-        banner: '<%= banner %>'
-      },
-      files: {
-        src: 'dist/css/*.css'
-      }
-    },
-
    csscomb: {
      options: {
        config: 'scss/.csscomb.json'
@ -336,6 +323,7 @@ module.exports = function (grunt) {

    jekyll: {
      options: {
+        bundleExec: true,
        config: '_config.yml'
      },
      docs: {},
@ -350,8 +338,7 @@ module.exports = function (grunt) {
      options: {
        ignore: [
          'Element “img” is missing required attribute “src”.',
-          'Bad value “X-UA-Compatible” for attribute “http-equiv” on element “meta”.',
-          'Attribute “autocomplete” not allowed on element “input” at this point.',
+          'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
          'Attribute “autocomplete” not allowed on element “button” at this point.',
          'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
          'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
@ -403,14 +390,6 @@ module.exports = function (grunt) {
    exec: {
      npmUpdate: {
        command: 'npm update'
-      },
-      bundleUpdate: {
-        command: function () {
-          // Update dev gems and all the test gemsets
-          return 'bundle update && ' + glob.sync('test-infra/gemfiles/*.gemfile').map(function (gemfile) {
-            return 'BUNDLE_GEMFILE=' + gemfile + ' bundle update';
-          }).join(' && ');
-        }
      }
    },

@ -438,7 +417,7 @@ module.exports = function (grunt) {
  require('time-grunt')(grunt);

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

  var runSubset = function (subset) {
    return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
@ -467,6 +446,7 @@ module.exports = function (grunt) {
      runSubset('sauce-js-unit') &&
      // Skip Sauce on Travis when [skip sauce] is in the commit message
      isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
+    testSubtasks.push('babel:dev');
    testSubtasks.push('connect');
    testSubtasks.push('saucelabs-qunit');
  }
@ -474,7 +454,7 @@ module.exports = function (grunt) {
  grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);

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

  grunt.registerTask('test-scss', ['scsslint']);

@ -486,7 +466,7 @@ module.exports = function (grunt) {
  // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
  grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);

-  grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
+  grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'autoprefixer:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);

  // Full distribution task.
  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
@ -535,7 +515,4 @@ module.exports = function (grunt) {
      done();
    });
  });
-  // Task for updating the cached RubyGem packages used by the Travis build (which are controlled by test-infra/Gemfile.lock).
-  // This task should be run and the updated file should be committed whenever Bootstrap's RubyGem dependencies change.
-  grunt.registerTask('update-gemfile-lock', ['exec:bundleUpdate']);
 };
--- a/README.md
+++ b/README.md
@ -26,12 +26,13 @@ To get started, check out <http://getbootstrap.com>!

 Several quick start options are available:

- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.5.zip).
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.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.com): `npm install bootstrap`.
 - Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap`.
 - Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`.
+- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).

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

--- a/_config.yml
+++ b/_config.yml
@ -20,6 +20,7 @@ exclude:          [assets/scss/]

 gems:
  - jekyll-redirect-from
+  - jekyll-sitemap

 # Custom vars
 current_version:  4.0.0-alpha
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
--- a/dist/css/bootstrap.css.map
+++ b/dist/css/bootstrap.css.map
--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/dist/css/bootstrap.min.css.map
+++ b/dist/css/bootstrap.min.css.map
--- a/dist/js/bootstrap.js
+++ b/dist/js/bootstrap.js
@ -2058,7 +2058,7 @@ var Modal = (function ($) {
        this._originalBodyPadding = document.body.style.paddingRight || '';

        if (this._isBodyOverflowing) {
-          document.body.style.paddingRight = bodyPadding + (this._scrollbarWidth + 'px');
+          document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
        }
      }
    }, {
@ -2766,7 +2766,7 @@ var Tooltip = (function ($) {
  var DefaultType = {
    animation: 'boolean',
    template: 'string',
-    title: '(string|function)',
+    title: '(string|element|function)',
    trigger: 'string',
    delay: '(number|object)',
    html: 'boolean',
@ -3052,16 +3052,31 @@ var Tooltip = (function ($) {
    }, {
      key: 'setContent',
      value: function setContent() {
-        var tip = this.getTipElement();
-        var title = this.getTitle();
-        var method = this.config.html ? 'innerHTML' : 'innerText';
+        var $tip = $(this.getTipElement());

-        $(tip).find(Selector.TOOLTIP_INNER)[0][method] = title;
+        this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());

-        $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+        $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

        this.cleanupTether();
      }
+    }, {
+      key: 'setElementContent',
+      value: function setElementContent($element, content) {
+        var html = this.config.html;
+        if (typeof content === 'object' && (content.nodeType || content.jquery)) {
+          // content is a DOM node or a jQuery
+          if (html) {
+            if (!$(content).parent().is($element)) {
+              $element.empty().append(content);
+            }
+          } else {
+            $element.text($(content).text());
+          }
+        } else {
+          $element[html ? 'html' : 'text'](content);
+        }
+      }
    }, {
      key: 'getTitle',
      value: function getTitle() {
@ -3351,7 +3366,7 @@ var Popover = (function ($) {
  });

  var DefaultType = $.extend({}, Tooltip.DefaultType, {
-    content: '(string|function)'
+    content: '(string|element|function)'
  });

  var ClassName = {
@ -3415,19 +3430,13 @@ var Popover = (function ($) {
    }, {
      key: 'setContent',
      value: function setContent() {
-        var tip = this.getTipElement();
-        var title = this.getTitle();
-        var content = this._getContent();
-        var titleElement = $(tip).find(Selector.TITLE)[0];
-
-        if (titleElement) {
-          titleElement[this.config.html ? 'innerHTML' : 'innerText'] = title;
-        }
+        var $tip = $(this.getTipElement());

        // we use append for html objects to maintain js events
-        $(tip).find(Selector.CONTENT).children().detach().end()[this.config.html ? typeof content === 'string' ? 'html' : 'append' : 'text'](content);
+        this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
+        this.setElementContent($tip.find(Selector.CONTENT), this._getContent());

-        $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+        $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

        this.cleanupTether();
      }
--- a/dist/js/bootstrap.min.js
+++ b/dist/js/bootstrap.min.js
--- a/dist/js/umd/modal.js
+++ b/dist/js/umd/modal.js
@ -444,7 +444,7 @@
          this._originalBodyPadding = document.body.style.paddingRight || '';

          if (this._isBodyOverflowing) {
-            document.body.style.paddingRight = bodyPadding + (this._scrollbarWidth + 'px');
+            document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
          }
        }
      }, {
--- a/dist/js/umd/popover.js
+++ b/dist/js/umd/popover.js
@ -54,7 +54,7 @@
    });

    var DefaultType = $.extend({}, _Tooltip2['default'].DefaultType, {
-      content: '(string|function)'
+      content: '(string|element|function)'
    });

    var ClassName = {
@ -118,19 +118,13 @@
      }, {
        key: 'setContent',
        value: function setContent() {
-          var tip = this.getTipElement();
-          var title = this.getTitle();
-          var content = this._getContent();
-          var titleElement = $(tip).find(Selector.TITLE)[0];
-
-          if (titleElement) {
-            titleElement[this.config.html ? 'innerHTML' : 'innerText'] = title;
-          }
+          var $tip = $(this.getTipElement());

          // we use append for html objects to maintain js events
-          $(tip).find(Selector.CONTENT).children().detach().end()[this.config.html ? typeof content === 'string' ? 'html' : 'append' : 'text'](content);
+          this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
+          this.setElementContent($tip.find(Selector.CONTENT), this._getContent());

-          $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+          $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

          this.cleanupTether();
        }
--- a/dist/js/umd/tooltip.js
+++ b/dist/js/umd/tooltip.js
@ -60,7 +60,7 @@
    var DefaultType = {
      animation: 'boolean',
      template: 'string',
-      title: '(string|function)',
+      title: '(string|element|function)',
      trigger: 'string',
      delay: '(number|object)',
      html: 'boolean',
@ -346,16 +346,31 @@
      }, {
        key: 'setContent',
        value: function setContent() {
-          var tip = this.getTipElement();
-          var title = this.getTitle();
-          var method = this.config.html ? 'innerHTML' : 'innerText';
+          var $tip = $(this.getTipElement());

-          $(tip).find(Selector.TOOLTIP_INNER)[0][method] = title;
+          this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());

-          $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+          $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

          this.cleanupTether();
        }
+      }, {
+        key: 'setElementContent',
+        value: function setElementContent($element, content) {
+          var html = this.config.html;
+          if (typeof content === 'object' && (content.nodeType || content.jquery)) {
+            // content is a DOM node or a jQuery
+            if (html) {
+              if (!$(content).parent().is($element)) {
+                $element.empty().append(content);
+              }
+            } else {
+              $element.text($(content).text());
+            }
+          } else {
+            $element[html ? 'html' : 'text'](content);
+          }
+        }
      }, {
        key: 'getTitle',
        value: function getTitle() {
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@ -1,7 +1,5 @@
 - title: Getting started
  pages:
-    # - title: JavaScript
-    # - title: Accessibility
    - title: Introduction
    - title: Download
    - title: Browsers & devices
@ -52,26 +50,6 @@
    - title: Carousel
    - title: Utilities

-# - title: Examples
-#   pages:
-#     - title: Starter template
-#     - title: Grid
-#     - title: Jumbotron
-#     - title: Narrow jumbotron
-#     - title: Navbar
-#     - title: Navbar top
-#     - title: Navbar top fixed
-#     - title: Cover
-#     - title: Album
-#     - title: Carousel
-#     - title: Blog
-#     - title: Dashboard
-#     - title: Sign-in page
-#     - title: Justified nav
-#     - title: Sticky footer
-#     - title: Sticky footer with navbar
-#     - title: Offcanvas
-
 # - title: Extend
 #   pages:
 #     - title: Approach
@ -79,10 +57,9 @@

 - title: About
  pages:
-    # - title: JavaScript
-    # - title: Accessibility
    - title: History
    - title: Team
+    - title: Accessibility
    - title: Brand
    - title: License
    - title: Translations
--- a/docs/_data/translations.yml
+++ b/docs/_data/translations.yml
@ -1,59 +1,9 @@
 - name: Chinese
  code: zh
  description: Bootstrap 中文文档
-  url: http://v3.bootcss.com/
+  url: http://v4.bootcss.com/
  
- name: Danish
-  code: da
-  description: Bootstrap på Dansk
-  url: http://getbootstrap.dk/
-
- name: French
-  code: fr
-  description: Bootstrap en Français
-  url: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
-
- name: German
-  code: de
-  description: Bootstrap auf Deutsch
-  url: http://holdirbootstrap.de/
-
- name: Italian
-  code: it
-  description: Bootstrap in Italiano
-  url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
-
- name: Korean
-  code: ko
-  description: Bootstrap 한국어
-  url: http://bootstrapk.com/
-
- name: Brazilian Portuguese
-  code: pt-BR
-  description: Bootstrap em Português do Brasil
-  url: http://bootstrapbrasil.github.io/
-
- name: Russian
-  code: ru
-  description: Bootstrap по-русски
-  url: http://www.oneskyapp.com/ru/docs/bootstrap/
-
- name: Spanish
-  code: es
-  description: Bootstrap en Español
-  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
-
- name: Vietnamese
-  code: vi
-  description: Bootstrap bằng tiếng Việt
-  url: http://getbootstrap.com.vn
+- name: Chinese
+  code: zh
+  description: Bootstrap 4 中文文档教程
+  url: http://boot4.com/
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@ -3,8 +3,8 @@
    <ul class="bd-footer-links">
      <li><a href="{{ site.repo }}">GitHub</a></li>
      <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
-      <li><a href="../getting-started/#examples">Examples</a></li>
-      <li><a href="../about/">About</a></li>
+      <li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/about/history/">About</a></li>
    </ul>
    <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>. 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>Currently v{{ site.current_version }}. Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
@ -12,7 +12,7 @@
 </footer>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script>
+<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>

 {% if site.github %}
  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
@ -30,6 +30,10 @@

 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
+<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
+
+{% if page.layout == "docs" %}
+<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.js"></script>

 <script>
 SimpleJekyllSearch.init({
@ -37,9 +41,12 @@ SimpleJekyllSearch.init({
  resultsContainer: document.getElementById('search-results'),
  searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
  noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
-  dataSource: '/search.json'
+  json: '/search.json'
 })
+</script>
+{% endif %}

+<script>
 Holder.addTheme('gray', {
  background: '#777',
  foreground: 'rgba(255,255,255,.75)',
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@ -19,16 +19,8 @@
 <!-- Documentation extras -->
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">

-<!-- Google Web fonts -->
-<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
-<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600' rel='stylesheet' type='text/css'>
-
-<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
-<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
-
 <!-- Favicons -->
-<link rel="apple-touch-icon-precomposed" href="{{ site.baseurl }}/apple-touch-icon-precomposed.png">
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
 <link rel="icon" href="{{ site.baseurl }}/favicon.ico">

 <script>
--- a/docs/_includes/page-headers.html
+++ b/docs/_includes/page-headers.html
@ -16,7 +16,7 @@
 {% elsif page.group == "components" %}
  <h1>Components</h1>
  <p class="lead">
-    Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
+    Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
  </p>
 {% elsif page.group == "javascript" %}
  <h1>JavaScript plugins</h1>
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -12,7 +12,9 @@

    {% include nav-home.html %}

+    <div id="content">
        {{ content }}
+    </div>

    {% include footer.html %}
  </body>
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@ -25,7 +25,7 @@
          {% include nav-docs.html %}
        </div>
        <div class="col-md-9 col-md-pull-3 bd-content">
-          <h1 class="bd-title">{{ page.title }}</h1>
+          <h1 class="bd-title" id="content">{{ page.title }}</h1>
          {{ content }}
        </div>
      </div>
--- a/docs/_plugins/bridge.rb
+++ b/docs/_plugins/bridge.rb
@ -3,7 +3,8 @@ require 'yaml'
 module Bridge
  class Generator < Jekyll::Generator
    def generate(site)
-      site.data["configBridge"] = YAML.load_file("./grunt/configBridge.json")
+      path = File.join(site.source, "../grunt/configBridge.json")
+      site.data["configBridge"] = YAML.load_file(path)
    end
  end
 end
--- a/docs/_plugins/callout.rb
+++ b/docs/_plugins/callout.rb
@ -1,4 +1,4 @@
-# Source: http://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
+# Source: https://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin

 module Jekyll
  module Tags
--- a/docs/assets/css/docs.min.css
+++ b/docs/assets/css/docs.min.css
--- a/docs/assets/css/docs.min.css.map
+++ b/docs/assets/css/docs.min.css.map
--- a/docs/assets/img/bs-themes.png
+++ b/docs/assets/img/bs-themes.png
--- a/docs/assets/img/devices.png
+++ b/docs/assets/img/devices.png
--- a/docs/assets/img/expo-lyft.jpg
+++ b/docs/assets/img/expo-lyft.jpg
--- a/docs/assets/img/expo-newsweek.jpg
+++ b/docs/assets/img/expo-newsweek.jpg
--- a/docs/assets/img/expo-riot.jpg
+++ b/docs/assets/img/expo-riot.jpg
--- a/docs/assets/img/expo-vogue.jpg
+++ b/docs/assets/img/expo-vogue.jpg
--- a/docs/assets/img/sass-less.png
+++ b/docs/assets/img/sass-less.png
--- a/docs/assets/img/sass.png
+++ b/docs/assets/img/sass.png
--- a/docs/assets/js/docs.min.js
+++ b/docs/assets/js/docs.min.js
--- a/docs/assets/js/ie-emulation-modes-warning.js
+++ b/docs/assets/js/ie-emulation-modes-warning.js
@ -25,7 +25,7 @@
    // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
    // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
    // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
-    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line
+    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')()
    if (jscriptVersion === undefined) {
      return 11 // IE11+ not in emulation mode
    }
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@ -28,6 +28,9 @@
    $('.tooltip-test').tooltip()
    $('.popover-test').popover()

+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
+
    // Disable empty links in docs examples
    $('.bd-example [href=#]').click(function (e) {
      e.preventDefault()
--- a/docs/assets/js/vendor/anchor.js
+++ b/docs/assets/js/vendor/anchor.js
@ -1,196 +0,0 @@
-/*!
- * AnchorJS - v1.0.1 - 2015-05-15
- * https://github.com/bryanbraun/anchorjs
- * Copyright (c) 2015 Bryan Braun; Licensed MIT
- */
-
-function AnchorJS(options) {
-  'use strict';
-
-  this.options = options || {};
-
-  this._applyRemainingDefaultOptions = function(opts) {
-    this.options.icon = this.options.hasOwnProperty('icon') ? opts.icon : '&#xe9cb'; // Accepts characters (and also URLs?), like  '#', '¶', '❡', or '§'.
-    this.options.visible = this.options.hasOwnProperty('visible') ? opts.visible : 'hover'; // Also accepts 'always'
-    this.options.placement = this.options.hasOwnProperty('placement') ? opts.placement : 'right'; // Also accepts 'left'
-    this.options.class = this.options.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name.
-  };
-
-  this._applyRemainingDefaultOptions(options);
-
-  this.add = function(selector) {
-    var elements,
-        elsWithIds,
-        idList,
-        elementID,
-        i,
-        roughText,
-        tidyText,
-        index,
-        count,
-        newTidyText,
-        readableID,
-        anchor,
-        div,
-        anchorNodes;
-
-    this._applyRemainingDefaultOptions(this.options);
-
-    // Provide a sensible default selector, if none is given.
-    if (!selector) {
-      selector = 'h1, h2, h3, h4, h5, h6';
-    } else if (typeof selector !== 'string') {
-      throw new Error('The selector provided to AnchorJS was invalid.');
-    }
-
-    elements = document.querySelectorAll(selector);
-    if (elements.length === 0) {
-      return false;
-    }
-
-    this._addBaselineStyles();
-
-    // We produce a list of existing IDs so we don't generate a duplicate.
-    elsWithIds = document.querySelectorAll('[id]');
-    idList = [].map.call(elsWithIds, function assign(el) {
-      return el.id;
-    });
-
-    for (i = 0; i < elements.length; i++) {
-
-      if (elements[i].hasAttribute('id')) {
-        elementID = elements[i].getAttribute('id');
-      } else {
-        roughText = elements[i].textContent;
-
-        // Refine it so it makes a good ID. Strip out non-safe characters, replace
-        // spaces with hyphens, truncate to 32 characters, and make toLowerCase.
-        //
-        // Example string:                                // '⚡⚡⚡ Unicode icons are cool--but don't belong in a URL.'
-        tidyText = roughText.replace(/[^\w\s-]/gi, '')    // ' Unicode icons are cool--but dont belong in a URL'
-                                .replace(/\s+/g, '-')     // '-Unicode-icons-are-cool--but-dont-belong-in-a-URL'
-                                .replace(/-{2,}/g, '-')   // '-Unicode-icons-are-cool-but-dont-belong-in-a-URL'
-                                .substring(0, 32)         // '-Unicode-icons-are-cool-but-dont'
-                                .replace(/^-+|-+$/gm, '') // 'Unicode-icons-are-cool-but-dont'
-                                .toLowerCase();           // 'unicode-icons-are-cool-but-dont'
-
-        // Compare our generated ID to existing IDs (and increment it if needed)
-        // before we add it to the page.
-        newTidyText = tidyText;
-        count = 0;
-        do {
-          if (index !== undefined) {
-            newTidyText = tidyText + '-' + count;
-          }
-          // .indexOf is supported in IE9+.
-          index = idList.indexOf(newTidyText);
-          count += 1;
-        } while (index !== -1);
-        index = undefined;
-        idList.push(newTidyText);
-
-        // Assign it to our element.
-        // Currently the setAttribute element is only supported in IE9 and above.
-        elements[i].setAttribute('id', newTidyText);
-
-        elementID = newTidyText;
-      }
-
-      readableID = elementID.replace(/-/g, ' ');
-
-      anchor = '<a class="anchorjs-link ' + this.options.class + '" href="#' + elementID + '" aria-label="Anchor link for: ' + readableID + '" data-anchorjs-icon="' + this.options.icon + '"></a>';
-
-      div = document.createElement('div');
-      div.innerHTML = anchor;
-      anchorNodes = div.childNodes;
-
-      if (this.options.visible === 'always') {
-        anchorNodes[0].style.opacity = '1';
-      }
-
-      if (this.options.icon === '&#xe9cb') {
-        anchorNodes[0].style.fontFamily = 'anchorjs-icons';
-        anchorNodes[0].style.fontStyle = 'normal';
-        anchorNodes[0].style.fontVariant = 'normal';
-        anchorNodes[0].style.fontWeight = 'normal';
-      }
-
-      if (this.options.placement === 'left') {
-        anchorNodes[0].style.position = 'absolute';
-        anchorNodes[0].style.marginLeft = '-1em';
-        anchorNodes[0].style.paddingRight = '0.5em';
-        elements[i].insertBefore(anchorNodes[0], elements[i].firstChild);
-      } else { // if the option provided is `right` (or anything else).
-        anchorNodes[0].style.paddingLeft = '0.375em';
-        elements[i].appendChild(anchorNodes[0]);
-      }
-    }
-
-    return this;
-  };
-
-  this.remove = function(selector) {
-    var domAnchor,
-        elements = document.querySelectorAll(selector);
-    for (var i = 0; i < elements.length; i++) {
-      domAnchor = elements[i].querySelector('.anchorjs-link');
-      if (domAnchor) {
-        elements[i].removeChild(domAnchor);
-      }
-    }
-    return this;
-  };
-
-  this._addBaselineStyles = function() {
-    // We don't want to add global baseline styles if they've been added before.
-    if (document.head.querySelector('style.anchorjs') !== null) {
-      return;
-    }
-
-    var style = document.createElement('style'),
-        linkRule =
-        ' .anchorjs-link {'                       +
-        '   opacity: 0;'                          +
-        '   text-decoration: none;'               +
-        '   -webkit-font-smoothing: antialiased;' +
-        '   -moz-osx-font-smoothing: grayscale;'  +
-        ' }',
-        hoverRule =
-        ' *:hover > .anchorjs-link,'              +
-        ' .anchorjs-link:focus  {'                +
-        '   opacity: 1;'                          +
-        ' }',
-        anchorjsLinkFontFace =
-        ' @font-face {'                           +
-        '   font-family: "anchorjs-icons";'       +
-        '   font-style: normal;'                  +
-        '   font-weight: normal;'                 + // Icon from icomoon; 10px wide & 10px tall; 2 empty below & 4 above
-        '   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype");' +
-        ' }',
-        pseudoElContent =
-        ' [data-anchorjs-icon]::after {'          +
-        '   content: attr(data-anchorjs-icon);'   +
-        ' }',
-        firstStyleEl;
-
-    style.className = 'anchorjs';
-    style.appendChild(document.createTextNode('')); // Necessary for Webkit.
-
-    // We place it in the head with the other style tags, if possible, so as to
-    // not look out of place. We insert before the others so these styles can be
-    // overridden if necessary.
-    firstStyleEl = document.head.querySelector('[rel="stylesheet"], style');
-    if (firstStyleEl === undefined) {
-      document.head.appendChild(style);
-    } else {
-      document.head.insertBefore(style, firstStyleEl);
-    }
-
-    style.sheet.insertRule(linkRule, style.sheet.cssRules.length);
-    style.sheet.insertRule(hoverRule, style.sheet.cssRules.length);
-    style.sheet.insertRule(pseudoElContent, style.sheet.cssRules.length);
-    style.sheet.insertRule(anchorjsLinkFontFace, style.sheet.cssRules.length);
-  };
-}
-
-var anchors = new AnchorJS();
--- a/docs/assets/js/vendor/anchor.min.js
+++ b/docs/assets/js/vendor/anchor.min.js
@ -0,0 +1,6 @@
+/*!
+ * AnchorJS - v1.2.1 - 2015-07-02
+ * https://github.com/bryanbraun/anchorjs
+ * Copyright (c) 2015 Bryan Braun; Licensed MIT
+ */
+function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,r,h,c,g;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i<e.length;i++){if(e[i].hasAttribute("id"))n=e[i].getAttribute("id");else{s=e[i].textContent,a=s.replace(/[^\w\s-]/gi,"").replace(/\s+/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase(),h=a,r=0;do void 0!==l&&(h=a+"-"+r),l=o.indexOf(h),r+=1;while(-1!==l);l=void 0,o.push(h),e[i].setAttribute("id",h),n=h}c=n.replace(/-/g," "),g=document.createElement("a"),g.className="anchorjs-link "+this.options.class,g.href="#"+n,g.setAttribute("aria-label","Anchor link for: "+c),g.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(g.style.opacity="1"),""===this.options.icon&&(g.style.fontFamily="anchorjs-icons",g.style.fontStyle="normal",g.style.fontVariant="normal",g.style.fontWeight="normal",g.style.lineHeight=1),"left"===this.options.placement?(g.style.position="absolute",g.style.marginLeft="-1em",g.style.paddingRight="0.5em",e[i].insertBefore(g,e[i].firstChild)):(g.style.paddingLeft="0.375em",e[i].appendChild(g))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o<t.length;o++)e=t[o].querySelector(".anchorjs-link"),e&&t[o].removeChild(e);return this},this._addBaselineStyles=function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link {   opacity: 0;   text-decoration: none;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus  {   opacity: 1; }",n=' @font-face {   font-family: "anchorjs-icons";   font-style: normal;   font-weight: normal;   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after {   content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length)}}}var anchors=new AnchorJS;
--- a/docs/assets/js/vendor/holder.min.js
+++ b/docs/assets/js/vendor/holder.min.js
--- a/docs/assets/js/vendor/jekyll-search.js
+++ b/docs/assets/js/vendor/jekyll-search.js
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@ -293,7 +293,8 @@
  .bg-success,
  .bg-info,
  .bg-warning,
-  .bg-danger {
+  .bg-danger,
+  .bg-inverse {
    &:not(.navbar) {
      padding: .5rem;
      margin-top: .5rem;
--- a/docs/assets/scss/_featured-sites.scss
+++ b/docs/assets/scss/_featured-sites.scss
@ -5,7 +5,7 @@
 .bd-featured-sites .col-xs-6 {
  padding: 1px;
 }
-.bd-featured-sites .img-responsive {
+.bd-featured-sites .img-fluid {
  margin-top: 0;
 }

--- a/docs/assets/scss/_featurettes.scss
+++ b/docs/assets/scss/_featurettes.scss
@ -12,6 +12,14 @@
    text-align: left;
  }

+  .lead {
+    margin-right: auto;
+    margin-bottom: 2rem;
+    margin-left: auto;
+    font-size: 1rem;
+    text-align: center;
+  }
+
  @include media-breakpoint-up(sm) {
    text-align: left;
  }
@ -31,12 +39,9 @@
  font-size: 2rem;
  font-weight: normal;
  color: #333;
-
-  + .lead {
-    font-size: 1rem;
-    margin-bottom: 2rem;
-  }
+  text-align: center;
 }
+
 .half-rule {
  width: 6rem;
  margin: 2.5rem auto;
@ -67,7 +72,7 @@
 }

@media (min-width: 480px) {
-  .bd-featurette .img-responsive {
+  .bd-featurette .img-fluid {
    margin-top: 2rem;
  }
 }
@ -86,7 +91,7 @@
  .bd-featurette .lead {
    max-width: 80%;
  }
-  .bd-featurette .img-responsive {
+  .bd-featurette .img-fluid {
    margin-top: 0;
  }
 }
--- a/docs/assets/scss/_skiplink.scss
+++ b/docs/assets/scss/_skiplink.scss
@ -0,0 +1,12 @@
+#skippy {
+  display: block;
+  padding: 1em;
+  color: #fff;
+  background-color: $bd-purple;
+  outline: 0;
+
+  .skiplink-text {
+    padding: .5em;
+    outline: 1px dotted;
+  }
+}
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@ -1,8 +1,8 @@
 /*!
 * Bootstrap Docs (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
+ * Copyright 2011-2015 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see http://creativecommons.org/licenses/by/3.0/.
+ * details, see https://creativecommons.org/licenses/by/3.0/.
 */

 // Dev notes
@ -46,6 +46,7 @@ $bd-info:           #5bc0de;
@import "ads";
@import "content";
@import "page-header";
+@import "skiplink";
@import "sidebar";
@import "footer";
@import "component-examples";
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@ -68,19 +68,12 @@ Instead of applying button sizing classes to every button in a group, just add `
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
-  <br>
-  <div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
-    <button type="button" class="btn btn-secondary">Left</button>
-    <button type="button" class="btn btn-secondary">Middle</button>
-    <button type="button" class="btn btn-secondary">Right</button>
-  </div>
 </div>

 {% highlight html %}
 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
 <div class="btn-group" role="group" aria-label="...">...</div>
 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
-<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}

 ## Nesting
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@ -26,6 +26,9 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 <!-- Indicates a successful or positive action -->
 <button type="button" class="btn btn-success">Success</button>

+<!-- Contextual button for informational alert messages -->
+<button type="button" class="btn btn-info">Info</button>
+
 <!-- Indicates caution should be taken with this action -->
 <button type="button" class="btn btn-warning">Warning</button>

@ -63,6 +66,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 <button type="button" class="btn btn-primary-outline">Primary</button>
 <button type="button" class="btn btn-secondary-outline">Secondary</button>
 <button type="button" class="btn btn-success-outline">Success</button>
+<button type="button" class="btn btn-info-outline">Info</button>
 <button type="button" class="btn btn-warning-outline">Warning</button>
 <button type="button" class="btn btn-danger-outline">Danger</button>
 {% endexample %}
--- a/docs/components/card.md
+++ b/docs/components/card.md
@ -19,7 +19,7 @@ Cards require a small amount of markup and classes to provide you with as much c

 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@ -34,7 +34,7 @@ Cards support a wide variety of content, including images, text, list groups, li

 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@ -53,7 +53,7 @@ Cards support a wide variety of content, including images, text, list groups, li

 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
@ -75,7 +75,7 @@ Cards support a wide variety of content, including images, text, list groups, li
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  </div>
-  <img data-src="holder.js/100%x180/?text=Image" alt="Card image">
+  <img data-src="holder.js/100px180/?text=Image" alt="Card image">
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
@ -86,7 +86,7 @@ Cards support a wide variety of content, including images, text, list groups, li

 ## Sizing

-Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
+Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.

 Using the grid:

@ -112,7 +112,7 @@ Using the grid:
 Using custom widths:

 {% example html %}
-<div class="card card-block" style="width: 20rem;">
+<div class="card card-block" style="width: 18rem;">
  <h3 class="card-title">Special title treatment</h3>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
@ -196,7 +196,7 @@ Similar to headers and footers, cards include top and bottom image caps.

 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -209,7 +209,7 @@ Similar to headers and footers, cards include top and bottom image caps.
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
-  <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
 </div>
 {% endexample %}

@ -219,7 +219,7 @@ Turn an image into a card background and overlay your card's text. Depending on

 {% example html %}
 <div class="card card-inverse">
-  <img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image">
+  <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -295,10 +295,12 @@ Cards include their own variant classes for quickly changing the `background-col

 Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.

+Only applies to small devices and above.
+
 {% example html %}
 <div class="card-group">
  <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -306,7 +308,7 @@ Use card groups to render cards as a single, attached element with equal width a
    </div>
  </div>
  <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@ -314,7 +316,7 @@ Use card groups to render cards as a single, attached element with equal width a
    </div>
  </div>
  <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@ -328,13 +330,15 @@ Use card groups to render cards as a single, attached element with equal width a

 Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.

+Only applies to small devices and above.
+
 **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.

 {% example html %}
 <div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -342,7 +346,7 @@ Need a set of equal width and height cards that aren't attached to one another?
      </div>
    </div>
    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@ -350,7 +354,7 @@ Need a set of equal width and height cards that aren't attached to one another?
      </div>
    </div>
    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@ -363,14 +367,14 @@ Need a set of equal width and height cards that aren't attached to one another?

 ## Columns

-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`.
+Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.

 **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).

 {% example html %}
 <div class="card-columns">
  <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -387,7 +391,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
    </blockquote>
  </div>
  <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@ -410,7 +414,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
-    <img class="card-img" data-src="holder.js/100%x260/" alt="Card image">
+    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
  </div>
  <div class="card card-block text-right">
    <blockquote class="card-blockquote">
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@ -96,7 +96,7 @@ The collapse plugin utilizes a few classes to handle the heavy lifting:
 - `.collapse.in` shows the content
 - `.collapsing` is added when the transition starts, and removed when it finishes

-These classes can be found in `component-animations.less`.
+These classes can be found in `_animation.scss`.

 ### Via data attributes

--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@ -4,7 +4,7 @@ title: Dropdowns
 group: components
 ---

-Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin.
+Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)

 ## Contents

@ -34,10 +34,10 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.

 {% example html %}
 <div class="dropdown open">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
-  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@ -169,7 +169,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for

 ### Form groups

-The `.form-group` class is the easiest way to add some structure to forms. It's only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
+The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.

 {% example html %}
 <form>
@ -186,7 +186,7 @@ The `.form-group` class is the easiest way to add some structure to forms. It's

 ### Inline forms

-Use the `.inline-form` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:

 - Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
 - Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
@ -396,15 +396,15 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.

 {% example html %}
-<form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Email</label>
+<form>
+  <div class="form-group row">
+    <label class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
-  <div class="form-group">
-    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+  <div class="form-group row">
+    <label for="inputPassword" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
@ -535,7 +535,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas

 ## Validation

-Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
+Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.

 {% comment %}
 {% callout warning %}
@ -549,15 +549,15 @@ Ensure that an alternative indication of state is also provided. For instance, y

 {% example html %}
 <div class="form-group has-success">
-  <label class="control-label" for="inputSuccess1">Input with success</label>
+  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
 </div>
 <div class="form-group has-warning">
-  <label class="control-label" for="inputWarning1">Input with warning</label>
+  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
 </div>
 <div class="form-group has-error">
-  <label class="control-label" for="inputError1">Input with error</label>
+  <label class="form-control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control form-control-error" id="inputError1">
 </div>

@ -603,7 +603,7 @@ We hide the default `<input>` with `opacity` and use the `.c-indicator` to build

 With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.

-In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](http://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
+In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.

 #### Checkboxes

--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@ -26,7 +26,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr
 <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
-    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of it's parent.</p>
+    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
 </div>
 {% endexample %}
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@ -180,7 +180,7 @@ Additionally, you may give a description of your modal dialog with `aria-describ
 {% callout info %}
 #### Embedding YouTube videos

-Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
 {% endcallout %}

 ## Optional sizes
@ -316,7 +316,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta

 ## Varying modal content based on trigger button

-Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
+Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.

 {% example html %}
 <div class="bd-example">
@ -336,11 +336,11 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
        <div class="modal-body">
          <form>
            <div class="form-group">
-              <label for="recipient-name" class="control-label">Recipient:</label>
+              <label for="recipient-name" class="form-control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
-              <label for="message-text" class="control-label">Message:</label>
+              <label for="message-text" class="form-control-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@ -16,7 +16,6 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e
 Here's what you need to know before getting started with the navbar:

 - Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
 - Use `.pull-left` and `.pull-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
@ -164,7 +163,13 @@ Although it's not required, you can wrap a navbar in a `.container` to center it

 ## Placement

-Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
+Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.
+
+{% example html %}
+<nav class="navbar navbar-full navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Full width</a>
+</nav>
+{% endexample %}

 {% example html %}
 <nav class="navbar navbar-fixed-top navbar-light bg-faded">
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@ -62,8 +62,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
 </ul>
 {% endexample %}
@ -316,8 +316,7 @@ When showing a new tab, the events fire in the following order:

 If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.

-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
+<table class="table table-bordered table-striped table-responsive">
  <thead>
   <tr>
     <th style="width: 150px;">Event Type</th>
@ -342,8 +341,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
    </tr>
  </tbody>
-  </table>
-</div>
+</table>

 {% highlight js %}
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@ -193,7 +193,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
      </tr>
      <tr>
        <td>content</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
        <td>''</td>
        <td>
          <p>Default content value if <code>data-content</code> attribute isn't present.</p>
@ -245,7 +245,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
      </tr>
      <tr>
        <td>title</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
        <td>''</td>
        <td>
          <p>Default title value if <code>title</code> attribute isn't present.</p>
@ -268,7 +268,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>offsets</td>
        <td>string</td>
        <td>'0 0'</td>
-        <td>Offset of the popover relative to it's target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
+        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
      </tr>
    </tbody>
  </table>
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@ -51,7 +51,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p

 ### Requires Bootstrap nav

-Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/nav/) for proper highlighting of active links.
+Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/navs/) for proper highlighting of active links.

 ### Requires relative positioning

@ -96,7 +96,7 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
 {% callout info %}
 #### Non-`:visible` target elements ignored

-Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
+Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
 {% endcallout %}

 ### Methods
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@ -203,7 +203,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
      </tr>
      <tr>
        <td>title</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
        <td>''</td>
        <td>
          <p>Default title value if <code>title</code> attribute isn't present.</p>
@ -226,7 +226,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>offsets</td>
        <td>string</td>
        <td>'0 0'</td>
-        <td>Offset of the popover relative to it's target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
+        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
      </tr>
    </tbody>
  </table>
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@ -13,7 +13,7 @@ Bootstrap includes dozens of utilities—classes with a single purpose. They're

 ## Spacing

-Assign `margin` or `padding` to an element or a subset of it's sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
+Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.

 ### Margin

@ -132,6 +132,7 @@ Similar to the contextual text color classes, easily set the background of an el
 <div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
 <div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
 <div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
+<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
 {% endexample %}

 {% callout info %}
@ -233,7 +234,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes

 ## Hidden content

-Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io).
+Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem.

 Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.

--- a/docs/content/images.md
+++ b/docs/content/images.md
@ -13,20 +13,20 @@ Opt your images into responsive behavior (so they never become larger than their

 ## Responsive images

-Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.

 <div class="bd-example">
-  <img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
+  <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image">
 </div>

 {% highlight html %}
-<img src="..." class="img-responsive" alt="Responsive image">
+<img src="..." class="img-fluid" alt="Responsive image">
 {% endhighlight %}

 {% callout warning %}
 #### SVG images and IE 9-10

-In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
+In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
 {% endcallout %}

 ## Image shapes
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@ -85,26 +85,26 @@ Traditional heading elements are designed to work best in the meat of your page
  <table class="table">
    <tbody>
      <tr>
-        <td><h1 class="display-4">Display 4</h1></td>
-      </tr>
-      <tr>
-      <td><h1 class="display-3">Display 3</h1></td>
+        <td><h1 class="display-1">Display 1</h1></td>
      </tr>
      <tr>
      <td><h1 class="display-2">Display 2</h1></td>
      </tr>
      <tr>
-      <td><h1 class="display-1">Display 1</h1></td>
+      <td><h1 class="display-3">Display 3</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-4">Display 4</h1></td>
      </tr>
    </tbody>
  </table>
 </div>

 {% highlight html %}
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-2">Display 2</h1>
 <h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
 {% endhighlight %}

 ## Lead
@ -235,3 +235,33 @@ Align terms and descriptions horizontally by using our grid system's predefined
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
+
+## Responsive typography
+
+*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+
+Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
+
+{% highlight scss %}
+html {
+  font-size: 14px;
+}
+
+@include media-breakpoint-up(sm) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  html {
+    font-size: 28px;
+  }
+}
+{% endhighlight %}
--- a/docs/dist/css/bootstrap.css
+++ b/docs/dist/css/bootstrap.css
--- a/docs/dist/css/bootstrap.css.map
+++ b/docs/dist/css/bootstrap.css.map
--- a/docs/dist/css/bootstrap.min.css
+++ b/docs/dist/css/bootstrap.min.css
--- a/docs/dist/css/bootstrap.min.css.map
+++ b/docs/dist/css/bootstrap.min.css.map
--- a/docs/dist/js/bootstrap.js
+++ b/docs/dist/js/bootstrap.js
@ -2058,7 +2058,7 @@ var Modal = (function ($) {
        this._originalBodyPadding = document.body.style.paddingRight || '';

        if (this._isBodyOverflowing) {
-          document.body.style.paddingRight = bodyPadding + (this._scrollbarWidth + 'px');
+          document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
        }
      }
    }, {
@ -2766,7 +2766,7 @@ var Tooltip = (function ($) {
  var DefaultType = {
    animation: 'boolean',
    template: 'string',
-    title: '(string|function)',
+    title: '(string|element|function)',
    trigger: 'string',
    delay: '(number|object)',
    html: 'boolean',
@ -3052,16 +3052,31 @@ var Tooltip = (function ($) {
    }, {
      key: 'setContent',
      value: function setContent() {
-        var tip = this.getTipElement();
-        var title = this.getTitle();
-        var method = this.config.html ? 'innerHTML' : 'innerText';
+        var $tip = $(this.getTipElement());

-        $(tip).find(Selector.TOOLTIP_INNER)[0][method] = title;
+        this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());

-        $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+        $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

        this.cleanupTether();
      }
+    }, {
+      key: 'setElementContent',
+      value: function setElementContent($element, content) {
+        var html = this.config.html;
+        if (typeof content === 'object' && (content.nodeType || content.jquery)) {
+          // content is a DOM node or a jQuery
+          if (html) {
+            if (!$(content).parent().is($element)) {
+              $element.empty().append(content);
+            }
+          } else {
+            $element.text($(content).text());
+          }
+        } else {
+          $element[html ? 'html' : 'text'](content);
+        }
+      }
    }, {
      key: 'getTitle',
      value: function getTitle() {
@ -3351,7 +3366,7 @@ var Popover = (function ($) {
  });

  var DefaultType = $.extend({}, Tooltip.DefaultType, {
-    content: '(string|function)'
+    content: '(string|element|function)'
  });

  var ClassName = {
@ -3415,19 +3430,13 @@ var Popover = (function ($) {
    }, {
      key: 'setContent',
      value: function setContent() {
-        var tip = this.getTipElement();
-        var title = this.getTitle();
-        var content = this._getContent();
-        var titleElement = $(tip).find(Selector.TITLE)[0];
-
-        if (titleElement) {
-          titleElement[this.config.html ? 'innerHTML' : 'innerText'] = title;
-        }
+        var $tip = $(this.getTipElement());

        // we use append for html objects to maintain js events
-        $(tip).find(Selector.CONTENT).children().detach().end()[this.config.html ? typeof content === 'string' ? 'html' : 'append' : 'text'](content);
+        this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
+        this.setElementContent($tip.find(Selector.CONTENT), this._getContent());

-        $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+        $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

        this.cleanupTether();
      }
--- a/docs/dist/js/bootstrap.min.js
+++ b/docs/dist/js/bootstrap.min.js
--- a/docs/dist/js/umd/modal.js
+++ b/docs/dist/js/umd/modal.js
@ -444,7 +444,7 @@
          this._originalBodyPadding = document.body.style.paddingRight || '';

          if (this._isBodyOverflowing) {
-            document.body.style.paddingRight = bodyPadding + (this._scrollbarWidth + 'px');
+            document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
          }
        }
      }, {
--- a/docs/dist/js/umd/popover.js
+++ b/docs/dist/js/umd/popover.js
@ -54,7 +54,7 @@
    });

    var DefaultType = $.extend({}, _Tooltip2['default'].DefaultType, {
-      content: '(string|function)'
+      content: '(string|element|function)'
    });

    var ClassName = {
@ -118,19 +118,13 @@
      }, {
        key: 'setContent',
        value: function setContent() {
-          var tip = this.getTipElement();
-          var title = this.getTitle();
-          var content = this._getContent();
-          var titleElement = $(tip).find(Selector.TITLE)[0];
-
-          if (titleElement) {
-            titleElement[this.config.html ? 'innerHTML' : 'innerText'] = title;
-          }
+          var $tip = $(this.getTipElement());

          // we use append for html objects to maintain js events
-          $(tip).find(Selector.CONTENT).children().detach().end()[this.config.html ? typeof content === 'string' ? 'html' : 'append' : 'text'](content);
+          this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
+          this.setElementContent($tip.find(Selector.CONTENT), this._getContent());

-          $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+          $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

          this.cleanupTether();
        }
--- a/docs/dist/js/umd/tooltip.js
+++ b/docs/dist/js/umd/tooltip.js
@ -60,7 +60,7 @@
    var DefaultType = {
      animation: 'boolean',
      template: 'string',
-      title: '(string|function)',
+      title: '(string|element|function)',
      trigger: 'string',
      delay: '(number|object)',
      html: 'boolean',
@ -346,16 +346,31 @@
      }, {
        key: 'setContent',
        value: function setContent() {
-          var tip = this.getTipElement();
-          var title = this.getTitle();
-          var method = this.config.html ? 'innerHTML' : 'innerText';
+          var $tip = $(this.getTipElement());

-          $(tip).find(Selector.TOOLTIP_INNER)[0][method] = title;
+          this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());

-          $(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
+          $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);

          this.cleanupTether();
        }
+      }, {
+        key: 'setElementContent',
+        value: function setElementContent($element, content) {
+          var html = this.config.html;
+          if (typeof content === 'object' && (content.nodeType || content.jquery)) {
+            // content is a DOM node or a jQuery
+            if (html) {
+              if (!$(content).parent().is($element)) {
+                $element.empty().append(content);
+              }
+            } else {
+              $element.text($(content).text());
+            }
+          } else {
+            $element[html ? 'html' : 'text'](content);
+          }
+        }
      }, {
        key: 'getTitle',
        value: function getTitle() {
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@ -15,9 +15,6 @@

    <!-- Custom styles for this template -->
    <link href="album.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -38,7 +35,7 @@
        </div>
      </div>
    </div>
-    <div class="navbar navbar-inverse navbar-static-top">
+    <div class="navbar navbar-static-top navbar-dark bg-inverse">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
          &#9776;
@ -63,41 +60,41 @@

        <div class="row">
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>

          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>

          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
@ -118,13 +115,16 @@
    <!-- 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.1/jquery.min.js"></script>
-    <script src="../../assets/js/vendor/holder.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
+    <script src="../../assets/js/vendor/holder.min.js"></script>
    <script>
      $(function () {
        Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
      });
    </script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/blog/index.html
+++ b/docs/examples/blog/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@ -14,17 +14,14 @@
    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
-
    <!-- Custom styles for this template -->
    <link href="carousel.css" rel="stylesheet">
  </head>
  <body>

-    <nav class="navbar navbar-default navbar-static-top">
+    <nav class="navbar navbar-static-top navbar-light bg-faded">
      <a href="#" class="navbar-brand">Carousel</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
@ -132,7 +129,7 @@
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
        </div>
      </div>

@ -144,7 +141,7 @@
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5 col-md-pull-7">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
        </div>
      </div>

@ -156,7 +153,7 @@
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
        </div>
      </div>

--- a/docs/examples/cover/index.html
+++ b/docs/examples/cover/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@ -16,36 +16,29 @@

    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>

-    <nav class="navbar navbar-inverse navbar-fixed-top">
-      <div class="container-fluid">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+    <nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
+      <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
-        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav navbar-right">
-            <li><a href="#">Dashboard</a></li>
-            <li><a href="#">Settings</a></li>
-            <li><a href="#">Profile</a></li>
-            <li><a href="#">Help</a></li>
-          </ul>
-          <form class="navbar-form navbar-right">
+      <div id="navbar">
+        <nav class="nav navbar-nav pull-left">
+          <a class="nav-item nav-link" href="#">Dashboard</a>
+          <a class="nav-item nav-link" href="#">Settings</a>
+          <a class="nav-item nav-link" href="#">Profile</a>
+          <a class="nav-item nav-link" href="#">Help</a>
+        </nav>
+        <form class="navbar-form pull-right">
          <input type="text" class="form-control" placeholder="Search...">
        </form>
      </div>
-      </div>
    </nav>

    <div class="container-fluid">
@ -75,22 +68,22 @@

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="grid.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -150,7 +147,7 @@
        <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"></div>
+        <div class="clearfix hidden-sm-up"></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>
@ -176,5 +173,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/index.md
+++ b/docs/examples/index.md
@ -34,7 +34,7 @@ Examples that focus on implementing uses of built-in components provided by Boot
    <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
  </div>
  <div class="col-xs-6 col-md-4">
-    <a href="{{ site.baseurl }}/examples/jumbotron-narrow/">
+    <a href="{{ site.baseurl }}/examples/narrow-jumbotron/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt="">
    </a>
    <h4>Narrow jumbotron</h4>
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@ -16,16 +16,13 @@

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>

-    <nav class="navbar navbar-inverse navbar-static-top">
+    <nav class="navbar navbar-static-top navbar-dark bg-inverse">
      <a class="navbar-brand" href="#">Project name</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
@ -41,7 +38,7 @@
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
-        <h1>Hello, world!</h1>
+        <h1 class="display-3">Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
@ -70,7 +67,7 @@
      <hr>

      <footer>
-        <p>&copy; Company 2014</p>
+        <p>&copy; Company 2015</p>
      </footer>
    </div> <!-- /container -->

@ -81,5 +78,7 @@
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="justified-nav.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -79,5 +76,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="narrow-jumbotron.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -42,7 +39,7 @@
      </div>

      <div class="jumbotron">
-        <h1>Jumbotron heading</h1>
+        <h1 class="display-3">Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
      </div>
@ -81,5 +78,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/navbar-top-fixed/index.html
+++ b/docs/examples/navbar-top-fixed/index.html
@ -15,9 +15,6 @@

    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -48,7 +45,10 @@
    <!-- 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.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/navbar-top/index.html
+++ b/docs/examples/navbar-top/index.html
@ -15,9 +15,6 @@

    <!-- Custom styles for this template -->
    <link href="navbar-top.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -46,7 +43,10 @@
    <!-- 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.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@ -16,33 +16,45 @@

    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>

    <div class="container">
-
-      <div class="collapse" id="navbar-header">
-        <div class="inverse p-a">
-          <h3>Collapsed content</h3>
-          <p>Toggleable via the navbar brand.</p>
-        </div>
-      </div>
-      <div class="navbar navbar-default navbar-static-top">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
+      <nav class="navbar navbar-light bg-faded">
+        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
          &#9776;
        </button>
+        <div class="collapse navbar-toggleable-xs" id="navbar-header">
+          <a class="navbar-brand" href="#">Navbar</a>
+          <ul class="nav navbar-nav">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Features</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Pricing</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">About</a>
+            </li>
+          </ul>
+          <form class="form-inline navbar-form pull-right">
+            <input class="form-control" type="text" placeholder="Search">
+            <button class="btn btn-success-outline" type="submit">Search</button>
+          </form>          
        </div>
+      </nav> <!-- /navbar -->

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
-        <p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
+        <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
+        <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
        <p>
-          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
+          <a class="btn btn-lg btn-primary" href="../../components/navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

@ -55,5 +67,7 @@
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@ -16,30 +16,17 @@

    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
-    <nav class="navbar navbar-fixed-top navbar-inverse">
+    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
        <a class="navbar-brand" href="#">Project name</a>
-        </div>
-        <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
+          <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
-        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

@ -48,8 +35,8 @@
      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
-          <p class="pull-right visible-xs">
-            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
+          <p class="pull-right hidden-sm-up">
+            <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
            <h1>Hello, world!</h1>
--- a/docs/examples/screenshots/album.jpg
+++ b/docs/examples/screenshots/album.jpg
--- a/docs/examples/signin/index.html
+++ b/docs/examples/signin/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -45,5 +42,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/starter-template/index.html
+++ b/docs/examples/starter-template/index.html
@ -16,16 +16,13 @@

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>

-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <a class="navbar-brand" href="#">Project name</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
@ -54,5 +51,7 @@
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -38,8 +35,8 @@
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu">
@ -79,5 +76,7 @@
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/sticky-footer/index.html
+++ b/docs/examples/sticky-footer/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="sticky-footer.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
@ -42,5 +39,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
 </html>
--- a/docs/examples/tooltip-viewport/index.html
+++ b/docs/examples/tooltip-viewport/index.html
@ -16,9 +16,6 @@

    <!-- Custom styles for this template -->
    <link href="tooltip-viewport.css" rel="stylesheet">
-
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </head>

  <body>
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@ -13,7 +13,7 @@ Bootstrap supports a wide variety of modern browsers and devices, and some older

 ## Supported browsers

-Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11**. More specific support information is provided below.
+Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**. More specific support information is provided below.

 ### Mobile devices

@ -64,6 +64,7 @@ Similarly, the latest versions of most desktop browsers are supported.
        <th>Chrome</th>
        <th>Firefox</th>
        <th>Internet Explorer</th>
+        <th>Microsoft Edge</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
@ -74,6 +75,7 @@ Similarly, the latest versions of most desktop browsers are supported.
        <td class="text-success">Supported</td>
        <td class="text-success">Supported</td>
        <td class="text-muted">N/A</td>
+        <td class="text-muted">N/A</td>
        <td class="text-success">Supported</td>
        <td class="text-success">Supported</td>
      </tr>
@ -83,12 +85,15 @@ Similarly, the latest versions of most desktop browsers are supported.
        <td class="text-success">Supported</td>
        <td class="text-success">Supported</td>
        <td class="text-success">Supported</td>
+        <td class="text-success">Supported</td>
        <td class="text-danger">Not supported</td>
      </tr>
    </tbody>
  </table>
 </div>

+For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox.
+
 Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8 and below, though they are not officially supported.

 For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
@ -138,7 +143,7 @@ As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we rec

 Alternatively, you may add some third party JavaScript to backfill support for IE8 to Bootstrap 4. You'll need the following:

-* [The HTML5 shiv](http://en.wikipedia.org/wiki/HTML5_Shiv)
+* [The HTML5 shiv](https://en.wikipedia.org/wiki/HTML5_Shiv)
 * [Respond.js](https://github.com/scottjehl/Respond)
 * [Rem unit polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill)

--- a/docs/getting-started/build-tools.md
+++ b/docs/getting-started/build-tools.md
@ -28,7 +28,7 @@ Our Gruntfile includes the following commands and tasks:
 | --- | --- |
 | `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
 | `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
-| `grunt test` | Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
+| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
 | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
 | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |

--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@ -52,7 +52,7 @@ Install Bootstrap in your Node powered apps with [the npm package](https://www.n

 Bootstrap's `package.json` contains some additional metadata under the following keys:

- `less` - path to Bootstrap's main [Less](http://lesscss.org) source file
+- `sass` - path to Bootstrap's main [Sass](http://sass-lang.com/) source file
 - `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

 ### Meteor
@ -69,6 +69,16 @@ You can also install and manage Bootstrap's Sass and JavaScript using [Composer]
 $ composer require twbs/bootstrap
 {% endhighlight %}

+### NuGet
+
+If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
+
+{% highlight powershell %}
+PM> Install-Package bootstrap -Pre
+PM> Install-Package bootstrap.sass -Pre
+{% endhighlight %}
+
+The `-Pre` is required until Bootstrap v4 has a stable release.

 ## Custom builds

--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@ -65,7 +65,7 @@ Put it all together and your pages should look like this:
 </html>
 {% endhighlight %}

-That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.

 ## Important globals

--- a/docs/index.html
+++ b/docs/index.html
@ -55,17 +55,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f

    <div class="row">
      <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
-        <h4>Preprocessors</h4>
-        <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
+        <img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
+        <h4>Preprocessor</h4>
+        <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
      </div>
      <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
        <h4>One framework, every device.</h4>
        <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
      </div>
      <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/components.png" alt="Components" class="img-responsive">
+        <img src="assets/img/components.png" alt="Components" class="img-fluid">
        <h4>Full of features</h4>
        <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
      </div>
@ -78,16 +78,31 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
  </div>
 </div>

+<div class="bd-featurette">
+  <div class="container">
+    <h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
+    <p class="lead">
+      Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
+    </p>
+
+    <p class="lead">
+      <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
+    </p>
+
+    <img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+  </div>
+</div>
+
 <div class="bd-featurette">
  <div class="container">
    <h2 class="bd-featurette-title">Built with Bootstrap.</h2>
-    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
+    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../examples">collection of examples</a> or by exploring some of our favorites.</p>

    <div class="row bd-featured-sites">
    {% for showcase in site.data.showcase %}
      <div class="col-xs-6 col-sm-3">
        <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
-          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive">
+          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
        </a>
      </div>
    {% endfor %}
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@ -48,7 +48,7 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start
 </div>
 {% endexample %}

-The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](). Those columns are centered in the page with the parent `.container`.
+The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](#predefined-classes). Those columns are centered in the page with the parent `.container`.

 ## Grid options

@ -59,24 +59,24 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
    <thead>
      <tr>
        <th></th>
-        <th>
-          Extra small
+        <th class="text-center">
+          Extra small<br>
          <small>&lt;34em / 480px</small>
        </th>
-        <th>
-          Small
+        <th class="text-center">
+          Small<br>
          <small>&ge;34em / 480px</small>
        </th>
-        <th>
-          Medium
+        <th class="text-center">
+          Medium<br>
          <small>&ge;45em / 720px</small>
        </th>
-        <th>
-          Large
+        <th class="text-center">
+          Large<br>
          <small>&ge;62em / 992px</small>
        </th>
-        <th>
-          Extra large
+        <th class="text-center">
+          Extra large<br>
          <small>&ge;75em / 1200px</small>
        </th>
      </tr>
@ -129,7 +129,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a

 ## Sass mixins

-When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [prebuilt grid classes](#example-stacked-to-horizontal) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
+When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

 ### Variables

@ -195,7 +195,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS

 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.

-See it in action in <a href="http://jsbin.com/qiqet/3/edit">this rendered example</a>.
+See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>.

 {% highlight scss %}
 .container {
@ -317,7 +317,7 @@ Build on the previous example by creating even more dynamic and powerful layouts
  <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="clearfix hidden-sm-up"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
 {% endexample %}
@ -348,7 +348,7 @@ With the four tiers of grids available you're bound to run into issues where, at
  <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="clearfix hidden-sm-up"></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>
--- a/Show More
+++ b/Show More