Merge branch 'v4-dev' into yiq-function-update

2025-08-31 17:11:48 +02:00 · 2017-10-15 11:55:02 +02:00
parent 8f483dc432 3ccb7ef16a
commit 98778164e0
38 changed files with 1125 additions and 844 deletions
--- a/.hound.yml
+++ b/.hound.yml
@@ -2,6 +2,12 @@ fail_on_violations: true

 stylelint:
  config_file: build/.stylelintrc
+  enabled: true
+  ignore_file: .houndignore
+
+eslint:
+  config_file: js/.eslintrc.json
+  ignore_file: .houndignore

 scss:
  enabled: false
@@ -9,9 +15,5 @@ scss:
 jshint:
  enabled: false

-eslint:
-  config_file: js/.eslintrc.json
-  ignore_file: .houndignore
-
 ruby:
  enabled: false
--- a/2
+++ b/2
@@ -4,5 +4,5 @@ group :development, :test do
  gem 'jekyll', '~> 3.6.0'
  gem 'jekyll-redirect-from', '~> 0.12.1'
  gem 'jekyll-sitemap', '~> 1.1.1'
-  gem 'jekyll-toc', '~> 0.3.0'
+  gem 'jekyll-toc', '~> 0.4.0.rc2'
 end
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -24,7 +24,7 @@ GEM
      sass (~> 3.4)
    jekyll-sitemap (1.1.1)
      jekyll (~> 3.3)
-    jekyll-toc (0.3.0)
+    jekyll-toc (0.4.0.rc2)
      nokogiri (~> 1.6)
    jekyll-watch (1.5.0)
      listen (~> 3.0, < 3.1)
@@ -39,7 +39,7 @@ GEM
      mini_portile2 (~> 2.3.0)
    nokogiri (1.8.1-x64-mingw32)
      mini_portile2 (~> 2.3.0)
-    pathutil (0.14.0)
+    pathutil (0.16.0)
      forwardable-extended (~> 2.6)
    public_suffix (3.0.0)
    rb-fsevent (0.10.2)
@@ -47,7 +47,7 @@ GEM
      ffi (>= 0.5.0, < 2)
    rouge (2.2.1)
    safe_yaml (1.0.4)
-    sass (3.5.1)
+    sass (3.5.2)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
@@ -61,7 +61,7 @@ DEPENDENCIES
  jekyll (~> 3.6.0)
  jekyll-redirect-from (~> 0.12.1)
  jekyll-sitemap (~> 1.1.1)
-  jekyll-toc (~> 0.3.0)
+  jekyll-toc (~> 0.4.0.rc2)

 BUNDLED WITH
   1.15.4
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://getbootstrap.com/">
-    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
+    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width=72 height=72>
  </a>

  <h3 align="center">Bootstrap</h3>
@@ -8,13 +8,13 @@
  <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>
+    <a href="https://getbootstrap.com/docs/4.0/"><strong>Explore Bootstrap docs »</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>
@@ -50,16 +50,18 @@ Read the [Getting started page](https://getbootstrap.com/getting-started/) for i
 ## Status

 [![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
+[![Build Status](https://img.shields.io/travis/twbs/bootstrap/v4-dev.svg)](https://travis-ci.org/twbs/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)
+[![peerDependencies Status](https://img.shields.io/david/peer/twbs/bootstrap.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)
+[![CSS gzip size](http://img.badgesize.io/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css?compression=gzip&label=CSS+gzip+size)](https://github.com/twbs/bootstrap/tree/v4-dev/dist/css/bootstrap.min.css)
+[![JS gzip size](http://img.badgesize.io/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js?compression=gzip&label=JS+gzip+size)](https://github.com/twbs/bootstrap/tree/v4-dev/dist/js/bootstrap.min.js)

-[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
+[![Sauce Labs Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)

 ## What's included

@@ -71,7 +73,15 @@ bootstrap/
 │   ├── bootstrap.css
 │   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
-│   └── bootstrap.min.css.map
+│   ├── bootstrap.min.css.map
+│   ├── bootstrap-grid.css
+│   ├── bootstrap-grid.css.map
+│   ├── bootstrap-grid.min.css
+│   ├── bootstrap-grid.min.css.map
+│   ├── bootstrap-reboot.css
+│   ├── bootstrap-reboot.css.map
+│   ├── bootstrap-reboot.min.css
+│   └── bootstrap-reboot.min.css.map
 └── js/
    ├── bootstrap.js
    └── bootstrap.min.js
@@ -87,13 +97,13 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:

 ## Documentation

-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.
+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/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+1. Run through the [tooling setup](https://getbootstrap.com/docs/4.0/getting-started/build-tools/#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 `npm run docs-serve` in the command line.
@@ -109,15 +119,13 @@ Learn more about using Jekyll by reading its [documentation](https://jekyllrb.co
 [Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.


-
 ## Contributing

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

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

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


 ## Community
@@ -132,7 +140,6 @@ Get updates on Bootstrap's development and chat with the project maintainers and
 - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.


-
 ## Versioning

 For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
@@ -153,7 +160,6 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr
 - <https://github.com/fat>


-
 ## Copyright and 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/_data/colors.yml
+++ b/_data/colors.yml
@@ -1,26 +1,26 @@
 - name: blue
-  hex: "#007aff"
+  hex: "#007bff"
 - name: indigo
-  hex: "#2b29bb"
+  hex: "#6610f2"
 - name: purple
-  hex: "#882ae0"
+  hex: "#6f42c1"
 - name: pink
-  hex: "#f14095"
+  hex: "#e83e8c"
 - name: red
-  hex: "#ea0242"
+  hex: "#dc3545"
 - name: orange
-  hex: "#ff8d00"
+  hex: "#fd7e14"
 - name: yellow
-  hex: "#ffec00"
+  hex: "#ffc107"
 - name: green
-  hex: "#34da36"
+  hex: "#28a745"
 - name: teal
-  hex: "#1dde8e"
+  hex: "#20c997"
 - name: cyan
-  hex: "#08eff3"
+  hex: "#17a2b8"
 - name: white
  hex: "#fff"
 - name: gray
-  hex: "#464a4c"
+  hex: "#868e96"
 - name: gray-dark
-  hex: "#292b2c"
+  hex: "#343a40"
--- a/_data/grays.yml
+++ b/_data/grays.yml
@@ -1,18 +1,18 @@
 - name: 100
  hex: "#f8f9fa"
 - name: 200
-  hex: "#ebedef"
+  hex: "#e9ecef"
 - name: 300
-  hex: "#ced3d8"
+  hex: "#dee2e6"
 - name: 400
-  hex: "#abb3bd"
+  hex: "#ced4da"
 - name: 500
-  hex: "#7c8a99"
+  hex: "#adb5bd"
 - name: 600
-  hex: "#55626f"
+  hex: "#868e96"
 - name: 700
-  hex: "#4a5560"
+  hex: "#495057"
 - name: 800
-  hex: "#384048"
+  hex: "#343a40"
 - name: 900
-  hex: "#131619"
+  hex: "#212529"
--- a/_data/theme-colors.yml
+++ b/_data/theme-colors.yml
@@ -1,5 +1,5 @@
 - name: primary
-  hex: "#007aff"
+  hex: "#007bff"
 - name: secondary
  hex: "#868e96"
 - name: success
--- a/_includes/icons/import.svg
+++ b/_includes/icons/import.svg
@@ -1 +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>
+<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="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
--- a/assets/scss/_brand.scss
+++ b/assets/scss/_brand.scss
@@ -1,3 +1,5 @@
+// stylelint-disable no-duplicate-selectors
+
 //
 // Brand guidelines
 //
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-no-qualifying-type
+// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type

 //
 // Grid examples
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
+// stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type

 //
 // Automatically style Markdown-based tables like a Bootstrap `.table`.
--- a/build/.stylelintrc
+++ b/build/.stylelintrc
@@ -19,7 +19,7 @@
    "declaration-block-semicolon-space-after": "always-single-line",
    "declaration-empty-line-before": null,
    "declaration-no-important": true,
-    "font-family-name-quotes": "always-where-required",
+    "font-family-name-quotes": "always-where-recommended",
    "font-weight-notation": "numeric",
    "function-comma-space-after": null,
    "function-url-no-scheme-relative": true,
@@ -32,7 +32,7 @@
    "media-feature-range-operator-space-after": "always",
    "media-feature-range-operator-space-before": "never",
    "no-descending-specificity": null,
-    "no-duplicate-selectors": null,
+    "no-duplicate-selectors": true,
    "number-leading-zero": "never",
    "order/properties-order": [
      "position",
--- a/build/htmllint.js
+++ b/build/htmllint.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to run vnu-jar if Java is available.
+ * Copyright 2017 The Bootstrap Authors
+ * Copyright 2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+'use strict'
+
+const childProcess = require('child_process')
+const vnu = require('vnu-jar')
+
+childProcess.exec('java -version', function (error) {
+  if (error) {
+    console.error('Skipping HTML lint test; Java is missing.')
+    return
+  }
+
+  const ignores = [
+    'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “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.',
+    'Attribute “title” not allowed on element “circle” at this point.',
+    'Bad value “tablist” for attribute “role” on element “nav”.',
+    'Element “img” is missing required attribute “src”.',
+    'Element “legend” not allowed as child of element “div” in this context.*'
+  ].join('|')
+
+  const args = [
+    '-jar',
+    vnu,
+    '--asciiquotes',
+    '--errors-only',
+    '--skip-non-html',
+    `--filterpattern "${ignores}"`,
+    '_gh_pages/',
+    'js/tests/'
+  ]
+
+  return childProcess.spawn('java', args, {
+    shell: true,
+    stdio: 'inherit'
+  })
+  .on('exit', process.exit)
+})
--- a/build/postcss.config.js
+++ b/build/postcss.config.js
@@ -1,7 +1,7 @@
 'use strict'

 module.exports = (ctx) => ({
-  map: ctx.file.dirname.startsWith('docs') ? false : {
+  map: ctx.file.dirname.includes('examples') ? false : {
    inline: false,
    annotation: true,
    sourcesContent: true
--- a/build/saucelabs-unit-test.js
+++ b/build/saucelabs-unit-test.js
@@ -1,23 +1,32 @@
+/*!
+ * Script to run our Sauce Labs tests.
+ * Copyright 2017 The Bootstrap Authors
+ * Copyright 2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*
+Docs: https://wiki.saucelabs.com/display/DOCS/Platform+Configurator
+Mac Opera is not currently supported by Sauce Labs
+Win Opera 15+ is not currently supported by Sauce Labs
+iOS Chrome is not currently supported by Sauce Labs
+*/
+
 'use strict'

 const path = require('path')
 const JSUnitSaucelabs = require('jsunitsaucelabs')

-// Docs: https://wiki.saucelabs.com/display/DOCS/Platform+Configurator
-// Mac Opera is not currently supported by Sauce Labs
-// Win Opera 15+ is not currently supported by Sauce Labs
-// iOS Chrome is not currently supported by Sauce Labs
-
 const jsUnitSaucelabs = new JSUnitSaucelabs({
  username: process.env.SAUCE_USERNAME,
  password: process.env.SAUCE_ACCESS_KEY,
-  build:    process.env.TRAVIS_JOB_ID
+  build: process.env.TRAVIS_JOB_ID
 })

-const testURL      = 'http://localhost:3000/js/tests/index.html?hidepassed'
+const testURL = 'http://localhost:3000/js/tests/index.html?hidepassed'
 const browsersFile = require(path.resolve(__dirname, './sauce_browsers.json'))
-let jobsDone       = 0
-let jobsSucceeded  = 0
+let jobsDone = 0
+let jobsSucceeded = 0

 const waitingCallback = (error, body, id) => {
  if (error) {
@@ -33,8 +42,8 @@ const waitingCallback = (error, body, id) => {
        })
      }, 2000)
    } else {
-      const test   = body['js tests'][0]
-      let passed   = false
+      const test = body['js tests'][0]
+      let passed = false
      let errorStr = false

      if (test.result !== null) {
@@ -46,9 +55,9 @@ const waitingCallback = (error, body, id) => {
      }

      console.log(`Tested ${testURL}`)
-      console.log(`Platform: ${test.platform.join(',')}`)
+      console.log(`Platform: ${test.platform.join(', ')}`)
      console.log(`Passed: ${passed.toString()}`)
-      console.log(`Url ${test.url} \n`)
+      console.log(`URL: ${test.url}\n`)
      if (errorStr) {
        console.error(errorStr)
      }
@@ -61,7 +70,13 @@ const waitingCallback = (error, body, id) => {
      // Exit
      if (jobsDone === browsersFile.length - 1) {
        jsUnitSaucelabs.stop()
-        process.exit(jobsDone === jobsSucceeded ? 0 : 1)
+        if (jobsDone > jobsSucceeded) {
+          const failedTest = jobsDone - jobsSucceeded
+          throw new Error(`Some test(s) failed (${failedTest})`)
+        }
+
+        console.log('All tests passed')
+        process.exit(0)
      }
    }
  }
--- a/docs/4.0/examples/.stylelintrc
+++ b/docs/4.0/examples/.stylelintrc
@@ -0,0 +1,12 @@
+{
+  "extends": "../../../build/.stylelintrc",
+  "rules": {
+    "at-rule-no-vendor-prefix": null,
+    "comment-empty-line-before": null,
+    "media-feature-name-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-qualifying-type": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null
+  }
+}
--- a/docs/4.0/examples/blog/blog.css
+++ b/docs/4.0/examples/blog/blog.css
@@ -13,12 +13,18 @@ body {
  color: #555;
 }

-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #333;
--- a/docs/4.0/examples/dashboard/dashboard.css
+++ b/docs/4.0/examples/dashboard/dashboard.css
@@ -27,18 +27,12 @@ h1 {
  bottom: 0;
  left: 0;
  z-index: 1000;
-  padding: 20px;
+  padding: 20px 0;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
 }

-/* Sidebar navigation */
-.sidebar {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 .sidebar .nav {
  margin-bottom: 20px;
 }
--- a/docs/4.0/getting-started/contents.md
+++ b/docs/4.0/getting-started/contents.md
@@ -18,7 +18,15 @@ bootstrap/
 │   ├── bootstrap.css
 │   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
-│   └── bootstrap.min.css.map
+│   ├── bootstrap.min.css.map
+│   ├── bootstrap-grid.css
+│   ├── bootstrap-grid.css.map
+│   ├── bootstrap-grid.min.css
+│   ├── bootstrap-grid.min.css.map
+│   ├── bootstrap-reboot.css
+│   ├── bootstrap-reboot.css.map
+│   ├── bootstrap-reboot.min.css
+│   └── bootstrap-reboot.min.css.map
 └── js/
    ├── bootstrap.js
    └── bootstrap.min.js
@@ -26,6 +34,52 @@ bootstrap/

 This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.

+### Comparison of CSS files
+
+<table class="table table-bordered table-responsive">
+  <thead>
+    <tr>
+      <th scope="col">CSS files</th>
+      <th scope="col" class="text-center">Layout</th>
+      <th scope="col" class="text-center">Content</th>
+      <th scope="col" class="text-center">Components</th>
+      <th scope="col" class="text-center">Utilities</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap.css</code></div>
+        <div><code class="text-nowrap">bootstrap.min.css</code></div>
+      </th>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap-grid.css</code></div>
+        <div><code class="text-nowrap">bootstrap-grid.min.css</code></div>
+      </th>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/">grid</a> system</td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/">flex</a> utilities</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap-reboot.css</code></div>
+        <div><code class="text-nowrap">bootstrap-reboot.min.css</code></div>
+      </th>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/">Reboot</a></td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-danger text-center align-middle">No</td>
+    </tr>
+  </tbody>
+</table>
+
 ## Bootstrap source code

 The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
--- a/docs/4.0/getting-started/download.md
+++ b/docs/4.0/getting-started/download.md
@@ -10,7 +10,7 @@ toc: true

 Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}** to easily drop into your project, which includes:

- Compiled and minified CSS bundles (default, grid-only, and Reboot-only)
+- Compiled and minified CSS bundles (see [CSS files comparison]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#comparison-of-css-files))
 - Compiled and minified JavaScript plugins

 This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -228,17 +228,19 @@ Within `_variables.scss`, you'll find our color variables and Sass map. Here's a

 {% highlight scss %}
 $colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
-  "blue": $blue,
-  "pink": $pink,
-  "purple": $purple,
+  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
-  "gray-dark": $gray-900
+  "gray-dark": $gray-800
 ) !default;
 {% endhighlight %}

--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -149,9 +149,9 @@ For example, here are two grid layouts that apply to every device and viewport,
 {% endexample %}
 </div>

-Equal-width columns can be broken into multiple lines, but there is a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevents this from working without an explicit `flex-basis` or `border`. Our example works thanks to the `border` being set; you can do the same with `.col { border: 1px solid transparent; }`. Alternatively, you can set the flex-basis to the width of the column (e.g., `.col { flex: 1 0 50%; }`).
+Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevented this from working without an explicit `flex-basis` or `border`.

-Both these fixes have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor).
+Two workarounds have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor), though if the browser is up to date this shouldn't be necessary.

 <div class="bd-example-row">
 {% example html %}
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -69,7 +69,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
  - [Octicons](https://octicons.github.com/)
  - [Font Awesome](http://fontawesome.io/)
  - See the [Extend page]({{ site.baseurl }}/docs/{{ site.docs_version }}/extend/icons/) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
- Dropped the Affix jQuery plugin.
+- **Dropped the Affix jQuery plugin.**
  - We recommend using `position: sticky` instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)/
  - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
 - **Dropped the pager component** as it was essentially slightly customized buttons.
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -169,12 +169,6 @@ const Modal = (() => {
        return
      }

-      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
-
-      if (transition) {
-        this._isTransitioning = true
-      }
-
      const hideEvent = $.Event(Event.HIDE)

      $(this._element).trigger(hideEvent)
@@ -185,6 +179,12 @@ const Modal = (() => {

      this._isShown = false

+      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
+
+      if (transition) {
+        this._isTransitioning = true
+      }
+
      this._setEscapeEvent()
      this._setResizeEvent()

--- a/js/tests/README.md
+++ b/js/tests/README.md
@@ -24,7 +24,7 @@ To run the unit test suite via a real web browser, open `index.html` in the brow

 * Each test should have a unique name clearly stating what unit is being tested.
 * Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
-* Each test should begin with [`assert.expect`](https://api.qunitjs.com/expect/) to ensure that the expected assertions are run.
+* Each test should begin with [`assert.expect`](https://api.qunitjs.com/assert/expect/) to ensure that the expected assertions are run.
 * Each test should follow the project's [JavaScript Code Guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js)

 ### Example tests
@@ -33,16 +33,16 @@ To run the unit test suite via a real web browser, open `index.html` in the brow
 // Synchronous test
 QUnit.test('should describe the unit being tested', function (assert) {
  assert.expect(1)
-  var templateHTML = '<div class="alert alert-danger fade in">'
+  var templateHTML = '<div class="alert alert-danger fade show">'
      + '<a class="close" href="#" data-dismiss="alert">×</a>'
      + '<p><strong>Template necessary for the test.</p>'
      + '</div>'
  var $alert = $(templateHTML).appendTo('#qunit-fixture').bootstrapAlert()

-  $alert.find('.close').click()
+  $alert.find('.close').trigger('click')

  // Make assertion
-  assert.strictEqual($alert.hasClass('in'), false, 'remove .in class on .close click')
+  assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
 })

 // Asynchronous test
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -171,6 +171,12 @@
      <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22; role=&#x22;dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22; role=&#x22;document&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;close&#x22; data-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
        Modal with an XSS inside the data-target
      </button>
+
+      <br><br>
+
+      <button type="button" class="btn btn-secondary btn-lg" id="btnPreventModal">
+        Launch prevented modal on hide (to see the result open your console)
+      </button>
    </div>

    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
@@ -203,6 +209,22 @@
          $('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
          $('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
        })
+
+        $('#btnPreventModal').on('click', function () {
+          $('#firefoxModal').one('shown.bs.modal', function () {
+            $(this).modal('hide')
+          })
+          .one('hide.bs.modal', function (event) {
+            event.preventDefault()
+            if ($(this).data('bs.modal')._isTransitioning) {
+              console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
+            } else {
+              console.log('Test passed')
+              $(this).modal('hide') // work as expected
+            }
+          })
+          .modal('show')
+        })
      })
    </script>
  </body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css",
    "css-compile-docs": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 assets/scss/docs.scss assets/css/docs.min.css",
    "css-lint": "stylelint --config build/.stylelintrc --syntax scss \"scss/**/*.scss\"",
-    "css-lint-docs": "stylelint --config build/.stylelintrc --syntax scss \"assets/scss/*.scss\"",
+    "css-lint-docs": "stylelint --config build/.stylelintrc --syntax scss \"assets/scss/*.scss\" && stylelint --config docs/4.0/examples/.stylelintrc \"docs/**/*.css\"",
    "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\"",
-    "css-prefix-docs": "postcss --config build/postcss.config.js --no-map --replace assets/css/docs.min.css",
+    "css-prefix-docs": "postcss --config build/postcss.config.js --replace \"assets/css/docs.min.css\" \"docs/**/*.css\"",
    "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
    "css-minify-docs": "cleancss --level 1 --source-map --source-map-inline-sources --output assets/css/docs.min.css assets/css/docs.min.css",
    "js": "npm-run-all js-lint* js-compile* js-minify*",
@@ -49,7 +49,7 @@
    "docs-compile": "bundle exec jekyll build",
    "postdocs-compile": "npm run docs-workbox-precache",
    "docs-github": "shx echo \"github: true\" > twbsconfig.yml && npm run docs-compile -- --config _config.yml,twbsconfig.yml && shx rm ./twbsconfig.yml",
-    "docs-lint": "htmllint --rc build/.htmllintrc \"_gh_pages/**/*.html\" \"js/tests/**/*.html\"",
+    "docs-lint": "htmllint --rc build/.htmllintrc \"_gh_pages/**/*.html\" \"js/tests/**/*.html\" && node build/htmllint.js",
    "docs-serve": "bundle exec jekyll serve",
    "docs-upload-preview": "build/upload-preview.sh",
    "docs-workbox-precache": "node build/workbox.js",
@@ -67,7 +67,7 @@
  "main": "dist/js/bootstrap",
  "repository": {
    "type": "git",
-    "url": "https://github.com/twbs/bootstrap.git"
+    "url": "git+https://github.com/twbs/bootstrap.git"
  },
  "bugs": {
    "url": "https://github.com/twbs/bootstrap/issues"
@@ -85,11 +85,11 @@
    "babel-plugin-external-helpers": "^7.0.0-beta.0",
    "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
    "babel-preset-env": "^2.0.0-beta.0",
-    "bundlesize": "^0.14.4",
+    "bundlesize": "^0.15.2",
    "clean-css-cli": "^4.1.6",
    "cross-env": "^5.0.5",
    "eslint": "^4.2.0",
-    "eslint-plugin-compat": "^1.0.4",
+    "eslint-plugin-compat": "^2.0.1",
    "htmllint-cli": "^0.0.6",
    "jsunitsaucelabs": "^1.2.0",
    "node-sass": "^4.5.3",
@@ -111,6 +111,7 @@
    "stylelint-order": "^0.7.0",
    "stylelint-scss": "^2.1.0",
    "uglify-js": "^3.0.24",
+    "vnu-jar": "^17.11.1",
    "workbox-build": "^2.0.1"
  },
  "engines": {
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -32,8 +32,8 @@
    @include box-shadow(none);
  }

-  &:active,
-  &.active {
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
    background-image: none;
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  }
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -17,6 +17,18 @@
    margin-right: 0;
    margin-left: 0;
  }
+
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
+    }
+  }
+
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
+    }
+  }
 }

 .card-body {
@@ -49,21 +61,6 @@
  }
 }

-.card {
-  > .list-group:first-child {
-    .list-group-item:first-child {
-      @include border-top-radius($card-border-radius);
-    }
-  }
-
-  > .list-group:last-child {
-    .list-group-item:last-child {
-      @include border-bottom-radius($card-border-radius);
-    }
-  }
-}
-
-
 //
 // Optional textual caps
 //
@@ -156,6 +153,7 @@

    .card {
      display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
      flex: 1 0 0%;
      flex-direction: column;
      margin-right: $card-deck-margin;
@@ -182,6 +180,7 @@
    flex-flow: row wrap;

    .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
      flex: 1 0 0%;
      margin-bottom: 0;

@@ -214,6 +213,17 @@
          }
        }

+        &:only-child {
+          @include border-radius($card-border-radius);
+
+          .card-img-top {
+            @include border-top-radius($card-border-radius);
+          }
+          .card-img-bottom {
+            @include border-bottom-radius($card-border-radius);
+          }
+        }
+
        &:not(:first-child):not(:last-child):not(:only-child) {
          border-radius: 0;

@@ -222,10 +232,6 @@
            border-radius: 0;
          }
        }
-
-        &:only-child {
-          @include border-radius($card-border-radius);
-        }
      }
    }
  }
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -9,19 +9,6 @@
  @include caret;
 }

-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
-.dropup {
-  .dropdown-menu {
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
-  }
-
-  .dropdown-toggle {
-    @include caret(up);
-  }
-}
-
 // The dropdown menu
 .dropdown-menu {
  position: absolute;
@@ -44,6 +31,19 @@
  @include box-shadow($dropdown-box-shadow);
 }

+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
  @include nav-divider($dropdown-divider-bg);
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,4 +1,4 @@
-// stylelint-disable
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

 // Reboot
 //
@@ -35,13 +35,17 @@ html {

 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
@at-root {
-  @-ms-viewport { width: device-width; }
+  @-ms-viewport {
+    width: device-width;
+  }
 }

+// stylelint-disable selector-list-comma-newline-after
 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
 }
+// stylelint-enable selector-list-comma-newline-after

 // Body
 //
@@ -91,10 +95,12 @@ hr {
 //
 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 // margin for easier control within type scales as it avoids margin collapsing.
+// stylelint-disable selector-list-comma-newline-after
 h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: $headings-margin-bottom;
 }
+// stylelint-enable selector-list-comma-newline-after

 // Reset margins on paragraphs
 //
@@ -157,10 +163,12 @@ dfn {
  font-style: italic; // Add the correct font style in Android 4.3-
 }

+// stylelint-disable font-weight-notation
 b,
 strong {
  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
 }
+// stylelint-enable font-weight-notation

 small {
  font-size: 80%; // Add the correct font size in all browsers
@@ -224,6 +232,7 @@ a:not([href]):not([tabindex]) {
 // Code
 //

+// stylelint-disable font-family-no-duplicate-names
 pre,
 code,
 kbd,
@@ -231,6 +240,7 @@ samp {
  font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
 }
+// stylelint-enable font-family-no-duplicate-names

 pre {
  // Remove browser default top margin
@@ -283,7 +293,7 @@ a,
 area,
 button,
 [role="button"],
-input:not([type=range]),
+input:not([type="range"]),
 label,
 select,
 summary,
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,16 +1,19 @@
 :root {
+  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
-    --#{$color}: $value;
+    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
-    --#{$color}: $value;
+    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
-    --breakpoint-#{$bp}: $value;
+    --breakpoint-#{$bp}: #{$value};
  }

-  --font-family-sans-serif: $font-family-sans-serif;
-  --font-family-monospace: $font-family-monospace;
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+  --font-family-monospace: #{inspect($font-family-monospace)};
 }
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -103,6 +103,7 @@
 //
 // Same table markup, but inverted color scheme: dark background and light text.

+// stylelint-disable-next-line no-duplicate-selectors
 .table {
  .thead-dark {
    th {
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -21,6 +21,12 @@
    height: $tooltip-arrow-height;
  }

+  .arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
  &.bs-tooltip-top {
    padding: $tooltip-arrow-width 0;
    .arrow {
@@ -88,12 +94,6 @@
      @extend .bs-tooltip-left;
    }
  }
-
-  .arrow::before {
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
 }

 // Wrapper for the tooltip content
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -32,8 +32,8 @@
    border-color: $border;
  }

-  &:active,
-  &.active,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active,
  .show > &.dropdown-toggle {
    background-color: $active-background;
    background-image: none; // Remove the gradient for the pressed/active state
@@ -65,8 +65,8 @@
    background-color: transparent;
  }

-  &:active,
-  &.active,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: $color-hover;
    background-color: $color;
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -47,5 +47,6 @@
 }

@mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: percentage($size / $columns);
+  $num: $size / $columns;
+  margin-left: if($num == 0, 0, percentage($num));
 }