Merge pull request #1 from twbs/v4-dev

updating fork of BS to v4-beta1
2025-01-21 13:52:17 +01:00 · 2017-08-15 23:43:36 +02:00 · 2017-08-15 23:43:36 +02:00 · 06d4c6d273
commit 06d4c6d273
parent 1fb6d8c46a 7b873fa0a1
520 changed files with 34986 additions and 65049 deletions
--- a/js/.babelrc
+++ b/js/.babelrc
@ -3,8 +3,8 @@
    [
      "es2015",
      {
-        "modules": false,
-        "loose": true
+        "loose": true,
+        "modules": false
      }
    ]
  ],
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -25,13 +25,9 @@ restrictions:
  respect the opinions of others.

 * Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
-  Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) 
+  Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
  instead. We reserve the right to delete comments which violate this rule.

-* Please **do not** open issues or pull requests regarding the code in
-  [`Normalize`](https://github.com/necolas/normalize.css) (open them in
-  its repository).
-
 * Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
  Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.

@ -46,7 +42,7 @@ Our bug tracker utilizes several labels to help organize and identify issues. He
 - `docs` - Issues for improving or updating our documentation.
 - `examples` - Issues involving the example templates included in our docs.
 - `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
+- `grunt` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.
 - `help wanted` - Issues we need or would love help from the community to resolve.
 - `js` - Issues stemming from our compiled or source JavaScript files.
 - `meta` - Issues with the project itself or our GitHub repository.
@ -73,7 +69,7 @@ Guidelines for bug reports:

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


 A good bug report shouldn't leave others needing to chase you up for more
@ -245,7 +241,7 @@ includes code changes) and under the terms of the

 ### Checking coding style

-Run `grunt test` before committing to ensure your changes follow our coding standards.
+Run `npm run test` before committing to ensure your changes follow our coding standards.


 ## License
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
--- a/.hound.yml
+++ b/.hound.yml
@ -1,19 +1,14 @@
 fail_on_violations: true

 scss:
-  config_file: scss/.scss-lint.yml
-  enabled: true
+  config_file: .scss-lint.yml

-javascript:
+jshint:
  enabled: false

 eslint:
-  enabled: true
  config_file: js/.eslintrc.json
-
-jscs:
-  enabled: true
-  config_file: js/.jscsrc
+  ignore_file: .houndignore

 ruby:
  enabled: false
--- a/.houndignore
+++ b/.houndignore
@ -0,0 +1,4 @@
+**/*.min.js
+**/vendor/*
+**/dist/*
+js/tests/*
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@ -1,11 +1,8 @@
 # Default application configuration that all configurations inherit from.
 scss_files:
-  - "**/*.scss"
+  - "scss/**/*.scss"
  - "docs/assets/scss/**/*.scss"

-exclude:
-  - "scss/_normalize.scss"
-
 plugin_directories: ['.scss-linters']

 # List of gem names to load custom linters from (make sure they are already
@ -28,8 +25,6 @@ linters:
  BorderZero:
    enabled: true
    convention: zero # or `none`
-    exclude:
-      - _normalize.scss

  ChainedClasses:
    enabled: false
@ -43,8 +38,7 @@ linters:
  Comment:
    enabled: true
    exclude:
-      - _normalize.scss
-      - bootstrap.scss
+      - scss/bootstrap.scss
    style: silent

  DebugStatement:
@ -108,8 +102,6 @@ linters:
  LeadingZero:
    enabled: true
    style: exclude_zero # or 'include_zero'
-    exclude:
-      - _normalize.scss

  MergeableSelector:
    enabled: false
@ -122,7 +114,7 @@ linters:

  NestingDepth:
    enabled: true
-    max_depth: 4
+    max_depth: 5
    ignore_parent_selectors: false

  PlaceholderInExtend:
@ -138,8 +130,6 @@ linters:
    ignore_unspecified: false
    min_properties: 2
    separate_groups: false
-    exclude:
-      - _normalize.scss
    order:
      - position
      - top
@ -160,6 +150,10 @@ linters:
      - flex-grow
      - flex-order
      - flex-pack
+      - align-items
+      - align-self
+      - justify-content
+      - order
      - float
      - width
      - min-width
@ -535,8 +529,6 @@ linters:
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []
-    exclude:
-      - _normalize.scss

  ZeroUnit:
    enabled: true
--- a/.travis.yml
+++ b/.travis.yml
@ -1,44 +1,34 @@
-sudo: required
+sudo: false
 dist: trusty
 language: node_js
 git:
-  depth: 10
+  depth: 3
 node_js:
  - "4"
-  - "6"
+  - "8"
 before_install:
-  # Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
-  - export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
-  - rvm install 2.2
-  - rvm use 2.2 --fuzzy
-  - npm install -g npm@3
-  - "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
+  - if [[ `npm -v` != 5* ]]; then npm install -g npm@5; fi
+  - "export TRAVIS_COMMIT_MSG=\"`git log --format=%B --no-merges -n 1`\""
+  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip browser\]'; export TWBS_DO_BROWSER=$?; true
 install:
-  - bundle install --deployment --jobs=3
-  - cp grunt/npm-shrinkwrap.json ./
+  - bundle install --deployment --jobs=3 --retry=3
  - npm install
+script:
+  - npm test
+  - if [ "$TWBS_TEST" = browser -a "$SAUCE_ACCESS_KEY" ]; then npm run js-test-cloud; fi
+after_success:
+  - if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then npm run docs-upload-preview; fi
 cache:
  directories:
    - node_modules
    - vendor/bundle
-    - "$HOME/google-cloud-sdk"
 env:
-  global:
-    - NPM_CONFIG_PROGRESS="false"
-  matrix:
-    - TWBS_TEST=core
-    - TWBS_TEST=validate-html
-    - TWBS_TEST=sauce-js-unit
+  - TWBS_TEST=core
+  - TWBS_TEST=browser
 matrix:
-  fast_finish: true
  exclude:
    - node_js: "4"
-      env: TWBS_TEST=validate-html
-    - node_js: "4"
-      env: TWBS_TEST=sauce-js-unit
+      env: TWBS_TEST=browser
 notifications:
  slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
  webhooks:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +0,0 @@
-Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
-
-See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.
-
-Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
--- a/9
+++ b/9
@ -1,8 +1,9 @@
 source 'https://rubygems.org'

 group :development, :test do
-  gem 'jekyll', '~> 3.3.0'
-  gem 'jekyll-redirect-from', '~> 0.11.0'
-  gem 'jekyll-sitemap', '~> 0.11.0'
-  gem 'scss_lint', '~> 0.50.2'
+  gem 'jekyll', '~> 3.5.1'
+  gem 'jekyll-redirect-from', '~> 0.12.1'
+  gem 'jekyll-sitemap', '~> 1.1.1'
+  gem 'jekyll-toc', '~> 0.3.0.pre1'
+  gem 'scss_lint', '~> 0.54.0'
 end
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,56 +1,68 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    addressable (2.4.0)
+    addressable (2.5.1)
+      public_suffix (~> 2.0, >= 2.0.2)
    colorator (1.1.0)
-    ffi (1.9.14)
+    ffi (1.9.18)
+    ffi (1.9.18-x64-mingw32)
    forwardable-extended (2.6.0)
-    jekyll (3.3.0)
+    jekyll (3.5.2)
      addressable (~> 2.4)
      colorator (~> 1.0)
      jekyll-sass-converter (~> 1.0)
      jekyll-watch (~> 1.1)
      kramdown (~> 1.3)
-      liquid (~> 3.0)
+      liquid (~> 4.0)
      mercenary (~> 0.3.3)
      pathutil (~> 0.9)
      rouge (~> 1.7)
      safe_yaml (~> 1.0)
-    jekyll-redirect-from (0.11.0)
-      jekyll (>= 2.0)
-    jekyll-sass-converter (1.4.0)
+    jekyll-redirect-from (0.12.1)
+      jekyll (~> 3.3)
+    jekyll-sass-converter (1.5.0)
      sass (~> 3.4)
-    jekyll-sitemap (0.11.0)
-      addressable (~> 2.4.0)
+    jekyll-sitemap (1.1.1)
+      jekyll (~> 3.3)
+    jekyll-toc (0.3.0)
+      nokogiri (~> 1.6)
    jekyll-watch (1.5.0)
      listen (~> 3.0, < 3.1)
-    kramdown (1.12.0)
-    liquid (3.0.6)
+    kramdown (1.14.0)
+    liquid (4.0.0)
    listen (3.0.8)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    mercenary (0.3.6)
+    mini_portile2 (2.2.0)
+    nokogiri (1.8.0)
+      mini_portile2 (~> 2.2.0)
+    nokogiri (1.8.0-x64-mingw32)
+      mini_portile2 (~> 2.2.0)
    pathutil (0.14.0)
      forwardable-extended (~> 2.6)
-    rake (11.3.0)
-    rb-fsevent (0.9.7)
-    rb-inotify (0.9.7)
-      ffi (>= 0.5.0)
+    public_suffix (2.0.5)
+    rake (12.0.0)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
    rouge (1.11.1)
    safe_yaml (1.0.4)
-    sass (3.4.22)
-    scss_lint (0.50.2)
-      rake (>= 0.9, < 12)
+    sass (3.4.25)
+    scss_lint (0.54.0)
+      rake (>= 0.9, < 13)
      sass (~> 3.4.20)

 PLATFORMS
  ruby
+  x64-mingw32

 DEPENDENCIES
-  jekyll (~> 3.3.0)
-  jekyll-redirect-from (~> 0.11.0)
-  jekyll-sitemap (~> 0.11.0)
-  scss_lint (~> 0.50.2)
+  jekyll (~> 3.5.1)
+  jekyll-redirect-from (~> 0.12.1)
+  jekyll-sitemap (~> 1.1.1)
+  jekyll-toc (~> 0.3.0.pre1)
+  scss_lint (~> 0.54.0)

 BUNDLED WITH
-   1.13.2
+   1.15.3
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,266 +1,16 @@
 /*!
 * Bootstrap's Gruntfile
 * https://getbootstrap.com
- * Copyright 2013-2016 The Bootstrap Authors
- * Copyright 2013-2016 Twitter, Inc.
+ * Copyright 2013-2017 The Bootstrap Authors
+ * Copyright 2013-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

 module.exports = function (grunt) {
-  'use strict';
-
-  // Force use of Unix newlines
-  grunt.util.linefeed = '\n';
-
-  RegExp.quote = function (string) {
-    return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-  };
-
-  var fs = require('fs');
-  var path = require('path');
-  var isTravis = require('is-travis');
-
-  var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
-
-  Object.keys(configBridge.paths).forEach(function (key) {
-    configBridge.paths[key].forEach(function (val, i, arr) {
-      arr[i] = path.join('./docs', val);
-    });
-  });
+  'use strict'

  // Project configuration.
  grunt.initConfig({
-
-    // Metadata.
-    pkg: grunt.file.readJSON('package.json'),
-    banner: '/*!\n' +
-            ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
-            ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
-            ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
-            ' */\n',
-    jqueryCheck: 'if (typeof jQuery === \'undefined\') {\n' +
-                 '  throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\\'s JavaScript.\')\n' +
-                 '}\n',
-    jqueryVersionCheck: '+function ($) {\n' +
-                        '  var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' +
-                        '  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) {\n' +
-                        '    throw new Error(\'Bootstrap\\\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0\')\n' +
-                        '  }\n' +
-                        '}(jQuery);\n\n',
-
-    // Task configuration.
-    clean: {
-      dist: 'dist',
-      docs: 'docs/dist'
-    },
-
-    // JS build configuration
-    babel: {
-      dev: {
-        options: {
-          sourceMap: true
-        },
-        files: {
-          'js/dist/util.js'      : 'js/src/util.js',
-          'js/dist/alert.js'     : 'js/src/alert.js',
-          'js/dist/button.js'    : 'js/src/button.js',
-          'js/dist/carousel.js'  : 'js/src/carousel.js',
-          'js/dist/collapse.js'  : 'js/src/collapse.js',
-          'js/dist/dropdown.js'  : 'js/src/dropdown.js',
-          'js/dist/modal.js'     : 'js/src/modal.js',
-          'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
-          'js/dist/tab.js'       : 'js/src/tab.js',
-          'js/dist/tooltip.js'   : 'js/src/tooltip.js',
-          'js/dist/popover.js'   : 'js/src/popover.js'
-        }
-      },
-      dist: {
-        options: {
-          extends: '../../js/.babelrc'
-        },
-        files: {
-          '<%= concat.bootstrap.dest %>' : '<%= concat.bootstrap.dest %>'
-        }
-      }
-    },
-
-    stamp: {
-      options: {
-        banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>\n+function () {\n',
-        footer: '\n}();'
-      },
-      bootstrap: {
-        files: {
-          src: '<%= concat.bootstrap.dest %>'
-        }
-      }
-    },
-
-    concat: {
-      options: {
-        // Custom function to remove all export and import statements
-        process: function (src) {
-          return src.replace(/^(export|import).*/gm, '');
-        }
-      },
-      bootstrap: {
-        src: [
-          'js/src/util.js',
-          'js/src/alert.js',
-          'js/src/button.js',
-          'js/src/carousel.js',
-          'js/src/collapse.js',
-          'js/src/dropdown.js',
-          'js/src/modal.js',
-          'js/src/scrollspy.js',
-          'js/src/tab.js',
-          'js/src/tooltip.js',
-          'js/src/popover.js'
-        ],
-        dest: 'dist/js/<%= pkg.name %>.js'
-      }
-    },
-
-    uglify: {
-      options: {
-        compress: {
-          warnings: false
-        },
-        mangle: true,
-        preserveComments: /^!|@preserve|@license|@cc_on/i
-      },
-      core: {
-        src: '<%= concat.bootstrap.dest %>',
-        dest: 'dist/js/<%= pkg.name %>.min.js'
-      },
-      docsJs: {
-        src: configBridge.paths.docsJs,
-        dest: 'docs/assets/js/docs.min.js'
-      }
-    },
-
-    qunit: {
-      options: {
-        inject: 'js/tests/unit/phantom.js'
-      },
-      files: 'js/tests/index.html'
-    },
-
-    // CSS build configuration
-    scsslint: {
-      options: {
-        bundleExec: true,
-        config: 'scss/.scss-lint.yml',
-        reporterOutput: null
-      },
-      core: {
-        src: ['scss/*.scss', '!scss/_normalize.scss']
-      },
-      docs: {
-        src: ['docs/assets/scss/*.scss', '!docs/assets/scss/docs.scss']
-      }
-    },
-
-    cssmin: {
-      options: {
-        compatibility: 'ie9,-properties.zeroUnits',
-        sourceMap: true,
-        // sourceMapInlineSources: true,
-        advanced: false
-      },
-      core: {
-        files: [
-          {
-            expand: true,
-            cwd: 'dist/css',
-            src: ['*.css', '!*.min.css'],
-            dest: 'dist/css',
-            ext: '.min.css'
-          }
-        ]
-      },
-      docs: {
-        files: [
-          {
-            expand: true,
-            cwd: 'docs/assets/css',
-            src: ['*.css', '!*.min.css'],
-            dest: 'docs/assets/css',
-            ext: '.min.css'
-          }
-        ]
-      }
-    },
-
-    copy: {
-      docs: {
-        expand: true,
-        cwd: 'dist/',
-        src: [
-          '**/*'
-        ],
-        dest: 'docs/dist/'
-      }
-    },
-
-    connect: {
-      server: {
-        options: {
-          port: 3000,
-          base: '.'
-        }
-      }
-    },
-
-    jekyll: {
-      options: {
-        bundleExec: true,
-        config: '_config.yml',
-        incremental: false
-      },
-      docs: {},
-      github: {
-        options: {
-          raw: 'github: true'
-        }
-      }
-    },
-
-    htmllint: {
-      options: {
-        ignore: [
-          'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “hidden”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
-          'Attribute “autocomplete” not allowed on element “button” at this point.',
-          '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).',
-          'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
-          'Element “img” is missing required attribute “src”.',
-          'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “date” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
-          'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
-        ]
-      },
-      src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
-    },
-
-    watch: {
-      src: {
-        files: '<%= concat.bootstrap.src %>',
-        tasks: ['babel:dev']
-      },
-      sass: {
-        files: 'scss/**/*.scss',
-        tasks: ['dist-css', 'docs']
-      },
-      docs: {
-        files: 'docs/assets/scss/**/*.scss',
-        tasks: ['dist-css', 'docs']
-      }
-    },
-
    'saucelabs-qunit': {
      all: {
        options: {
@ -268,138 +18,12 @@ module.exports = function (grunt) {
          concurrency: 10,
          maxRetries: 3,
          maxPollRetries: 4,
-          urls: ['http://127.0.0.1:3000/js/tests/index.html?hidepassed'],
-          browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
+          urls: ['http://localhost:3000/js/tests/index.html?hidepassed'],
+          browsers: grunt.file.readYAML('build/sauce_browsers.yml')
        }
      }
-    },
-
-    exec: {
-      postcss: {
-        command: 'npm run postcss'
-      },
-      'postcss-docs': {
-        command: 'npm run postcss-docs'
-      },
-      htmlhint: {
-        command: 'npm run htmlhint'
-      },
-      'upload-preview': {
-        command: './grunt/upload-preview.sh'
-      }
-    },
-
-    buildcontrol: {
-      options: {
-        dir: '_gh_pages',
-        commit: true,
-        push: true,
-        message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
-      },
-      pages: {
-        options: {
-          remote: 'git@github.com:twbs/derpstrap.git',
-          branch: 'gh-pages'
-        }
-      }
-    },
-
-    compress: {
-      main: {
-        options: {
-          archive: 'bootstrap-<%= pkg.version %>-dist.zip',
-          mode: 'zip',
-          level: 9,
-          pretty: true
-        },
-        files: [
-          {
-            expand: true,
-            cwd: 'dist/',
-            src: ['**'],
-            dest: 'bootstrap-<%= pkg.version %>-dist'
-          }
-        ]
-      }
    }
+  })

-  });
-
-
-  // These plugins provide necessary tasks.
-  require('load-grunt-tasks')(grunt, { scope: 'devDependencies',
-    // Exclude Sass compilers. We choose the one to load later on.
-    pattern: ['grunt-*', '!grunt-sass', '!grunt-contrib-sass'] });
-  require('time-grunt')(grunt);
-
-  // Docs HTML validation task
-  grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint', 'exec:htmlhint']);
-
-  var runSubset = function (subset) {
-    return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
-  };
-  var isUndefOrNonZero = function (val) {
-    return val === undefined || val !== '0';
-  };
-
-  // Test task.
-  var testSubtasks = [];
-  // Skip core tests if running a different subset of the test suite
-  if (runSubset('core') &&
-    // Skip core tests if this is a Savage build
-    process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') {
-    testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'test-scss', 'qunit', 'docs']);
-  }
-  // Skip HTML validation if running a different subset of the test suite
-  if (runSubset('validate-html') &&
-      isTravis &&
-      // Skip HTML5 validator when [skip validator] is in the commit message
-      isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
-    testSubtasks.push('validate-html');
-  }
-  // Only run Sauce Labs tests if there's a Sauce access key
-  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
-      // Skip Sauce if running a different subset of the test suite
-      runSubset('sauce-js-unit')) {
-    testSubtasks = testSubtasks.concat(['dist', 'docs-css', 'docs-js', 'clean:docs', 'copy:docs', 'exec:upload-preview']);
-    // Skip Sauce on Travis when [skip sauce] is in the commit message
-    if (isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
-      testSubtasks.push('connect');
-      testSubtasks.push('saucelabs-qunit');
-    }
-  }
-  grunt.registerTask('test', testSubtasks);
-
-  // JS distribution task.
-  grunt.registerTask('dist-js', ['babel:dev', 'concat', 'babel:dist', 'stamp', 'uglify:core']);
-
-  grunt.registerTask('test-scss', ['scsslint:core']);
-
-  // CSS distribution task.
-  // Supported Compilers: sass (Ruby) and libsass.
-  (function (sassCompilerName) {
-    require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
-  })(process.env.TWBS_SASS || 'libsass');
-  // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
-  grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
-
-  grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'cssmin:core', 'cssmin:docs']);
-
-  // Full distribution task.
-  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
-
-  // Default task.
-  grunt.registerTask('default', ['clean:dist', 'test']);
-
-  // Docs task.
-  grunt.registerTask('docs-css', ['cssmin:docs', 'exec:postcss-docs']);
-  grunt.registerTask('lint-docs-css', ['scsslint:docs']);
-  grunt.registerTask('docs-js', ['uglify:docsJs']);
-  grunt.registerTask('docs', ['lint-docs-css', 'docs-css', 'docs-js', 'clean:docs', 'copy:docs']);
-  grunt.registerTask('docs-github', ['jekyll:github']);
-
-  grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
-
-  // Publish to GitHub
-  grunt.registerTask('publish', ['buildcontrol:pages']);
-};
+  grunt.loadNpmTasks('grunt-saucelabs')
+}
--- a/4
+++ b/4
@ -1,7 +1,7 @@
 The MIT License (MIT)

-Copyright (c) 2011-2016 Twitter, Inc.
-Copyright (c) 2011-2016 The Bootstrap Authors
+Copyright (c) 2011-2017 Twitter, Inc.
+Copyright (c) 2011-2017 The Bootstrap Authors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,24 +1,31 @@
-# [Bootstrap](https://getbootstrap.com)
+<p align="center">
+  <a href="https://getbootstrap.com">
+    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
+  </a>

-[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
-![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
-[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
-[![Gem version](https://img.shields.io/gem/v/bootstrap.svg)](https://rubygems.org/gems/bootstrap)
-[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg)](https://travis-ci.org/twbs/bootstrap)
-[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap?type=dev)
-[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue.svg)](https://atmospherejs.com/twbs/bootstrap)
-[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap.svg)](https://packagist.org/packages/twbs/bootstrap)
-[![NuGet](https://img.shields.io/nuget/vpre/bootstrap.svg)](https://www.nuget.org/packages/bootstrap/4.0.0-alpha5)
+  <h3 align="center">Bootstrap</h3>

-[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
+  <p align="center">
+    Sleek, intuitive, and powerful front-end framework for faster and easier web development.
+    <br>
+    <a href="https://getbootstrap.com/docs/4.0"><strong>Explore Bootstrap docs &raquo;</strong></a>
+    <br>
+    <br>
+    <a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
+    &middot;
+    <a href="https://jobs.getbootstrap.com">Job Board</a>
+    &middot;
+    <a href="https://blog.getbootstrap.com">Blog</a>
+  </p>
+</p>

-Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
-
-To get started, check out <https://getbootstrap.com>!
+<br>

 ## Table of contents

 - [Quick start](#quick-start)
+- [Status](#status)
+- [What's included](#whats-included)
 - [Bugs and feature requests](#bugs-and-feature-requests)
 - [Documentation](#documentation)
 - [Contributing](#contributing)
@ -31,18 +38,32 @@ To get started, check out <https://getbootstrap.com>!

 Several quick start options are available:

- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.5.zip)
+- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.5`
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-alpha.5`
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap@=4.0.0-alpha.5`
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-alpha.5`
+- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
+- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-beta`
+- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
+- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-beta`
 - 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](https://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.

-### What's included
+## Status
+
+[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
+[![Bower](https://img.shields.io/bower/v/bootstrap.svg)](https://bower.io/search/?q=bootstrap)
+[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
+[![Gem version](https://img.shields.io/gem/v/bootstrap.svg)](https://rubygems.org/gems/bootstrap)
+[![Build Status](https://img.shields.io/travis/twbs/bootstrap/v4-dev.svg)](https://travis-ci.org/twbs/bootstrap)
+[![peerDependencies Status](https://david-dm.org/twbs/bootstrap/peer-status.svg)](https://david-dm.org/twbs/bootstrap?type=peer)
+[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap?type=dev)
+[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue.svg)](https://atmospherejs.com/twbs/bootstrap)
+[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap.svg)](https://packagist.org/packages/twbs/bootstrap)
+[![NuGet](https://img.shields.io/nuget/vpre/bootstrap.svg)](https://www.nuget.org/packages/bootstrap/absoluteLatest)
+
+[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
+
+## What's included

 Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

@ -58,7 +79,7 @@ bootstrap/
    └── bootstrap.min.js
 ```

-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/debug/readability/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.


 ## Bugs and feature requests
@ -70,12 +91,15 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:

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

+Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in the `_scripts.html` include.
+
 ### Running documentation locally

-1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
-2. Run `grunt` (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
-3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
-4. Open <http://localhost:9001> in your browser, and voilà.
+1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+2. Run `npm install` to install Node.js dependencies.
+3. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
+4. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
+5. Open <http://localhost:9001> in your browser, and voilà.

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

@ -133,4 +157,4 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr

 ## Copyright and license

-Code and documentation copyright 2011-2016 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
+Code and documentation copyright 2011-2017 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
--- a/_config.yml
+++ b/_config.yml
@ -1,55 +1,74 @@
 # Dependencies
-markdown:         kramdown
-highlighter:      rouge
+markdown:       kramdown
+highlighter:    rouge

 kramdown:
-  auto_ids: true
+  auto_ids:     true

 # Permalinks
-permalink:        pretty
+permalink:      pretty

 # Server
-source:           docs
-destination:      _gh_pages
-host:             0.0.0.0
-port:             9001
-baseurl:          ""
-url:              https://v4-alpha.getbootstrap.com
-encoding:         UTF-8
-exclude:          [assets/scss/]
+source:         "."
+destination:    ./_gh_pages
+port:           9001
+baseurl:        ""
+url:            "https://getbootstrap.com"
+encoding:       UTF-8
+exclude:
+  - .git
+  - .github
+  - assets/scss/
+  - build
+  - js
+  - node_modules
+  - nuget
+  - scss
+  - vendor
+  - bower.json
+  - composer.json
+  - Gemfile
+  - Gemfile.lock
+  - Gruntfile.js
+  - package.js
+  - package.json
+  - package-lock.json
+  - sache.json

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

 # Social
-title: Bootstrap
-description: The most popular HTML, CSS, and JS framework in the world.
-twitter: getbootstrap
-authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
-social_logo_path: /assets/brand/bootstrap-social-logo.png
-social_image_path: /assets/brand/bootstrap-social.png
-
-# Custom vars
-current_version:  4.0.0-alpha.5
-repo:             https://github.com/twbs/bootstrap
-slack:            https://bootstrap-slack.herokuapp.com
+title:              Bootstrap
+description:        "The most popular HTML, CSS, and JS library in the world."
+twitter:            getbootstrap
+authors:            "Mark Otto, Jacob Thornton, and Bootstrap contributors"
+social_image_path:  /assets/brand/bootstrap-social.png
+social_logo_path:   /assets/brand/bootstrap-social-logo.png

+# Custom variables
+current_version:    4.0.0-beta
+docs_version:       4.0
+repo:               "https://github.com/twbs/bootstrap"
+slack:              "https://bootstrap-slack.herokuapp.com"
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.5.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.5/bootstrap-4.0.0-alpha.5-dist.zip
+  source:           "https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip"
+  dist:             "https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip"

-blog:             https://blog.getbootstrap.com
-expo:             https://expo.getbootstrap.com
-themes:           https://themes.getbootstrap.com
+blog:               "https://blog.getbootstrap.com"
+expo:               "https://expo.getbootstrap.com"
+jobs:               "https://jobs.getbootstrap.com"
+themes:             "https://themes.getbootstrap.com"

 cdn:
  # See https://www.srihash.org for info on how to generate the hashes
-  css:            https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css
-  css_hash:       "sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
-  js:             https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js
-  js_hash:        "sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
-  jquery:         https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
-  jquery_hash:    "sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
-  tether:         https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js
-  tether_hash:    "sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
+  css:              "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
+  css_hash:         "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
+  js:               "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
+  js_hash:          "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+  jquery:           "https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  jquery_hash:      "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  popper:           "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
+  popper_hash:      "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
--- a/_data/breakpoints.yml
+++ b/_data/breakpoints.yml
@ -0,0 +1,29 @@
+- breakpoint: xs
+  abbr: ""
+  name: Extra small
+  min-width: 0px
+  container: ""
+
+- breakpoint: sm
+  abbr: -sm
+  name: Small
+  min-width: 576px
+  container: 540px
+
+- breakpoint: md
+  abbr: -md
+  name: Medium
+  min-width: 768px
+  container: 720px
+
+- breakpoint: lg
+  abbr: -lg
+  name: Large
+  min-width: 992px
+  container: 960px
+
+- breakpoint: xl
+  abbr: -xl
+  name: Extra large
+  min-width: 1200px
+  container: 1140px
--- a/docs/_data/browser-bugs.yml
+++ b/docs/_data/browser-bugs.yml
@ -28,16 +28,6 @@
  origin: >
    Bootstrap#14211

-
-  browser: >
-    Edge
-  summary: >
-    When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
-  upstream_bug: >
-    Edge#817822
-  origin: >
-    Bootstrap#14528
-
 -
  browser: >
    Edge
@ -148,16 +138,6 @@
  origin: >
    Bootstrap#19670

-
-  browser: >
-    Firefox
-  summary: >
-    `position: absolute` element that's wider than its column renders differently than other browsers
-  upstream_bug: >
-    Mozilla#1282363
-  origin: >
-    Bootstrap#20161
-
 -
  browser: >
    Firefox
@ -218,23 +198,13 @@
  origin: >
    Bootstrap#14409

-
-  browser: >
-    Chrome
-  summary: >
-    `:focus` `outline` style causes cursor to not be displayed when toggling a `readonly` `<input>` to read-write.
-  upstream_bug: >
-    Chromium#465274
-  origin: >
-    Bootstrap#16022
-
 -
  browser: >
    Chrome
  summary: >
    `table-cell` borders not overlapping despite `margin-right: -1px`
  upstream_bug: >
-    Chromium#534750
+    Chromium#568691
  origin: >
    Bootstrap#17438, Bootstrap#14237

@ -258,6 +228,16 @@
  origin: >
    Bootstrap#12832

+-
+  browser: >
+    Chrome
+  summary: >
+    `position: absolute` element that's wider than its column is incorrectly clipped to column boundary
+  upstream_bug: >
+    Chromium#269061
+  origin: >
+    Bootstrap#20161
+
 -
  browser: >
    Chrome (Windows & Linux)
@ -268,16 +248,6 @@
  origin: >
    Bootstrap#15298

-
-  browser: >
-    Chrome (Linux)
-  summary: >
-    `<select>`'s pop-up menu is blank on some systems.
-  upstream_bug: >
-    Chromium#510079
-  origin: >
-    Bootstrap#21120
-
 -
  browser: >
    Safari
@ -330,16 +300,6 @@
  origin: >
    Bootstrap#14868

-
-  browser: >
-    Safari (iPad)
-  summary: >
-    `<select>` menu on iPad causes shifting of hit-testing areas
-  upstream_bug: >
-    WebKit#150079, Safari#23082521
-  origin: >
-    Bootstrap#14975
-
 -
  browser: >
    Safari (iOS)
@ -430,16 +390,6 @@
  origin: >
    Bootstrap#14839

-
-  browser: >
-    Safari (iOS)
-  summary: >
-    Tapping from one `<input>` to another in an overlay can cause shaking/jiggling effect
-  upstream_bug: >
-    WebKit#158276
-  origin: >
-    Bootstrap#19927
-
 -
  browser: >
    Safari (iOS)
--- a/docs/_data/browser-features.yml
+++ b/docs/_data/browser-features.yml
@ -7,7 +7,7 @@
    A11yUserVoice#16717318
  origin: >
    Bootstrap#20732
-    
+
 -
  browser: >
    Edge
@ -58,16 +58,6 @@
  origin: >
    Bootstrap#20143

-
-  browser: >
-    Firefox
-  summary: >
-    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
-  upstream_bug: >
-    Mozilla#1264125
-  origin: >
-    Mozilla#1182856
-
 -
  browser: >
    Firefox
@ -128,16 +118,6 @@
  origin: >
    Bootstrap#19984

-
-  browser: >
-    Chrome
-  summary: >
-    Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
-  upstream_bug: >
-    Chromium#231752
-  origin: >
-    Bootstrap#17021
-
 -
  browser: >
    Safari
--- a/_data/colors.yml
+++ b/_data/colors.yml
@ -0,0 +1,26 @@
+- name: blue
+  hex: "#007aff"
+- name: indigo
+  hex: "#2b29bb"
+- name: purple
+  hex: "#882ae0"
+- name: pink
+  hex: "#f14095"
+- name: red
+  hex: "#ea0242"
+- name: orange
+  hex: "#ff8d00"
+- name: yellow
+  hex: "#ffec00"
+- name: green
+  hex: "#34da36"
+- name: teal
+  hex: "#1dde8e"
+- name: cyan
+  hex: "#08eff3"
+- name: white
+  hex: "#fff"
+- name: gray
+  hex: "#464a4c"
+- name: gray-dark
+  hex: "#292b2c"
--- a/docs/_data/core-team.yml
+++ b/docs/_data/core-team.yml
@ -33,3 +33,7 @@
 - name: Gleb Mazovetskiy
  user: glebm
  gravatar: 729f685b8e8d7e9feed18c177c82e59b
+
+- name: Johann-S
+  user: johann-s
+  gravatar: d90d49733a4fe1aa461e45cb4a4fd9e3
--- a/_data/grays.yml
+++ b/_data/grays.yml
@ -0,0 +1,18 @@
+- name: 100
+  hex: "#f8f9fa"
+- name: 200
+  hex: "#ebedef"
+- name: 300
+  hex: "#ced3d8"
+- name: 400
+  hex: "#abb3bd"
+- name: 500
+  hex: "#7c8a99"
+- name: 600
+  hex: "#55626f"
+- name: 700
+  hex: "#4a5560"
+- name: 800
+  hex: "#384048"
+- name: 900
+  hex: "#131619"
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@ -6,18 +6,17 @@
    - title: Browsers & devices
    - title: JavaScript
    - title: Options
-    - title: Flexbox
    - title: Build tools
-    - title: Best practices
+    # - title: Best practices # TODO: Write this content
+    - title: Webpack
    - title: Accessibility

 - title: Layout
  pages:
    - title: Overview
    - title: Grid
-    - title: Flexbox grid
    - title: Media object
-    - title: Responsive utilities
+    - title: Utilities for layout

 - title: Content
  pages:
@ -58,20 +57,25 @@
    - title: Clearfix
    - title: Close icon
    - title: Colors
-    - title: Display property
+    - title: Display
+    - title: Embed
+    - title: Flex
+    - title: Float
    - title: Image replacement
-    - title: Invisible content
-    - title: Responsive helpers
+    - title: Position
    - title: Screenreaders
-    - title: Sizing and positioning
+    - title: Sizing
    - title: Spacing
-    - title: Typography
+    - title: Text
    - title: Vertical align
+    - title: Visibility

-# - title: Extend
-#   pages:
-#     - title: Approach
-#     - title: Icon fonts
+- title: Extend
+  pages:
+    # - title: Approach
+    - title: Icons
+
+- title: Migration

 - title: About
  pages:
@ -80,5 +84,3 @@
    - title: Brand
    - title: License
    - title: Translations
-
- title: Migration
--- a/docs/_data/showcase.yml
+++ b/docs/_data/showcase.yml
--- a/_data/theme-colors.yml
+++ b/_data/theme-colors.yml
@ -0,0 +1,16 @@
+- name: primary
+  hex: "#007aff"
+- name: secondary
+  hex: "#868e96"
+- name: success
+  hex: "#28a745"
+- name: danger
+  hex: "#dc3545"
+- name: warning
+  hex: "#ffc107"
+- name: info
+  hex: "#17a2b8"
+- name: light
+  hex: "#f8f9fa"
+- name: dark
+  hex: "#343a40"
--- a/_data/translations.yml
+++ b/_data/translations.yml
@ -0,0 +1,14 @@
+- name: 中文(繁體)
+  code: zh-tw
+  description: Bootstrap 4 繁體中文手冊
+  url: http://bootstrap.hexschool.com/
+
+- name: Chinese
+  code: zh
+  description: Bootstrap 4 中文文档教程
+  url: http://wiki.jikexueyuan.com/project/bootstrap4/
+
+- name: Brazilian Portuguese
+  code: pt-BR
+  description: Bootstrap 4 Português do Brasil
+  url: https://bootstrapbrasil.github.io/v4/
--- a/_includes/ads.html
+++ b/_includes/ads.html
@ -0,0 +1 @@
+<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
--- a/_includes/callout-danger-async-methods.md
+++ b/_includes/callout-danger-async-methods.md
@ -0,0 +1,7 @@
+{% callout danger %}
+#### Asynchronous methods and transitions
+
+All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
+
+[See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/)
+{% endcallout %}
--- a/docs/_includes/callout-warning-color-assistive-technologies.md
+++ b/docs/_includes/callout-warning-color-assistive-technologies.md
@ -2,4 +2,4 @@
 #### Conveying meaning to assistive technologies

 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% endcallout %}
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@ -0,0 +1,63 @@
+<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
+    {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
+  </a>
+
+  <div class="navbar-nav-scroll">
+    <ul class="navbar-nav bd-navbar-nav flex-row">
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.jobs }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+      </li>
+    </ul>
+  </div>
+
+  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+    <li class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v4.0
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+        <a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (4.x)</a>
+        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/3.3/">v3.3.7</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
+      </div>
+    </li>
+
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
+        {% include icons/github.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" aria-label="Twitter">
+        {% include icons/twitter.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" rel="noopener" aria-label="Slack">
+        {% include icons/slack.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+  </ul>
+
+  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+</header>
--- a/_includes/docs-sidebar.html
+++ b/_includes/docs-sidebar.html
@ -0,0 +1,57 @@
+<form class="bd-search d-flex align-items-center">
+  <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
+  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+    {% include icons/menu.svg class="" width="30" height="30" %}
+  </button>
+</form>
+
+<nav class="collapse bd-links" id="bd-docs-nav">
+  {%- assign page_slug = page.url | split: '/' | last -%}
+  {%- for group in site.data.nav -%}
+  {%- assign link = group.pages | first -%}
+  {%- assign link_slug = link.title | slugify -%}
+  {%- assign group_slug = group.title | slugify -%}
+  {%- assign active = nil -%}
+
+  {%- if page.group == group_slug -%}
+    {%- assign active = 'active' -%}
+  {%- endif -%}
+
+  <div class="bd-toc-item{% unless active == nil %} {{ active }}{% endunless %}">
+      <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
+        {{ group.title }}
+      </a>
+
+      <ul class="nav bd-sidenav">
+        {%- for doc in group.pages -%}
+          {%- assign doc_slug = doc.title | slugify -%}
+          {%- assign active = nil -%}
+
+          {%- if page.group == group_slug and page_slug == doc_slug -%}
+            {%- assign active = 'active bd-sidenav-active' -%}
+          {%- endif -%}
+
+          <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
+            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
+              {{ doc.title }}
+            </a>
+
+            {% comment %}
+            {% unless doc.sections == nil %}
+              <ul class="nav">
+                {% for section in doc.sections %}
+                  <li>
+                    <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
+                      {{ section.title }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endunless %}
+            {% endcomment %}
+          </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  {%- endfor -%}
+</nav>
--- a/_includes/favicons.html
+++ b/_includes/favicons.html
@ -0,0 +1,9 @@
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="{{ site.baseurl }}/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="{{ site.baseurl }}/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+<meta name="msapplication-config" content="{{ site.baseurl }}/assets/img/favicons/browserconfig.xml">
+<meta name="theme-color" content="#563d7c">
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -0,0 +1,12 @@
+<footer class="bd-footer text-muted">
+  <div class="container-fluid p-3 p-md-5">
+    <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="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/about/">About</a></li>
+    </ul>
+    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@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 noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
+  </div>
+</footer>
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@ -1,33 +1,29 @@
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="generator" content="Jekyll v{{ jekyll.version }}">

 <title>
-  {% if page.title %}
+  {%- if page.title -%}
    {{ page.title }} &middot; {{ site.title }}
-  {% else %}
+  {%- else -%}
    {{ site.title }} &middot; {{ site.description }}
-  {% endif %}
+  {%- endif -%}
 </title>

-{% include social.html %}
-
 <!-- Bootstrap core CSS -->
 {% if site.github %}
  <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
-  {% if page.title == "Flexbox grid system" %}
-    <link href="{{ site.baseurl }}/assets/css/docs-flexbox.min.css" rel="stylesheet">
-  {% endif %}
 {% else %}
  <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
 {% endif %}

 <!-- Documentation extras -->
+{% if page.layout == "docs" %}
+<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
+{% endif %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">

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

 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
--- a/_includes/icons/bootstrap.svg
+++ b/_includes/icons/bootstrap.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
--- a/_includes/icons/download.svg
+++ b/_includes/icons/download.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
--- a/_includes/icons/github.svg
+++ b/_includes/icons/github.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
--- a/_includes/icons/import.svg
+++ b/_includes/icons/import.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
--- a/_includes/icons/lightning.svg
+++ b/_includes/icons/lightning.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
--- a/_includes/icons/menu.svg
+++ b/_includes/icons/menu.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
--- a/_includes/icons/slack.svg
+++ b/_includes/icons/slack.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
--- a/_includes/icons/twitter.svg
+++ b/_includes/icons/twitter.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@ -0,0 +1,55 @@
+<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+
+<script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"></script>
+
+{% if site.github %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
+{% else %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
+{% endif %}
+
+{% if site.github %}
+  <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
+{% else %}
+  <script src="{{ site.baseurl }}/assets/js/vendor/anchor.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
+{% endif %}
+
+<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
+
+{% if page.layout == "docs" %}
+<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+<script>
+  var docsearch = docsearch({
+    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
+    indexName: 'bootstrap-v4',
+    inputSelector: '#search-input',
+    handleSelected: function (input, event, suggestion) {
+      var url = suggestion.url;
+      url = suggestion.isLvl1 ? url.split('#')[0]: url;
+      // If it's a title we remove the anchor so it does not jump.
+      window.location.href = url;
+    },
+    transformData: function (hits) {
+      return hits.map(function (hit) {
+        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
+        return hit;
+      });
+    },
+    debug: false // Set debug to true if you want to inspect the dropdown
+  });
+</script>
+{% endif %}
+
+<script>
+Holder.addTheme('gray', {
+  bg: '#777',
+  fg: 'rgba(255,255,255,.75)',
+  font: 'Helvetica',
+  fontweight: 'normal'
+});
+</script>
--- a/docs/_includes/social.html
+++ b/docs/_includes/social.html
@ -1,3 +1,7 @@
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
+
 <!-- Twitter -->
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
@ -19,13 +23,14 @@
  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
  <meta property="og:title" content="{{ page.title }}">
  <meta property="og:description" content="{{ page.description }}">
+  <meta property="og:type" content="website">
 {% else %}
  <meta property="og:url" content="{{ site.url }}">
  <meta property="og:title" content="{{ site.title }}">
  <meta property="og:description" content="{{ site.description }}">
 {% endif %}
-<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
-
-<!-- Meta -->
-<meta name="description" content="{{ site.description }}">
-<meta name="author" content="{{ site.authors }}">
+<meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' }}{{ site.social_image_path }}">
+<meta property="og:image:secure_url" content="{{ site.url }}{{ site.social_image_path }}">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -10,12 +10,17 @@
      </div>
    </a>

-    {% include nav-home.html %}
+    {% include docs-navbar.html %}

-    <div id="content">
+    {% if page.layout == "simple" %}
        {{ content }}
-    </div>
+    {% else %}
+        <main id="content" role="main">
+            {{ content }}
+        </main>
+    {% endif %}

    {% include footer.html %}
+    {% include scripts.html %}
  </body>
 </html>
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+  </head>
+  <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
+    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
+      <div class="container">
+        <span class="skiplink-text">Skip to main content</span>
+      </div>
+    </a>
+
+    {% include docs-navbar.html %}
+
+    <div class="container-fluid">
+      <div class="row flex-xl-nowrap">
+        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+          {% include docs-sidebar.html %}
+        </div>
+
+        {% if page.toc %}
+          <div class="d-none d-xl-block col-xl-2 bd-toc">
+            {{ content | toc_only }}
+          </div>
+        {% endif %}
+
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+          <h1 class="bd-title" id="content">{{ page.title }}</h1>
+          <p class="bd-lead">{{ page.description }}</p>
+          {% include ads.html %}
+          {{ content }}
+        </main>
+      </div>
+    </div>
+
+    {% include scripts.html %}
+  </body>
+</html>
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
@ -10,10 +10,11 @@
      </div>
    </a>

-    {% include nav-home.html %}
+    {% include docs-navbar.html %}

    {{ content }}

    {% include footer.html %}
+    {% include scripts.html %}
  </body>
 </html>
--- a/_layouts/redirect.html
+++ b/_layouts/redirect.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap - Content moved</title>
+    <link rel="canonical" href="{{ page.redirect.to }}">
+    <meta http-equiv="refresh" content="0; url={{ page.redirect.to }}">
+    <style>
+      html {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+        text-align: center;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      }
+      h1 {
+        margin-top: 0;
+        margin-bottom: .5rem;
+      }
+      a {
+        color: #007bff;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Redirecting…</h1>
+    <a href="{{ page.redirect.to }}">Click here if you are not redirected</a>
+    <script>location="{{ page.redirect.to }}"</script>
+  </body>
+</html>
--- a/_layouts/simple.html
+++ b/_layouts/simple.html
@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
+    <p class="bd-lead">{{ page.description }}</p>
+    {% include ads.html %}
+    {{ content }}
+  </main>
+</div>
--- a/docs/_plugins/bugify.rb
+++ b/docs/_plugins/bugify.rb
@ -4,8 +4,8 @@ module Jekyll
      upstream_map = {
        "Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
        "Edge" => ["https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/", "Edge issue"],
-        "UserVoice" => ["https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/", "Edge UserVoice idea"],
        "A11yUserVoice" => ["https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/", "Microsoft A11y UserVoice idea"],
+        "UserVoice" => ["https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/", "Edge UserVoice idea"],
        "Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
        "Chromium" => ["https://bugs.chromium.org/p/chromium/issues/detail?id=", "Chromium issue"],
        "WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
--- a/docs/_plugins/callout.rb
+++ b/docs/_plugins/callout.rb
--- a/docs/_plugins/highlight_alt.rb
+++ b/docs/_plugins/highlight_alt.rb
@ -57,16 +57,26 @@ eos
      def example(output)
        "<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
      end
-    
+
      def remove_holderjs(code)
        code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
      end

+      def remove_example_classes(code)
+        # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
+        # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
+        # To fix the bug, replace `(?=")` with `(?=("|\ ))`.
+        code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
+        # Find empty class attributes after the previous regex and remove those too.
+        code = code.gsub(/\ class=""/, "")
+      end
+
      def render_rouge(code)
        require 'rouge'
        formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
        lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
        code = remove_holderjs(code)
+        code = remove_example_classes(code)
        code = formatter.format(lexer.lex(code))
        "<div class=\"highlight\"><pre>#{code}</pre></div>"
      end
--- a/docs/_plugins/markdown-block.rb
+++ b/docs/_plugins/markdown-block.rb
--- a/assets/brand/bootstrap-outline.svg
+++ b/assets/brand/bootstrap-outline.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
+  <g fill="#FFF" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
+    <path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
+  </g>
+</svg>
--- a/assets/brand/bootstrap-punchout.svg
+++ b/assets/brand/bootstrap-punchout.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
+  <g fill="#FFF" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
+    <path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
+  </g>
+</svg>
--- a/assets/brand/bootstrap-social-logo.png
+++ b/assets/brand/bootstrap-social-logo.png
--- a/assets/brand/bootstrap-social.png
+++ b/assets/brand/bootstrap-social.png
--- a/assets/brand/bootstrap-solid.svg
+++ b/assets/brand/bootstrap-solid.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
+    <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
+  </g>
+</svg>
--- a/assets/css/docs.min.css
+++ b/assets/css/docs.min.css
--- a/assets/css/docs.min.css.map
+++ b/assets/css/docs.min.css.map
--- a/assets/img/bootstrap-stack.png
+++ b/assets/img/bootstrap-stack.png
--- a/assets/img/bootstrap-themes.png
+++ b/assets/img/bootstrap-themes.png
--- a/assets/img/favicons/android-chrome-192x192.png
+++ b/assets/img/favicons/android-chrome-192x192.png
--- a/assets/img/favicons/android-chrome-512x512.png
+++ b/assets/img/favicons/android-chrome-512x512.png
--- a/assets/img/favicons/apple-touch-icon.png
+++ b/assets/img/favicons/apple-touch-icon.png
--- a/assets/img/favicons/browserconfig.xml
+++ b/assets/img/favicons/browserconfig.xml
@ -0,0 +1,11 @@
+---
+---
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="{{ site.baseurl }}/assets/img/favicons/mstile-150x150.png"/>
+            <TileColor>#563d7c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/assets/img/favicons/favicon-16x16.png
+++ b/assets/img/favicons/favicon-16x16.png
--- a/assets/img/favicons/favicon-32x32.png
+++ b/assets/img/favicons/favicon-32x32.png
--- a/assets/img/favicons/manifest.json
+++ b/assets/img/favicons/manifest.json
@ -0,0 +1,22 @@
+---
+---
+{
+    "name": "Bootstrap",
+    "short_name": "Bootstrap",
+    "icons": [
+        {
+            "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/",
+    "theme_color": "#563d7c",
+    "background_color": "#563d7c",
+    "display": "standalone"
+}
--- a/assets/img/favicons/mstile-144x144.png
+++ b/assets/img/favicons/mstile-144x144.png
--- a/assets/img/favicons/mstile-150x150.png
+++ b/assets/img/favicons/mstile-150x150.png
--- a/assets/img/favicons/mstile-310x150.png
+++ b/assets/img/favicons/mstile-310x150.png
--- a/assets/img/favicons/mstile-310x310.png
+++ b/assets/img/favicons/mstile-310x310.png
--- a/assets/img/favicons/mstile-70x70.png
+++ b/assets/img/favicons/mstile-70x70.png
--- a/assets/img/favicons/safari-pinned-tab.svg
+++ b/assets/img/favicons/safari-pinned-tab.svg
@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M975 6983 c-494 -88 -870 -467 -959 -965 -13 -72 -15 -404 -14 -2513
+0 -1970 3 -2446 13 -2515 46 -295 206 -564 445 -747 60 -46 164 -113 175 -113
+3 0 31 -13 62 -28 73 -35 146 -58 260 -82 84 -17 196 -18 2563 -16 2334 1
+2479 3 2545 19 39 10 77 20 85 22 74 18 226 87 310 139 92 58 255 209 298 276
+9 14 28 41 43 60 36 48 111 200 138 280 12 36 30 106 40 155 18 86 19 188 17
+2570 l-1 2480 -27 95 c-52 188 -106 300 -207 434 -170 225 -400 372 -691 442
+-71 17 -200 18 -2545 20 -2111 2 -2482 0 -2550 -13z"/>
+</g>
+</svg>
--- a/assets/js/docs.min.js
+++ b/assets/js/docs.min.js
--- a/docs/assets/js/ie-emulation-modes-warning.js
+++ b/docs/assets/js/ie-emulation-modes-warning.js
@ -10,7 +10,7 @@
 */
 // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
 (function () {
-  'use strict';
+  'use strict'

  function emulatedIEMajorVersion() {
    var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
@ -26,7 +26,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; @*/')()
+    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
    if (jscriptVersion === undefined) {
      return 11 // IE11+ not in emulation mode
    }
@ -49,4 +49,4 @@
  if (emulated !== nonEmulated) {
    window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
  }
-})();
+}())
--- a/docs/assets/js/ie10-viewport-bug-workaround.js
+++ b/docs/assets/js/ie10-viewport-bug-workaround.js
@ -1,7 +1,7 @@
 /*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
- * Copyright 2014-2015 The Bootstrap Authors
- * Copyright 2014-2015 Twitter, Inc.
+ * Copyright 2014-2017 The Bootstrap Authors
+ * Copyright 2014-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@ -9,7 +9,7 @@
 // https://getbootstrap.com/getting-started/#support-ie10-width

 (function () {
-  'use strict';
+  'use strict'

  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement('style')
@ -21,4 +21,4 @@
    document.head.appendChild(msViewportStyle)
  }

-})();
+}())
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@ -4,16 +4,16 @@

 /*!
 * JavaScript for Bootstrap's docs (https://getbootstrap.com)
- * Copyright 2011-2016 The Bootstrap Authors
- * Copyright 2011-2016 Twitter, Inc.
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see https://creativecommons.org/licenses/by/3.0/.
 */

 /* global Clipboard, anchors */

-!function ($) {
-  'use strict';
+(function ($) {
+  'use strict'

  $(function () {

@ -33,7 +33,7 @@
    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)

    // Disable empty links in docs examples
-    $('.bd-example [href="#"]').click(function (e) {
+    $('.bd-content [href="#"]').click(function (e) {
      e.preventDefault()
    })

@ -48,11 +48,23 @@
      $modal.find('.modal-body input').val(recipient)
    })

+    // Activate animated progress bar
+    $('.bd-toggle-animated-progress').on('click', function () {
+      $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
+    })
+
    // Insert copy to clipboard button before .highlight
    $('.highlight').each(function () {
-      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
+      var btnHtml = '<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
      $(this).before(btnHtml)
-      $('.btn-clipboard').tooltip()
+      $('.btn-clipboard')
+        .tooltip()
+        .on('mouseleave', function () {
+          // explicitly hide tooltip, since after clicking it remains
+          // focused (as it's a button), so tooltip would otherwise
+          // remain visible until focus is moved away
+          $(this).tooltip('hide')
+        })
    })

    var clipboard = new Clipboard('.btn-clipboard', {
@ -84,13 +96,10 @@
        .tooltip('_fixTitle')
    })

+    anchors.options = {
+      icon: '#'
+    }
+    anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+    $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
  })
-
-}(jQuery)
-
-;(function () {
-  'use strict';
-
-  anchors.options.placement = 'left';
-  anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
-})();
+}(jQuery))
--- a/assets/js/src/pwa.js
+++ b/assets/js/src/pwa.js
@ -0,0 +1,15 @@
+/* eslint no-console:off */
+
+(function setupSW() {
+  'use strict'
+
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/sw.js').then(function (registration) {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope)
+      }).catch(function (err) {
+        console.log('ServiceWorker registration failed: ', err)
+      })
+    })
+  }
+}())
--- a/assets/js/vendor/anchor.min.js
+++ b/assets/js/vendor/anchor.min.js
--- a/assets/js/vendor/clipboard.min.js
+++ b/assets/js/vendor/clipboard.min.js
--- a/docs/assets/js/vendor/holder.min.js
+++ b/docs/assets/js/vendor/holder.min.js
--- a/assets/js/vendor/jquery-slim.min.js
+++ b/assets/js/vendor/jquery-slim.min.js
--- a/assets/js/vendor/popper.min.js
+++ b/assets/js/vendor/popper.min.js
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@ -5,38 +5,26 @@
 //

 #carbonads {
+  position: static;
  display: block;
+  max-width: 400px;
  padding: 15px 15px 15px 160px;
-  margin: 50px -15px 0;
+  margin: 2rem 0;
  overflow: hidden;
  font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.4;
  text-align: left;
-  border: solid #866ab3;
-  border-width: 1px 0 0;
+  background-color: rgba(0,0,0,.05);

  a {
-    color: #fff;
+    color: #333;
    text-decoration: none;
  }

  @include media-breakpoint-up(sm) {
    max-width: 330px;
-    margin: 50px auto 0;
-    border-width: 1px;
    border-radius: 4px;
  }
-
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: 0;
-    right: 15px;
-    margin-top: 0;
-
-    .bd-masthead & {
-      position: static;
-    }
-  }
 }

 .carbon-img {
@ -46,5 +34,5 @@

 .carbon-poweredby {
  display: block;
-  color: #cdbfe3 !important;
+  color: #777 !important;
 }
--- a/assets/scss/_algolia.scss
+++ b/assets/scss/_algolia.scss
@ -0,0 +1,139 @@
+// Docsearch overrides
+//
+// `!important` indicates overridden properties.
+.algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
+  // Menu container
+  .ds-dropdown-menu {
+    width: 100%;
+    min-width: 0 !important;
+    max-width: none !important;
+    padding: .75rem 0 !important;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.1);
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.175);
+
+    @include media-breakpoint-up(md) {
+      width: 175%;
+    }
+
+    // Caret
+    &::before {
+      display: none !important;
+    }
+
+    [class^=ds-dataset-] {
+      padding: 0 !important;
+      overflow: visible !important;
+      background-color: transparent !important;
+      border: 0 !important;
+    }
+
+    .ds-suggestions {
+      margin-top: 0 !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    padding: .125rem 1rem !important;
+    margin-top: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 500 !important;
+    color: $bd-purple-bright !important;
+    border-bottom: 0 !important;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    float: none !important;
+    padding-top: 0 !important;
+  }
+
+  // Section header
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  .algolia-docsearch-suggestion--content {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+
+    // Vertical divider between column header and content
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .ds-suggestion {
+    &:not(:first-child) {
+      .algolia-docsearch-suggestion--category-header {
+        padding-top: .75rem !important;
+        margin-top: .75rem !important;
+        border-top: 1px solid rgba(0,0,0,.1);
+      }
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion--title {
+    display: block;
+    padding: .25rem 1rem !important;
+    margin-bottom: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 400 !important;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    padding: 0 1rem .5rem !important;
+    margin-top: -.25rem;
+    font-size: .875rem !important;
+    font-weight: normal;
+    line-height: 1.25 !important;
+  }
+
+  .algolia-docsearch-footer {
+    float: none !important;
+    width: auto !important;
+    height: auto !important;
+    padding: .75rem 1rem 0;
+    font-size: .75rem !important;
+    line-height: 1 !important;
+    color: #767676 !important;
+    border-top: 1px solid rgba(0,0,0,.1);
+  }
+
+  .algolia-docsearch-footer--logo {
+    display: inline !important;
+    overflow: visible !important;
+    color: inherit !important;
+    text-indent: 0 !important;
+    background: none !important;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: #5f2dab;
+    background-color: rgba(154, 132, 187, .12);
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 rgba(95,45,171,.5) !important;
+  }
+
+  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+    background-color: rgba(208,189,236,.15) !important;
+  }
+}
--- a/assets/scss/_anchor.scss
+++ b/assets/scss/_anchor.scss
@ -0,0 +1,12 @@
+// scss-lint:disable ImportantRule
+
+.anchorjs-link {
+  font-weight: normal;
+  color: rgba($link-color, .5);
+  transition: color .16s linear;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+}
--- a/docs/assets/scss/_brand.scss
+++ b/docs/assets/scss/_brand.scss
--- a/docs/assets/scss/_browser-bugs.scss
+++ b/docs/assets/scss/_browser-bugs.scss
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@ -2,16 +2,28 @@
 //
 // Custom buttons for the docs.

-.btn-bs {
+.btn-bd-purple {
  font-weight: 500;
  color: $bd-purple-bright;
  border-color: $bd-purple-bright;

  &:hover,
-  &:focus,
  &:active {
    color: #fff;
    background-color: $bd-purple-bright;
    border-color: $bd-purple-bright;
  }
 }
+
+.btn-bd-yellow {
+  font-weight: 500;
+  color: $bd-yellow;
+  border-color: $bd-yellow;
+
+  &:hover,
+  &:active {
+    color: $bd-graphite;
+    background-color: $bd-yellow;
+    border-color: $bd-yellow;
+  }
+}
--- a/docs/assets/scss/_callouts.scss
+++ b/docs/assets/scss/_callouts.scss
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@ -23,6 +23,7 @@
  color: #818a91;
  cursor: pointer;
  background-color: transparent;
+  border: 0;
  border-radius: .25rem;

  &:hover {
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@ -0,0 +1,24 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@ -32,6 +32,45 @@
  background-color: rgba(255,0,0,.1);
 }

+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+

 //
 // Container illustrations
@ -47,7 +86,7 @@
 .bd-example-container-header {
  height: 3rem;
  margin-bottom: .5rem;
-  background-color: lighten($brand-primary, 50%);
+  background-color: lighten($blue, 50%);
  border-radius: .25rem;
 }

@ -55,7 +94,7 @@
  float: right;
  width: 4rem;
  height: 8rem;
-  background-color: lighten($brand-warning, 25%);
+  background-color: lighten($blue, 25%);
  border-radius: .25rem;
 }

@ -78,7 +117,7 @@
 .bd-example {
  position: relative;
  padding: 1rem;
-  margin: 1rem -1rem;
+  margin: 1rem (-$grid-gutter-width / 2);
  border: solid #f7f7f9;
  border-width: .2rem 0 0;
  @include clearfix();
@ -100,9 +139,13 @@
    margin-top: 2rem;
  }

-  // Undo width of container
-  .container {
-    width: auto;
+  .pos-f-t {
+    position: relative;
+    margin: -1rem;
+
+    @include media-breakpoint-up(sm) {
+      margin: -1.5rem;
+    }
  }

  > .form-control {
@ -111,11 +154,6 @@
    }
  }

-  // Card examples should be horizontal
-  > .card {
-    max-width: 20rem;
-  }
-
  > .nav + .nav,
  > .alert + .alert,
  > .navbar + .navbar,
@ -199,20 +237,22 @@

 // Navbars
 .bd-example {
-  .navbar-fixed-top {
+  .fixed-top,
+  .sticky-top {
    position: static;
    margin: -1rem -1rem 1rem;
  }
-  .navbar-fixed-bottom {
+  .fixed-bottom {
    position: static;
    margin: 1rem -1rem -1rem;
  }

  @include media-breakpoint-up(sm) {
-    .navbar-fixed-top {
+    .fixed-top,
+    .sticky-top {
      margin: -1.5rem -1.5rem 1rem;
    }
-    .navbar-fixed-bottom {
+    .fixed-bottom {
      margin: 1rem -1.5rem -1.5rem;
    }
  }
@ -226,34 +266,38 @@

 // Example modals
 .bd-example-modal {
-  background-color: #f5f5f5;
-}
-.bd-example-modal .modal {
-  position: relative;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-  z-index: 1;
-  display: block;
-}
-.bd-example-modal .modal-dialog {
-  left: auto;
-  margin-right: auto;
-  margin-left: auto;
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
 }

-// Example dropdowns
-.bd-example > .dropdown > .dropdown-toggle {
-  float: left;
+.modal {
+  z-index: 1072;
+
+  .tooltip, .popover {
+    z-index: 1073;
+  }
 }
-.bd-example > .dropdown > .dropdown-menu {
-  position: static;
-  display: block;
-  margin-bottom: .25rem;
-  clear: left;
+
+.modal-backdrop {
+  z-index: 1071;
 }

+
 // Example tabbable tabs
 .bd-example-tabs .nav-tabs {
  margin-bottom: 1rem;
@ -267,6 +311,18 @@
  margin-top: .25rem;
  margin-bottom: .25rem;
 }
+.bs-tooltip-top-docs,
+.bs-tooltip-bottom-docs {
+  .arrow {
+    left: 50%;
+  }
+}
+.bs-tooltip-right-docs,
+.bs-tooltip-left-docs {
+  .arrow {
+    top: 50%;
+  }
+}

 // Popovers
 .bd-example-popover-static {
@ -280,6 +336,18 @@
  width: 260px;
  margin: 1.25rem;
 }
+.bs-popover-top-docs,
+.bs-popover-bottom-docs {
+  .arrow {
+    left: 50%;
+  }
+}
+.bs-popover-right-docs,
+.bs-popover-left-docs {
+  .arrow {
+    top: 50%;
+  }
+}

 // Tooltips
 .tooltip-demo a {
@ -301,28 +369,17 @@
  overflow: auto;
 }

-// Helpers
-.bd-example > {
-  .bg-primary,
-  .bg-success,
-  .bg-info,
-  .bg-warning,
-  .bg-danger,
-  .bg-inverse,
-  .bg-faded {
-    &:not(.navbar) {
-      padding: .5rem;
-      margin-top: .5rem;
-      margin-bottom: .5rem;
-    }
-  }
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
 }

 .bd-example-border-utils {
-  [class^="border-"] {
+  [class^="border"] {
    display: inline-block;
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
    margin: .25rem;
    background-color: #f5f5f5;
    border: 1px solid;
@ -335,15 +392,26 @@

 .highlight {
  padding: 1rem;
-  margin: 1rem (-$grid-gutter-width-base / 2);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
  background-color: #f7f7f9;
+  -ms-overflow-style: -ms-autohiding-scrollbar;

  @include media-breakpoint-up(sm) {
    padding: 1.5rem;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
    margin-right: 0;
    margin-left: 0;
  }
 }
+
 .highlight pre {
  padding: 0;
  margin-top: 0;
@ -353,5 +421,5 @@
 }
 .highlight pre code {
  font-size: inherit;
-  color: $gray-dark; // Effectively the base text color
+  color: $gray-900; // Effectively the base text color
 }
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@ -0,0 +1,115 @@
+// scss-lint:disable IdSelector, NestingDepth, SelectorDepth, QualifyingElement
+
+//
+// Automatically style Markdown-based tables like a Bootstrap `.table`.
+//
+
+.bd-content {
+  order: 1;
+
+  // Hack the sticky header
+  > h2[id],
+  > h3[id],
+  > h4[id] {
+    pointer-events: none;
+
+    > div,
+    > a {
+      pointer-events: auto;
+    }
+
+    &::before {
+      display: block;
+      height: 6rem;
+      margin-top: -6rem;
+      visibility: hidden;
+      content: "";
+    }
+  }
+
+  > table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      overflow-x: auto;
+      -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+    }
+
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th,
+        > td {
+          padding: $table-cell-padding;
+          vertical-align: top;
+          border: 1px solid $table-border-color;
+
+          > p:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    // Prevent breaking of code (e.g., Grunt tasks list)
+    td:first-child > code {
+      white-space: nowrap;
+    }
+  }
+}
+
+//
+// Docs sections
+//
+
+.bd-content {
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  > h3 {
+    margin-top: 1.5rem;
+  }
+
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    > ul,
+    > ol,
+    > p {
+      max-width: 80%;
+    }
+  }
+}
+
+.bd-title {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: 300;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 3rem;
+  }
+}
+
+.bd-lead {
+  font-size: 1.125rem;
+  font-weight: 300;
+
+  @include media-breakpoint-up(sm) {
+    max-width: 80%;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+  }
+}
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }
--- a/docs/assets/scss/_examples.scss
+++ b/docs/assets/scss/_examples.scss
--- a/docs/assets/scss/_featured-sites.scss
+++ b/docs/assets/scss/_featured-sites.scss
--- a/docs/assets/scss/_footer.scss
+++ b/docs/assets/scss/_footer.scss
@ -3,17 +3,16 @@
 //

 .bd-footer {
-  padding: 4rem 0;
-  margin-top: 4rem;
  font-size: 85%;
  text-align: center;
  background-color: #f7f7f7;

  a {
    font-weight: 500;
-    color: $gray;
+    color: $gray-700;

-    &:hover {
+    &:hover,
+    &:focus {
      color: $link-color;
    }
  }
--- a/assets/scss/_masthead.scss
+++ b/assets/scss/_masthead.scss
@ -0,0 +1,61 @@
+// scss-lint:disable ImportantRule
+
+.bd-masthead {
+  position: relative;
+  padding: 3rem ($grid-gutter-width / 2);
+  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+
+  h1 {
+    line-height: 1;
+  }
+
+  .btn {
+    width: 100%;
+    padding: .8rem 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  .carbonad {
+    margin-top: 0 !important;
+    margin-bottom: -3rem !important;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+
+    .carbonad {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    h1 {
+      font-size: 4rem;
+    }
+
+    .carbonad {
+      margin-top: 3rem !important;
+    }
+  }
+}
+
+.bd-pretext {
+  overflow: hidden;
+  resize: none;
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+
+.masthead-followup {
+  .bd-clipboard { display: none; }
+
+  .highlight {
+    padding: .5rem 0;
+    background-color: transparent;
+  }
+}
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@ -0,0 +1,76 @@
+//
+// Main navbar
+//
+
+.bd-navbar {
+  min-height: 4rem;
+  background-color: $bd-purple;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
+
+  @include media-breakpoint-down(md) {
+    padding-right: .5rem;
+    padding-left: .5rem;
+
+    .navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      margin-top: .25rem;
+      overflow: hidden;
+      font-size: .875rem;
+
+      .navbar-nav {
+        padding-bottom: 2rem;
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: 1071; // over everything in bootstrap
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      padding-right: .5rem;
+      padding-left: .5rem;
+      color: $bd-purple-light;
+
+      &.active,
+      &:hover {
+        color: #fff;
+        background-color: transparent;
+      }
+
+      &.active {
+        font-weight: 500;
+      }
+    }
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-top;
+  }
+
+  .dropdown-menu {
+    font-size: .875rem;
+  }
+
+  .dropdown-item.active {
+    font-weight: 500;
+    color: $gray-900;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: .4rem .6rem;
+    background-size: .75rem .75rem;
+  }
+}
--- a/docs/assets/scss/_page-header.scss
+++ b/docs/assets/scss/_page-header.scss
@ -1,7 +1,7 @@
 // scss-lint:disable ImportantRule

 .bd-pageheader {
-  padding: 2rem ($grid-gutter-width-base / 2);
+  padding: 2rem ($grid-gutter-width / 2);
  margin-bottom: 1.5rem;
  color: $bd-purple-light;
  text-align: center;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>`
				`@ -0,0 +1 @@`
				<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>`
				`@ -0,0 +1 @@`
				`<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>`