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
@ -28,10 +28,6 @@ restrictions:
  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
@ -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
--- 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
@ -62,11 +62,21 @@ eos
        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>`