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

.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "es2015",
-      {
-        "loose": true,
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": ["external-helpers"]
-}

.babelrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    [
+      'env',
+      {
+        loose: true,
+        modules: false,
+        exclude: ['transform-es2015-typeof-symbol']
+      }
+    ]
+  ],
+  plugins: [
+    process.env.ROLLUP && 'external-helpers',
+    process.env.PLUGINS && 'transform-es2015-modules-strip'
+  ].filter(Boolean)
+};

.gitattributes

@@ -4,10 +4,10 @@
 *.js    text eol=lf
 *.json  text eol=lf
 *.md    text eol=lf
-*.py    text eol=lf
 *.rb    text eol=lf
 *.scss  text eol=lf
 *.svg   text eol=lf
+*.txt   text eol=lf
 *.yml   text eol=lf
 # Don't diff or textually merge source maps
 *.map   binary

.github/CONTRIBUTING.md

@@ -42,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 build system, which is used to run all our tests, concatenate and compile source files, and more.
+- `build` - 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.
@@ -57,7 +57,7 @@ Good bug reports are extremely helpful, so thanks!
 
 Guidelines for bug reports:
 
-0. **Validate and lint your code** — [validate your HTML](https://html5.validator.nu)
+0. **Validate and lint your code** — [validate your HTML](https://html5.validator.nu/)
    and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
    problem isn't caused by a simple error in your own code.
 
@@ -151,7 +151,7 @@ documentation source files and is managed separately by the Bootstrap Core Team.
 Adhering to the following process is the best way to get your work
 included in the project:
 
-1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
+1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork,
    and configure the remotes:
 
    ```bash
@@ -180,7 +180,7 @@ included in the project:
 4. Commit your changes in logical chunks. Please adhere to these [git commit
    message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
    or your code is unlikely be merged into the main project. Use Git's
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   [interactive rebase](https://help.github.com/articles/about-git-rebase/)
    feature to tidy up your commits before making them public.
 
 5. Locally merge (or rebase) the upstream development branch into your topic branch:
@@ -195,7 +195,7 @@ included in the project:
    git push origin <topic-branch-name>
    ```
 
-7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+7. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/)
     with a clear title and description against the `master` branch.
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
@@ -211,7 +211,7 @@ includes code changes) and under the terms of the
 * Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
 * Or you can just open a new pull request for your revised version.
 
-[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
+[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com/) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
 
 
 ## Code guidelines

.github/ISSUE_TEMPLATE.md

@@ -1,7 +1,7 @@
 Before opening an issue:
 
 - [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- [Validate](https://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
+- [Validate](https://html5.validator.nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
 - Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
 - Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md)
 
@@ -14,7 +14,7 @@ When reporting a bug, include:
 
 - Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
 - Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
-- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com)
+- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com/)
 
 When suggesting a feature, include:
 

.gitignore

@@ -38,12 +38,6 @@ Thumbs.db
 .komodotools
 *.komodoproject
 
-# SCSS-Lint
-scss-lint-report.xml
-
-# grunt-contrib-sass cache
-.sass-cache
-
 # Jekyll metadata and extra config file for `github` script
 docs/.jekyll-metadata
 twbsconfig.yml

.hound.yml

@@ -1,7 +1,7 @@
 fail_on_violations: true
 
-scss:
+stylelint:
-  config_file: .scss-lint.yml
+  config_file: build/.stylelintrc
 
 jshint:
   enabled: false

.scss-lint.yml

@@ -1,537 +0,0 @@
-# Default application configuration that all configurations inherit from.
-scss_files:
-  - "scss/**/*.scss"
-  - "docs/assets/scss/**/*.scss"
-
-plugin_directories: ['.scss-linters']
-
-# List of gem names to load custom linters from (make sure they are already
-# installed)
-plugin_gems: []
-
-# Default severity of all linters.
-severity: warning
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BemDepth:
-    enabled: false
-    max_elements: 1
-
-  BorderZero:
-    enabled: true
-    convention: zero # or `none`
-
-  ChainedClasses:
-    enabled: false
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    exclude:
-      - scss/bootstrap.scss
-    style: silent
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DisableLinterReason:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-
-  ElsePlacement:
-    enabled: true
-    style: same_line # or 'new_line'
-
-  EmptyLineBetweenBlocks:
-    enabled: false
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  ExtendDirective:
-    enabled: false
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short # or 'long'
-
-  HexNotation:
-    enabled: true
-    style: lowercase # or 'uppercase'
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: true
-
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    allow_non_nested_indentation: false
-    character: space # or 'tab'
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero # or 'include_zero'
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: true
-    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
-
-  NestingDepth:
-    enabled: true
-    max_depth: 5
-    ignore_parent_selectors: false
-
-  PlaceholderInExtend:
-    enabled: false
-
-  PropertyCount:
-    enabled: false
-    include_nested: false
-    max_properties: 10
-
-  PropertySortOrder:
-    enabled: true
-    ignore_unspecified: false
-    min_properties: 2
-    separate_groups: false
-    order:
-      - position
-      - top
-      - right
-      - bottom
-      - left
-      - z-index
-      - -webkit-box-sizing
-      - -moz-box-sizing
-      - box-sizing
-      - display
-      - flex
-      - flex-align
-      - flex-basis
-      - flex-direction
-      - flex-wrap
-      - flex-flow
-      - flex-grow
-      - flex-order
-      - flex-pack
-      - align-items
-      - align-self
-      - justify-content
-      - order
-      - float
-      - width
-      - min-width
-      - max-width
-      - height
-      - min-height
-      - max-height
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
-      - overflow
-      - overflow-x
-      - overflow-y
-      - -webkit-overflow-scrolling
-      - -ms-overflow-x
-      - -ms-overflow-y
-      - -ms-overflow-style
-      - clip
-      - clear
-      - font
-      - font-family
-      - font-size
-      - font-style
-      - font-weight
-      - font-variant
-      - font-size-adjust
-      - font-stretch
-      - font-effect
-      - font-emphasize
-      - font-emphasize-position
-      - font-emphasize-style
-      - font-smooth
-      - -webkit-hyphens
-      - -moz-hyphens
-      - hyphens
-      - line-height
-      - color
-      - text-align
-      - -webkit-text-align-last
-      - -moz-text-align-last
-      - -ms-text-align-last
-      - text-align-last
-      - text-emphasis
-      - text-emphasis-color
-      - text-emphasis-style
-      - text-emphasis-position
-      - text-decoration
-      - text-indent
-      - text-justify
-      - text-outline
-      - -ms-text-overflow
-      - text-overflow
-      - text-overflow-ellipsis
-      - text-overflow-mode
-      - text-shadow
-      - text-transform
-      - text-wrap
-      - -webkit-text-size-adjust
-      - -ms-text-size-adjust
-      - letter-spacing
-      - -ms-word-break
-      - word-break
-      - word-spacing
-      - -ms-word-wrap
-      - word-wrap
-      - overflow-wrap
-      - -moz-tab-size
-      - -o-tab-size
-      - tab-size
-      - white-space
-      - vertical-align
-      - list-style
-      - list-style-position
-      - list-style-type
-      - list-style-image
-      - pointer-events
-      - -ms-touch-action
-      - touch-action
-      - cursor
-      - visibility
-      - zoom
-      - table-layout
-      - empty-cells
-      - caption-side
-      - border-spacing
-      - border-collapse
-      - content
-      - quotes
-      - counter-reset
-      - counter-increment
-      - resize
-      - -webkit-user-select
-      - -moz-user-select
-      - -ms-user-select
-      - -o-user-select
-      - user-select
-      - nav-index
-      - nav-up
-      - nav-right
-      - nav-down
-      - nav-left
-      - background
-      - background-color
-      - background-image
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
-      - filter
-      - background-repeat
-      - background-attachment
-      - background-position
-      - background-position-x
-      - background-position-y
-      - -webkit-background-clip
-      - -moz-background-clip
-      - background-clip
-      - background-origin
-      - -webkit-background-size
-      - -moz-background-size
-      - -o-background-size
-      - background-size
-      - border
-      - border-color
-      - border-style
-      - border-width
-      - border-top
-      - border-top-color
-      - border-top-style
-      - border-top-width
-      - border-right
-      - border-right-color
-      - border-right-style
-      - border-right-width
-      - border-bottom
-      - border-bottom-color
-      - border-bottom-style
-      - border-bottom-width
-      - border-left
-      - border-left-color
-      - border-left-style
-      - border-left-width
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-right-radius
-      - border-bottom-left-radius
-      - -webkit-border-image
-      - -moz-border-image
-      - -o-border-image
-      - border-image
-      - -webkit-border-image-source
-      - -moz-border-image-source
-      - -o-border-image-source
-      - border-image-source
-      - -webkit-border-image-slice
-      - -moz-border-image-slice
-      - -o-border-image-slice
-      - border-image-slice
-      - -webkit-border-image-width
-      - -moz-border-image-width
-      - -o-border-image-width
-      - border-image-width
-      - -webkit-border-image-outset
-      - -moz-border-image-outset
-      - -o-border-image-outset
-      - border-image-outset
-      - -webkit-border-image-repeat
-      - -moz-border-image-repeat
-      - -o-border-image-repeat
-      - border-image-repeat
-      - outline
-      - outline-width
-      - outline-style
-      - outline-color
-      - outline-offset
-      - -webkit-box-shadow
-      - -moz-box-shadow
-      - box-shadow
-      - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
-      - opacity
-      - -ms-interpolation-mode
-      - -webkit-transition
-      - -moz-transition
-      - -ms-transition
-      - -o-transition
-      - transition
-      - -webkit-transition-delay
-      - -moz-transition-delay
-      - -ms-transition-delay
-      - -o-transition-delay
-      - transition-delay
-      - -webkit-transition-timing-function
-      - -moz-transition-timing-function
-      - -ms-transition-timing-function
-      - -o-transition-timing-function
-      - transition-timing-function
-      - -webkit-transition-duration
-      - -moz-transition-duration
-      - -ms-transition-duration
-      - -o-transition-duration
-      - transition-duration
-      - -webkit-transition-property
-      - -moz-transition-property
-      - -ms-transition-property
-      - -o-transition-property
-      - transition-property
-      - -webkit-transform
-      - -moz-transform
-      - -ms-transform
-      - -o-transform
-      - transform
-      - -webkit-transform-origin
-      - -moz-transform-origin
-      - -ms-transform-origin
-      - -o-transform-origin
-      - transform-origin
-      - -webkit-animation
-      - -moz-animation
-      - -ms-animation
-      - -o-animation
-      - animation
-      - -webkit-animation-name
-      - -moz-animation-name
-      - -ms-animation-name
-      - -o-animation-name
-      - animation-name
-      - -webkit-animation-duration
-      - -moz-animation-duration
-      - -ms-animation-duration
-      - -o-animation-duration
-      - animation-duration
-      - -webkit-animation-play-state
-      - -moz-animation-play-state
-      - -ms-animation-play-state
-      - -o-animation-play-state
-      - animation-play-state
-      - -webkit-animation-timing-function
-      - -moz-animation-timing-function
-      - -ms-animation-timing-function
-      - -o-animation-timing-function
-      - animation-timing-function
-      - -webkit-animation-delay
-      - -moz-animation-delay
-      - -ms-animation-delay
-      - -o-animation-delay
-      - animation-delay
-      - -webkit-animation-iteration-count
-      - -moz-animation-iteration-count
-      - -ms-animation-iteration-count
-      - -o-animation-iteration-count
-      - animation-iteration-count
-      - -webkit-animation-direction
-      - -moz-animation-direction
-      - -ms-animation-direction
-      - -o-animation-direction
-
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-    disabled_properties: []
-
-  PropertyUnits:
-    enabled: true
-    global: [
-      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
-      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
-      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
-      'deg', 'grad', 'rad', 'turn',            # Angle
-      'ms', 's',                               # Duration
-      'Hz', 'kHz',                             # Frequency
-      'dpi', 'dpcm', 'dppx',                   # Resolution
-      '%']                                     # Other
-    properties: {}
-
-  PseudoElement:
-    enabled: true
-
-  QualifyingElement:
-    enabled: true
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  SelectorDepth:
-    enabled: true
-    max_depth: 4
-
-  SelectorFormat:
-    enabled: false
-    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
-
-  Shorthand:
-    enabled: true
-    allowed_shorthands: [1, 2, 3, 4]
-
-  SingleLinePerProperty:
-    enabled: false
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: false
-
-  SpaceAfterComma:
-    enabled: false
-    style: one_space # or 'no_space', or 'at_least_one_space'
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-    style: one_space # or 'at_least_one_space', or 'no_space'
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space # or 'new_line'
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes # or double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  TransitionAll:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VariableForProperty:
-    enabled: false
-    properties: []
-
-  VendorPrefix:
-    enabled: true
-    identifier_list: base
-    additional_identifiers: []
-    excluded_identifiers: []
-
-  ZeroUnit:
-    enabled: true
-
-  Compass::*:
-    enabled: false

.travis.yml

@@ -4,31 +4,28 @@ language: node_js
 git:
   depth: 3
 node_js:
-  - "4"
+  - "6"
   - "8"
 before_install:
   - 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 --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
+stages:
+  - test
+  - name: browser
+    if: type = push
+jobs:
+  include:
+    - stage: browser
+      node_js: 8
+      script: if ! git log --format=%B --no-merges -n 1 | grep '\[skip browser\]'; then npm test && npm run js-test-cloud; fi
 cache:
   directories:
     - node_modules
     - vendor/bundle
-env:
-  - TWBS_TEST=core
-  - TWBS_TEST=browser
-matrix:
-  exclude:
-    - node_js: "4"
-      env: TWBS_TEST=browser
 notifications:
   slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
   webhooks:

Gemfile

@@ -1,9 +1,8 @@
 source 'https://rubygems.org'
 
 group :development, :test do
-  gem 'jekyll', '~> 3.5.1'
+  gem 'jekyll', '~> 3.6.0'
   gem 'jekyll-redirect-from', '~> 0.12.1'
   gem 'jekyll-sitemap', '~> 1.1.1'
-  gem 'jekyll-toc', '~> 0.3.0.pre1'
+  gem 'jekyll-toc', '~> 0.3.0'
-  gem 'scss_lint', '~> 0.54.0'
 end

Gemfile.lock

@@ -7,16 +7,16 @@ GEM
     ffi (1.9.18)
     ffi (1.9.18-x64-mingw32)
     forwardable-extended (2.6.0)
-    jekyll (3.5.2)
+    jekyll (3.6.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
+      kramdown (~> 1.14)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (~> 1.7)
+      rouge (>= 1.7, < 3)
       safe_yaml (~> 1.0)
     jekyll-redirect-from (0.12.1)
       jekyll (~> 3.3)
@@ -28,41 +28,40 @@ GEM
       nokogiri (~> 1.6)
     jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
-    kramdown (1.14.0)
+    kramdown (1.15.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)
+    mini_portile2 (2.3.0)
-    nokogiri (1.8.0)
+    nokogiri (1.8.1)
-      mini_portile2 (~> 2.2.0)
+      mini_portile2 (~> 2.3.0)
-    nokogiri (1.8.0-x64-mingw32)
+    nokogiri (1.8.1-x64-mingw32)
-      mini_portile2 (~> 2.2.0)
+      mini_portile2 (~> 2.3.0)
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
     public_suffix (3.0.0)
-    rake (12.0.0)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    rouge (1.11.1)
+    rouge (2.2.1)
     safe_yaml (1.0.4)
-    sass (3.4.25)
+    sass (3.5.1)
-    scss_lint (0.54.0)
+      sass-listen (~> 4.0.0)
-      rake (>= 0.9, < 13)
+    sass-listen (4.0.0)
-      sass (~> 3.4.20)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
 
 PLATFORMS
   ruby
   x64-mingw32
 
 DEPENDENCIES
-  jekyll (~> 3.5.1)
+  jekyll (~> 3.6.0)
   jekyll-redirect-from (~> 0.12.1)
   jekyll-sitemap (~> 1.1.1)
-  jekyll-toc (~> 0.3.0.pre1)
+  jekyll-toc (~> 0.3.0)
-  scss_lint (~> 0.54.0)
 
 BUNDLED WITH
    1.15.4

Gruntfile.js

@@ -1,29 +0,0 @@
-/*!
- * Bootstrap's Gruntfile
- * https://getbootstrap.com
- * 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'
-
-  // Project configuration.
-  grunt.initConfig({
-    'saucelabs-qunit': {
-      all: {
-        options: {
-          build: process.env.TRAVIS_JOB_ID,
-          concurrency: 10,
-          maxRetries: 3,
-          maxPollRetries: 4,
-          urls: ['http://localhost:3000/js/tests/index.html?hidepassed'],
-          browsers: grunt.file.readYAML('build/sauce_browsers.yml')
-        }
-      }
-    }
-  })
-
-  grunt.loadNpmTasks('grunt-saucelabs')
-}

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://getbootstrap.com">
+  <a href="https://getbootstrap.com/">
     <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
   </a>
 
@@ -8,14 +8,14 @@
   <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 &raquo;</strong></a>
     <br>
     <br>
-    <a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
+    <a href="https://themes.getbootstrap.com/">Bootstrap Themes</a>
     &middot;
-    <a href="https://jobs.getbootstrap.com">Job Board</a>
+    <a href="https://jobs.getbootstrap.com/">Job Board</a>
     &middot;
-    <a href="https://blog.getbootstrap.com">Blog</a>
+    <a href="https://blog.getbootstrap.com/">Blog</a>
   </p>
 </p>
 
@@ -40,16 +40,16 @@ Several quick start options are available:
 
 - [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-beta`
+- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@4.0.0-beta`
-- Install with [yarn](https://yarnpkg.com): `yarn add bootstrap@4.0.0-beta`
+- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@4.0.0-beta`
-- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
+- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:4.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).
+- 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.
 
 ## Status
 
-[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
+[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
 [![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)
@@ -125,8 +125,8 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
 Get updates on Bootstrap's development and chat with the project maintainers and community members.
 
 - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
-- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com).
+- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
-- Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
+- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
 - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
 - 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.
@@ -137,7 +137,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
 
 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.
 
-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.
+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.
 
 
 ## Creators

_config.yml

@@ -16,24 +16,24 @@ baseurl:        ""
 url:            "https://getbootstrap.com"
 encoding:       UTF-8
 exclude:
-  - .git
+  - .git/
-  - .github
+  - .github/
   - assets/scss/
-  - build
+  - build/
-  - js
+  - js/
-  - node_modules
+  - node_modules/
-  - nuget
+  - nuget/
-  - scss
+  - scss/
-  - vendor
+  - vendor/
   - bower.json
   - composer.json
   - Gemfile
   - Gemfile.lock
-  - Gruntfile.js
   - package.js
   - package.json
   - package-lock.json
   - sache.json
+  - twbsconfig.yml
 
 plugins:
   - jekyll-redirect-from
@@ -53,15 +53,15 @@ 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-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"
 jobs:               "https://jobs.getbootstrap.com"
 themes:             "https://themes.getbootstrap.com"
 
+download:
+  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"
+
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes
   css:              "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"

_data/browser-features.yml

@@ -52,7 +52,7 @@
   browser: >
     Edge
   summary: >
-    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
   upstream_bug: >
     UserVoice#15944476
   origin: >
@@ -62,7 +62,7 @@
   browser: >
     Firefox
   summary: >
-    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
   upstream_bug: >
     Mozilla#854148
   origin: >
@@ -102,7 +102,7 @@
   browser: >
     Chrome
   summary: >
-    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
   upstream_bug: >
     Chromium#304163
   origin: >

_data/core-team.yml

@@ -37,3 +37,8 @@
 - name: Johann-S
   user: johann-s
   gravatar: d90d49733a4fe1aa461e45cb4a4fd9e3
+
+
+- name: Andres Galante
+  user: andresgalante
+  gravatar: 03dc4f2e26e476958c952505c8d8f563

_data/nav.yml

@@ -5,7 +5,7 @@
     - title: Contents
     - title: Browsers & devices
     - title: JavaScript
-    - title: Options
+    - title: Theming
     - title: Build tools
     # - title: Best practices # TODO: Write this content
     - title: Webpack

_data/showcase.yml

@@ -9,7 +9,7 @@
   img: vogue
 
 - name: Riot Design
-  url: http://riotdesign.eu/en/
+  url: https://riot.design/en/
   expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
   img: riot
 

_includes/docs-navbar.html

@@ -36,7 +36,7 @@
       </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://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>

_includes/docs-sidebar.html

@@ -1,6 +1,6 @@
 <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">
+  <button class="btn 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>

_includes/scripts.html

@@ -24,7 +24,7 @@
 {% if page.layout == "docs" %}
 <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 <script>
-  var docsearch = docsearch({
+  docsearch({
     apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
     indexName: 'bootstrap-v4',
     inputSelector: '#search-input',
@@ -46,10 +46,10 @@
 {% endif %}
 
 <script>
-Holder.addTheme('gray', {
+  Holder.addTheme('gray', {
     bg: '#777',
     fg: 'rgba(255,255,255,.75)',
     font: 'Helvetica',
     fontweight: 'normal'
-});
+  });
 </script>

_layouts/default.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}

_layouts/docs.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}

_layouts/home.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}

_layouts/redirect.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">

_plugins/example.rb

@@ -34,7 +34,7 @@ Syntax Error in tag 'example' while parsing the following markup:
 
   #{markup}
 
-Valid syntax: example <lang>
+Valid syntax: example <lang> [id=foo]
 eos
         end
       end
@@ -55,7 +55,7 @@ eos
       end
 
       def example(output)
-        "<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
+        "<div class=\"bd-example\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n#{output}\n</div>"
       end
 
       def remove_holderjs(code)

assets/js/src/pwa.js

@@ -5,8 +5,23 @@
 
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', function () {
-      navigator.serviceWorker.register('/sw.js').then(function (registration) {
+      navigator.serviceWorker.register('/sw.js').then(function (registration) { // eslint-disable-line compat/compat
         console.log('ServiceWorker registration successful with scope: ', registration.scope)
+        registration.onupdatefound = function () {
+          var installingWorker = registration.installing
+          installingWorker.onstatechange = function () {
+            switch (installingWorker.state) {
+              case 'installed':
+                if (navigator.serviceWorker.controller) { // eslint-disable-line compat/compat
+                  console.log('new update available')
+                  location.reload(true)
+                }
+                break
+
+              default:
+            }
+          }
+        }
       }).catch(function (err) {
         console.log('ServiceWorker registration failed: ', err)
       })

assets/scss/_ads.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, IdSelector
+// stylelint-disable declaration-no-important, selector-max-id
 
 //
 // Carbon ads

assets/scss/_algolia.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Docsearch overrides
 //
 // `!important` indicates overridden properties.
@@ -25,7 +27,7 @@
       display: none !important;
     }
 
-    [class^=ds-dataset-] {
+    [class^="ds-dataset-"] {
       padding: 0 !important;
       overflow: visible !important;
       background-color: transparent !important;
@@ -101,7 +103,7 @@
     padding: 0 1rem .5rem !important;
     margin-top: -.25rem;
     font-size: .875rem !important;
-    font-weight: normal;
+    font-weight: 400;
     line-height: 1.25 !important;
   }
 

assets/scss/_anchor.scss

@@ -1,7 +1,5 @@
-// scss-lint:disable ImportantRule
-
 .anchorjs-link {
-  font-weight: normal;
+  font-weight: 400;
   color: rgba($link-color, .5);
   transition: color .16s linear;
 

assets/scss/_component-examples.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Grid examples
@@ -288,7 +288,8 @@
 .modal {
   z-index: 1072;
 
-  .tooltip, .popover {
+  .tooltip,
+  .popover {
     z-index: 1073;
   }
 }

assets/scss/_content.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable IdSelector, NestingDepth, SelectorDepth, QualifyingElement
+// stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
 
 //
 // Automatically style Markdown-based tables like a Bootstrap `.table`.

assets/scss/_masthead.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// stylelint-disable declaration-no-important
 
 .bd-masthead {
   position: relative;

assets/scss/_page-header.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// stylelint-disable declaration-no-important
 
 .bd-pageheader {
   padding: 2rem ($grid-gutter-width / 2);
@@ -13,7 +13,7 @@
 
   h1 {
     font-size: 3rem;
-    font-weight: normal;
+    font-weight: 400;
     color: #fff;
   }
 

assets/scss/_responsive-tests.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable ImportantRule
-
 //
 // Responsive tests
 //
@@ -12,6 +10,6 @@
 // Utility classes table
 .bd-table th small {
   display: block;
-  font-weight: normal;
+  font-weight: 400;
   color: #999;
 }

assets/scss/_sidebar.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable VendorPrefix
+// stylelint-disable declaration-no-important
 
 //
 // Right side table of contents

assets/scss/_skiplink.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable IdSelector
+// stylelint-disable selector-max-id
 
 #skippy {
   display: block;

assets/scss/_syntax.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-block-single-line-max-declarations
+
 .hll { background-color: #ffc; }
 .c { color: #999; }
 .k { color: #069; }
@@ -62,5 +64,15 @@
 .css .o + .nt,
 .css .nt + .nt { color: #999; }
 
-.language-bash::before { color: #009; content: "$ "; user-select: none; }
+.language-bash::before,
-.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
+.language-sh::before {
+  color: #009;
+  content: "$ ";
+  user-select: none;
+}
+
+.language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  user-select: none;
+}

build/.stylelintrc

@@ -0,0 +1,248 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": [null,
+      "except": ["first-nested"]
+    ],
+    "at-rule-name-space-after": "always",
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": null,
+    "block-closing-brace-newline-after": null,
+    "block-opening-brace-space-before": null,
+    "color-named": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "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-weight-notation": "numeric",
+    "function-comma-space-after": null,
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "length-zero-no-unit": true,
+    "max-empty-lines": 2,
+    "max-line-length": null,
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "never",
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "number-leading-zero": "never",
+    "order/properties-order": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "box-sizing",
+      "display",
+      "flex",
+      "flex-align",
+      "flex-basis",
+      "flex-direction",
+      "flex-wrap",
+      "flex-flow",
+      "flex-grow",
+      "flex-order",
+      "flex-pack",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "order",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "background-clip",
+      "background-origin",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "box-shadow",
+      "opacity",
+      "-ms-interpolation-mode",
+      "transition",
+      "transition-delay",
+      "transition-timing-function",
+      "transition-duration",
+      "transition-property",
+      "transform",
+      "transform-origin",
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-play-state",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction"
+    ],
+    "property-no-vendor-prefix": true,
+    "rule-empty-line-before": null,
+    "selector-attribute-quotes": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "always-single-line",
+    "selector-list-comma-space-before": "never-single-line",
+    "selector-max-attribute": 2,
+    "selector-max-class": 4,
+    "selector-max-combinators": 4,
+    "selector-max-compound-selectors": 4,
+    "selector-max-empty-lines": 1,
+    "selector-max-id": 0,
+    "selector-max-specificity": null,
+    "selector-max-type": 2,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": true,
+    "selector-no-vendor-prefix": true,
+    "string-quotes": "double",
+    "value-keyword-case": "lower",
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-no-vendor-prefix": true
+  }
+}

build/change-version.js

@@ -11,34 +11,30 @@
 
 /* global Set */
 
-var fs = require('fs')
+const fs = require('fs')
-var path = require('path')
+const path = require('path')
-var sh = require('shelljs')
+const sh = require('shelljs')
 sh.config.fatal = true
-var sed = sh.sed
+const sed = sh.sed
 
 // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
-RegExp.quote = function (string) {
+RegExp.quote = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-  return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+RegExp.quoteReplacement = (string) => string.replace(/[$]/g, '$$')
-}
-RegExp.quoteReplacement = function (string) {
-  return string.replace(/[$]/g, '$$')
-}
 
-var DRY_RUN = false
+const DRY_RUN = false
 
 function walkAsync(directory, excludedDirectories, fileCallback, errback) {
   if (excludedDirectories.has(path.parse(directory).base)) {
     return
   }
-  fs.readdir(directory, function (err, names) {
+  fs.readdir(directory, (err, names) => {
     if (err) {
       errback(err)
       return
     }
-    names.forEach(function (name) {
+    names.forEach((name) => {
-      var filepath = path.join(directory, name)
+      const filepath = path.join(directory, name)
-      fs.lstat(filepath, function (err, stats) {
+      fs.lstat(filepath, (err, stats) => {
         if (err) {
           process.nextTick(errback, err)
           return
@@ -60,19 +56,19 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) {
 function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
   original = new RegExp(RegExp.quote(original), 'g')
   replacement = RegExp.quoteReplacement(replacement)
-  var updateFile = !DRY_RUN ? function (filepath) {
+  const updateFile = !DRY_RUN ? (filepath) => {
     if (allowedExtensions.has(path.parse(filepath).ext)) {
       sed('-i', original, replacement, filepath)
     }
-  } : function (filepath) {
+  } : (filepath) => {
     if (allowedExtensions.has(path.parse(filepath).ext)) {
-      console.log('FILE: ' + filepath)
+      console.log(`FILE: ${filepath}`)
     }
     else {
-      console.log('EXCLUDED:' + filepath)
+      console.log(`EXCLUDED:${filepath}`)
     }
   }
-  walkAsync(directory, excludedDirectories, updateFile, function (err) {
+  walkAsync(directory, excludedDirectories, updateFile, (err) => {
     console.error('ERROR while traversing directory!:')
     console.error(err)
     process.exit(1)
@@ -85,14 +81,14 @@ function main(args) {
     console.error('Got arguments:', args)
     process.exit(1)
   }
-  var oldVersion = args[0]
+  const oldVersion = args[0]
-  var newVersion = args[1]
+  const newVersion = args[1]
-  var EXCLUDED_DIRS = new Set([
+  const EXCLUDED_DIRS = new Set([
     '.git',
     'node_modules',
     'vendor'
   ])
-  var INCLUDED_EXTENSIONS = new Set([
+  const INCLUDED_EXTENSIONS = new Set([
     // This extension whitelist is how we avoid modifying binary files
     '',
     '.css',

build/postcss.config.js

@@ -1,3 +1,5 @@
+'use strict'
+
 module.exports = (ctx) => ({
   map: ctx.file.dirname.startsWith('docs') ? false : {
     inline: false,
@@ -5,27 +7,6 @@ module.exports = (ctx) => ({
     sourcesContent: true
   },
   plugins: {
-    autoprefixer: {
+    autoprefixer: {}
-      browsers: [
-        //
-        // Official browser support policy:
-        // https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers
-        //
-        'Chrome >= 45', // Exact version number here is kinda arbitrary
-        'Firefox ESR',
-        // Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
-        // NOT the Edge app version shown in Edge's "About" screen.
-        // For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
-        // See also https://github.com/Fyrd/caniuse/issues/1928
-        'Edge >= 12',
-        'Explorer >= 10',
-        // Out of leniency, we prefix these 1 version further back than the official policy.
-        'iOS >= 9',
-        'Safari >= 9',
-        // The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
-        'Android >= 4.4',
-        'Opera >= 30'
-      ]
-    }
   }
 })

build/rollup.config.js

@@ -1,3 +1,5 @@
+'use strict'
+
 const path    = require('path')
 const babel   = require('rollup-plugin-babel')
 const resolve = require('rollup-plugin-node-resolve')
@@ -5,17 +7,15 @@ const pkg     = require(path.resolve(__dirname, '../package.json'))
 const BUNDLE  = process.env.BUNDLE === 'true'
 const year    = new Date().getFullYear()
 
-var fileDest  = 'bootstrap.js'
+let fileDest  = 'bootstrap.js'
-var external  = ['jquery', 'popper.js']
+const external  = ['jquery', 'popper.js']
 const plugins = [
   babel({
     exclude: 'node_modules/**', // only transpile our source code
     externalHelpersWhitelist: [ // include only required helpers
-      'typeof',
+      'defineProperties',
-      'classCallCheck',
       'createClass',
-      'inherits',
+      'inheritsLoose'
-      'possibleConstructorReturn'
     ]
   })
 ]
@@ -46,6 +46,5 @@ module.exports = {
   * Bootstrap v${pkg.version} (${pkg.homepage})
   * Copyright 2011-${year} ${pkg.author}
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-  */
+  */`
- `
 }

build/sauce_browsers.json

@@ -0,0 +1,65 @@
+[
+  {
+    "browserName": "safari",
+    "platform": "OS X 10.11",
+    "version": "latest"
+  },
+  {
+    "browserName": "chrome",
+    "platform": "OS X 10.11",
+    "version": "latest"
+  },
+  {
+    "browserName": "firefox",
+    "platform": "OS X 10.11",
+    "version": "latest"
+  },
+  {
+    "browserName": "MicrosoftEdge",
+    "platform": "Windows 10",
+    "version": "latest"
+  },
+  {
+    "browserName": "internet explorer",
+    "version": "11",
+    "platform": "Windows 8.1"
+  },
+  {
+    "browserName": "internet explorer",
+    "version": "10",
+    "platform": "Windows 8"
+  },
+  {
+    "browserName": "chrome",
+    "platform": "Windows 10",
+    "version": "latest"
+  },
+  {
+    "browserName": "firefox",
+    "platform": "Windows 10",
+    "version": "latest"
+  },
+  {
+    "browserName": "iphone",
+    "deviceName": "iPhone Simulator",
+    "platformName": "OS X 10.11",
+    "version": "9.3"
+  },
+  {
+    "browserName": "chrome",
+    "platform": "Linux",
+    "version": "latest"
+  },
+  {
+    "browserName": "firefox",
+    "platform": "Linux",
+    "version": "latest"
+  },
+  {
+    "platform": "Linux",
+    "browserName": "android",
+    "deviceName": "Android Emulator",
+    "version": "latest",
+    "deviceType": "phone"
+  }
+]

build/sauce_browsers.yml

@@ -1,79 +0,0 @@
-[
-  # Docs: https://wiki.saucelabs.com/display/DOCS/Platform+Configurator
-
-  {
-    browserName: "safari",
-    platform: "OS X 10.11"
-  },
-  {
-    browserName: "chrome",
-    platform: "OS X 10.11",
-    version: "latest"
-  },
-  {
-    browserName: "firefox",
-    platform: "OS X 10.11",
-    version: "latest"
-  },
-
-  # Mac Opera not currently supported by Sauce Labs
-
-  {
-    browserName: "MicrosoftEdge",
-    platform: "Windows 10",
-    version: "latest"
-  },
-  {
-    browserName: "internet explorer",
-    version: "11",
-    platform: "Windows 8.1"
-  },
-  {
-    browserName: "internet explorer",
-    version: "10",
-    platform: "Windows 8"
-  },
-
-  {
-    browserName: "chrome",
-    platform: "Windows 10",
-    version: "latest"
-  },
-  {
-    browserName: "firefox",
-    platform: "Windows 10",
-    version: "latest"
-  },
-
-  # Win Opera 15+ not currently supported by Sauce Labs
-
-  {
-    browserName: "iphone",
-    deviceName: "iPhone Simulator",
-    platformName: "OS X 10.11",
-    version: "9.3"
-  },
-
-  # iOS Chrome not currently supported by Sauce Labs
-
-  # Linux (unofficial)
-  {
-    browserName: "chrome",
-    platform: "Linux",
-    version: "latest"
-  },
-  {
-    browserName: "firefox",
-    platform: "Linux",
-    version: "latest"
-  },
-
-  # Android
-  {
-    platform: "Linux",
-    browserName: "android",
-    deviceName: "Android Emulator",
-    version: "latest",
-    deviceType: "phone"
-  }
-]

build/saucelabs-unit-test.js

@@ -0,0 +1,95 @@
+'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
+})
+
+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
+
+const waitingCallback = (error, body, id) => {
+  if (error) {
+    console.error(error)
+    process.exit(1)
+  }
+
+  if (typeof body !== 'undefined') {
+    if (!body.completed) {
+      setTimeout(() => {
+        jsUnitSaucelabs.getStatus(id, (error, body) => {
+          waitingCallback(error, body, id)
+        })
+      }, 2000)
+    } else {
+      const test   = body['js tests'][0]
+      let passed   = false
+      let errorStr = false
+
+      if (test.result !== null) {
+        if (typeof test.result === 'string' && test.result === 'Test exceeded maximum duration') {
+          errorStr = test.result
+        } else {
+          passed = test.result.total === test.result.passed
+        }
+      }
+
+      console.log(`Tested ${testURL}`)
+      console.log(`Platform: ${test.platform.join(',')}`)
+      console.log(`Passed: ${passed.toString()}`)
+      console.log(`Url ${test.url} \n`)
+      if (errorStr) {
+        console.error(errorStr)
+      }
+
+      if (passed) {
+        jobsSucceeded++
+      }
+      jobsDone++
+
+      // Exit
+      if (jobsDone === browsersFile.length - 1) {
+        jsUnitSaucelabs.stop()
+        process.exit(jobsDone === jobsSucceeded ? 0 : 1)
+      }
+    }
+  }
+}
+
+jsUnitSaucelabs.on('tunnelCreated', () => {
+  browsersFile.forEach((tmpBrowser) => {
+    const browsersPlatform = typeof tmpBrowser.platform === 'undefined' ? tmpBrowser.platformName : tmpBrowser.platform
+    const browsersArray = [browsersPlatform, tmpBrowser.browserName, tmpBrowser.version]
+
+    jsUnitSaucelabs.start([browsersArray], testURL, 'qunit', (error, success) => {
+      if (typeof success !== 'undefined') {
+        const taskIds = success['js tests']
+
+        if (!taskIds || !taskIds.length) {
+          throw new Error('Error starting tests through Sauce Labs API')
+        }
+
+        taskIds.forEach((id) => {
+          jsUnitSaucelabs.getStatus(id, (error, body) => {
+            waitingCallback(error, body, id)
+          })
+        })
+      } else {
+        console.error(error)
+      }
+    })
+  })
+})
+
+jsUnitSaucelabs.initTunnel()

build/ship.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+#
+# Usage
+# ---------------
+# 1. Clone second version of Bootstrap in sibling directory named `bs-docs`.
+# 2. Within `bs-docs` copy, switch to `gh-pages` branch.
+# 3. Pull latest, re-bundle, re-npm.
+# 4. Run script.
+
+red=$'\e[1;31m'
+green=$'\e[1;32m'
+blue=$'\e[1;34m'
+magenta=$'\e[1;35m'
+cyan=$'\e[1;36m'
+end=$'\e[0m'
+
+# Get current version from package.json
+current_version=$(node -p "require('./package.json').version")
+
+if [[ $# -lt 1 ]]; then
+  printf "\n${red}⚠️  Shipping aborted. You must specify a version.\n${end}"
+  exit 1
+fi
+
+# Pulling latest changes, just to be sure
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Pulling latest changes...${end}"
+printf "\n${magenta}=======================================================\n\n${end}"
+git pull origin v4-dev
+
+# Update version number
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Updating version number...${end}"
+printf "\n${magenta}=======================================================\n${end}"
+npm run release-version $current_version $1
+
+# Compile latest CSS and JS
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Compile latest CSS and JS...${end}"
+printf "\n${magenta}=======================================================\n${end}"
+npm run dist
+
+# Compress the dist files
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Compressing the dist files...${end}"
+printf "\n${magenta}=======================================================\n${end}"
+npm run release-zip
+
+# Compile the docs
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Compile hosted documentation...${end}"
+printf "\n${magenta}=======================================================\n${end}"
+npm run docs-github
+
+# Copy the contents of the built docs site over to `bs-docs` repo
+printf "\n${magenta}=======================================================${end}"
+printf "\n${magenta}Copy it over...${end}"
+printf "\n${magenta}=======================================================\n${end}"
+cp -rf _gh_pages/. ../bs-docs/
+printf "\nDone!\n"
+
+printf "\n${green}=======================================================${end}"
+printf "\n${green}Success, $1 is ready to review and publish.${end}"
+printf "\n${green}=======================================================\n\n${end}"

build/uglifyjs.config.json

@@ -1,8 +0,0 @@
-{
-	"output": {
-		"comments": "/^!/"
-	},
-  "compress": {
-    "typeofs": false
-  }
-}

build/workbox.config.json

@@ -0,0 +1,8 @@
+{
+  "globDirectory": "./",
+  "globPatterns": [
+    "_gh_pages/**/*.{html,css,js,json,png,jpg}"
+  ],
+  "swSrc": "./sw.js",
+  "swDest": "./_gh_pages/sw.js"
+}

build/workbox.js

@@ -0,0 +1,39 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const swBuild = require('workbox-build')
+const config = require('./workbox.config.json')
+const buildPrefix = '_gh_pages/'
+
+const workboxSWSrcPath = require.resolve('workbox-sw')
+const wbFileName = path.basename(workboxSWSrcPath)
+const workboxSWDestPath = buildPrefix + 'assets/js/vendor/' + wbFileName
+const workboxSWSrcMapPath = `${workboxSWSrcPath}.map`
+const workboxSWDestMapPath = `${workboxSWDestPath}.map`
+
+fs.createReadStream(workboxSWSrcPath).pipe(fs.createWriteStream(workboxSWDestPath))
+fs.createReadStream(workboxSWSrcMapPath).pipe(fs.createWriteStream(workboxSWDestMapPath))
+
+const updateUrl = (manifestEntries) => manifestEntries.map((entry) => {
+  if (entry.url.startsWith(buildPrefix)) {
+    const regex = new RegExp(buildPrefix, 'g')
+    entry.url = entry.url.replace(regex, '')
+  }
+  return entry
+})
+
+config.manifestTransforms = [updateUrl]
+
+swBuild.injectManifest(config).then(() => {
+  const wbSwRegex = /{fileName}/g
+  fs.readFile(config.swDest, 'utf8', (err, data) => {
+    if (err) {
+      throw err
+    }
+    const swFileContents = data.replace(wbSwRegex, wbFileName)
+    fs.writeFile(config.swDest, swFileContents, () => {
+      console.log('Pre-cache Manifest generated.')
+    })
+  })
+})

dist/css/bootstrap-grid.css

@@ -15,10 +15,10 @@ html {
 
 .container {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: 15px;
   padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @media (min-width: 576px) {
@@ -47,10 +47,10 @@ html {
 
 .container-fluid {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: 15px;
   padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .row {
@@ -173,6 +173,11 @@ html {
   max-width: 100%;
 }
 
+.order-first {
+  -ms-flex-order: -1;
+      order: -1;
+}
+
 .order-1 {
   -ms-flex-order: 1;
       order: 1;
@@ -351,6 +356,10 @@ html {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-sm-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-sm-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -511,6 +520,10 @@ html {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-md-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-md-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -671,6 +684,10 @@ html {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-lg-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-lg-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -831,6 +848,10 @@ html {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-xl-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-xl-1 {
     -ms-flex-order: 1;
         order: 1;

dist/css/bootstrap-reboot.css

@@ -161,6 +161,7 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
+  -ms-overflow-style: scrollbar;
 }
 
 figure {
@@ -210,6 +211,10 @@ label {
   margin-bottom: .5rem;
 }
 
+button {
+  border-radius: 0;
+}
+
 button:focus {
   outline: 1px dotted;
   outline: 5px auto -webkit-focus-ring-color;

dist/css/bootstrap-reboot.min.css

@@ -1,2 +1,2 @@
-*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
+*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
 /*# sourceMappingURL=bootstrap-reboot.min.css.map */

dist/css/bootstrap.css

@@ -4,6 +4,37 @@
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
+:root {
+  --blue: #007bff;
+  --indigo: #6610f2;
+  --purple: #6f42c1;
+  --pink: #e83e8c;
+  --red: #dc3545;
+  --orange: #fd7e14;
+  --yellow: #ffc107;
+  --green: #28a745;
+  --teal: #20c997;
+  --cyan: #17a2b8;
+  --white: #fff;
+  --gray: #868e96;
+  --gray-dark: #343a40;
+  --primary: #007bff;
+  --secondary: #868e96;
+  --success: #28a745;
+  --info: #17a2b8;
+  --warning: #ffc107;
+  --danger: #dc3545;
+  --light: #f8f9fa;
+  --dark: #343a40;
+  --breakpoint-xs: 0;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 @media print {
   *,
   *::before,
@@ -225,6 +256,7 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
+  -ms-overflow-style: scrollbar;
 }
 
 figure {
@@ -274,6 +306,10 @@ label {
   margin-bottom: .5rem;
 }
 
+button {
+  border-radius: 0;
+}
+
 button:focus {
   outline: 1px dotted;
   outline: 5px auto -webkit-focus-ring-color;
@@ -598,10 +634,10 @@ pre code {
 
 .container {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: 15px;
   padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @media (min-width: 576px) {
@@ -630,10 +666,10 @@ pre code {
 
 .container-fluid {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: 15px;
   padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .row {
@@ -756,6 +792,11 @@ pre code {
   max-width: 100%;
 }
 
+.order-first {
+  -ms-flex-order: -1;
+      order: -1;
+}
+
 .order-1 {
   -ms-flex-order: 1;
       order: 1;
@@ -934,6 +975,10 @@ pre code {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-sm-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-sm-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -1094,6 +1139,10 @@ pre code {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-md-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-md-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -1254,6 +1303,10 @@ pre code {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-lg-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-lg-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -1414,6 +1467,10 @@ pre code {
         flex: 0 0 100%;
     max-width: 100%;
   }
+  .order-xl-first {
+    -ms-flex-order: -1;
+        order: -1;
+  }
   .order-xl-1 {
     -ms-flex-order: 1;
         order: 1;
@@ -1791,14 +1848,14 @@ pre code {
 .form-control {
   display: block;
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   font-size: 1rem;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #495057;
   background-color: #fff;
   background-image: none;
   background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid #ced4da;
   border-radius: 0.25rem;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 }
@@ -1850,35 +1907,38 @@ select.form-control:focus::-ms-value {
 }
 
 .col-form-label {
-  padding-top: calc(0.5rem - 1px * 2);
+  padding-top: calc(0.375rem + 1px);
-  padding-bottom: calc(0.5rem - 1px * 2);
+  padding-bottom: calc(0.375rem + 1px);
   margin-bottom: 0;
+  line-height: 1.5;
 }
 
 .col-form-label-lg {
-  padding-top: calc(0.5rem - 1px * 2);
+  padding-top: calc(0.5rem + 1px);
-  padding-bottom: calc(0.5rem - 1px * 2);
+  padding-bottom: calc(0.5rem + 1px);
   font-size: 1.25rem;
+  line-height: 1.5;
 }
 
 .col-form-label-sm {
-  padding-top: calc(0.25rem - 1px * 2);
+  padding-top: calc(0.25rem + 1px);
-  padding-bottom: calc(0.25rem - 1px * 2);
+  padding-bottom: calc(0.25rem + 1px);
   font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 .col-form-legend {
-  padding-top: 0.5rem;
+  padding-top: 0.375rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.375rem;
   margin-bottom: 0;
   font-size: 1rem;
 }
 
 .form-control-plaintext {
-  padding-top: 0.5rem;
+  padding-top: 0.375rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.375rem;
   margin-bottom: 0;
-  line-height: 1.25;
+  line-height: 1.5;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0;
@@ -1977,14 +2037,14 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   vertical-align: middle;
 }
 
-.invalid-feedback {
+.valid-feedback {
   display: none;
   margin-top: .25rem;
   font-size: .875rem;
-  color: #dc3545;
+  color: #28a745;
 }
 
-.invalid-tooltip {
+.valid-tooltip {
   position: absolute;
   top: 100%;
   z-index: 5;
@@ -1995,7 +2055,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   font-size: .875rem;
   line-height: 1;
   color: #fff;
-  background-color: rgba(220, 53, 69, 0.8);
+  background-color: rgba(40, 167, 69, 0.8);
   border-radius: .2rem;
 }
 
@@ -2046,6 +2106,28 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }
 
+.invalid-feedback {
+  display: none;
+  margin-top: .25rem;
+  font-size: .875rem;
+  color: #dc3545;
+}
+
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  width: 250px;
+  padding: .5rem;
+  margin-top: .1rem;
+  font-size: .875rem;
+  line-height: 1;
+  color: #fff;
+  background-color: rgba(220, 53, 69, 0.8);
+  border-radius: .2rem;
+}
+
 .was-validated .form-control:invalid, .form-control.is-invalid, .was-validated
 .custom-select:invalid,
 .custom-select.is-invalid {
@@ -2193,9 +2275,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
       -ms-user-select: none;
           user-select: none;
   border: 1px solid transparent;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   font-size: 1rem;
-  line-height: 1.25;
+  line-height: 1.5;
   border-radius: 0.25rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2682,7 +2764,6 @@ fieldset[disabled] a.btn {
   font-weight: normal;
   color: #007bff;
   background-color: transparent;
-  border-radius: 0;
 }
 
 .btn-link:hover {
@@ -2776,6 +2857,7 @@ tbody.collapse.show {
   content: "";
   border-top: 0.3em solid;
   border-right: 0.3em solid transparent;
+  border-bottom: 0;
   border-left: 0.3em solid transparent;
 }
 
@@ -2789,8 +2871,20 @@ tbody.collapse.show {
 }
 
 .dropup .dropdown-toggle::after {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
   border-top: 0;
+  border-right: 0.3em solid transparent;
   border-bottom: 0.3em solid;
+  border-left: 0.3em solid transparent;
+}
+
+.dropup .dropdown-toggle:empty::after {
+  margin-left: 0;
 }
 
 .dropdown-menu {
@@ -2850,10 +2944,6 @@ tbody.collapse.show {
   background-color: transparent;
 }
 
-.show > a {
-  outline: 0;
-}
-
 .dropdown-menu.show {
   display: block;
 }
@@ -3001,12 +3091,12 @@ tbody.collapse.show {
   border-radius: 0;
 }
 
-.btn-group-vertical:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child) {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.btn-group-vertical:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -3039,8 +3129,8 @@ tbody.collapse.show {
   position: relative;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
+  -ms-flex-align: stretch;
-      align-items: center;
+      align-items: stretch;
   width: 100%;
 }
 
@@ -3057,6 +3147,15 @@ tbody.collapse.show {
   z-index: 3;
 }
 
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
 .input-group-addon:not(:first-child):not(:last-child),
 .input-group-btn:not(:first-child):not(:last-child),
 .input-group .form-control:not(:first-child):not(:last-child) {
@@ -3069,16 +3168,15 @@ tbody.collapse.show {
 }
 
 .input-group-addon {
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   margin-bottom: 0;
   font-size: 1rem;
   font-weight: normal;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #495057;
   text-align: center;
   background-color: #e9ecef;
-  background-clip: padding-box;
+  border: 1px solid #ced4da;
-  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3135,14 +3233,14 @@ tbody.collapse.show {
 
 .input-group-btn {
   position: relative;
+  -ms-flex-align: stretch;
+      align-items: stretch;
   font-size: 0;
   white-space: nowrap;
 }
 
 .input-group-btn > .btn {
   position: relative;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 .input-group-btn > .btn + .btn {
@@ -3153,6 +3251,10 @@ tbody.collapse.show {
   z-index: 3;
 }
 
+.input-group-btn:first-child > .btn + .btn {
+  margin-left: 0;
+}
+
 .input-group-btn:not(:last-child) > .btn,
 .input-group-btn:not(:last-child) > .btn-group {
   margin-right: -1px;
@@ -3161,6 +3263,11 @@ tbody.collapse.show {
 .input-group-btn:not(:first-child) > .btn,
 .input-group-btn:not(:first-child) > .btn-group {
   z-index: 2;
+  margin-left: 0;
+}
+
+.input-group-btn:not(:first-child) > .btn:first-child,
+.input-group-btn:not(:first-child) > .btn-group:first-child {
   margin-left: -1px;
 }
 
@@ -3267,13 +3374,12 @@ tbody.collapse.show {
   max-width: 100%;
   height: calc(2.25rem + 2px);
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #495057;
   vertical-align: middle;
   background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
-  background-clip: padding-box;
   background-size: 8px 10px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid #ced4da;
   border-radius: 0.25rem;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -3290,6 +3396,11 @@ tbody.collapse.show {
   background-color: #fff;
 }
 
+.custom-select[multiple] {
+  height: auto;
+  background-image: none;
+}
+
 .custom-select:disabled {
   color: #868e96;
   background-color: #e9ecef;
@@ -3333,9 +3444,8 @@ tbody.collapse.show {
   left: 0;
   z-index: 5;
   height: calc(2.25rem + 2px);
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
-  overflow: hidden;
+  line-height: 1.5;
-  line-height: 1.25;
   color: #495057;
   pointer-events: none;
   -webkit-user-select: none;
@@ -3343,8 +3453,7 @@ tbody.collapse.show {
       -ms-user-select: none;
           user-select: none;
   background-color: #fff;
-  background-clip: padding-box;
+  border: 1px solid #ced4da;
-  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3354,16 +3463,18 @@ tbody.collapse.show {
 
 .custom-file-control::before {
   position: absolute;
-  top: 0;
+  top: -1px;
-  right: 0;
+  right: -1px;
+  bottom: -1px;
   z-index: 6;
   display: block;
   height: calc(2.25rem + 2px);
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #495057;
   background-color: #e9ecef;
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid #ced4da;
+  border-radius: 0 0.25rem 0.25rem 0;
 }
 
 .custom-file-control:lang(en)::before {
@@ -3435,7 +3546,7 @@ tbody.collapse.show {
 }
 
 .nav-pills .nav-link.active,
-.show > .nav-pills .nav-link {
+.nav-pills .show > .nav-link {
   color: #fff;
   background-color: #007bff;
 }
@@ -3569,10 +3680,8 @@ tbody.collapse.show {
 
 @media (min-width: 576px) {
   .navbar-expand-sm {
-    -ms-flex-direction: row;
+    -ms-flex-flow: row nowrap;
-        flex-direction: row;
+        flex-flow: row nowrap;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
     -ms-flex-pack: start;
         justify-content: flex-start;
   }
@@ -3617,10 +3726,8 @@ tbody.collapse.show {
 
 @media (min-width: 768px) {
   .navbar-expand-md {
-    -ms-flex-direction: row;
+    -ms-flex-flow: row nowrap;
-        flex-direction: row;
+        flex-flow: row nowrap;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
     -ms-flex-pack: start;
         justify-content: flex-start;
   }
@@ -3665,10 +3772,8 @@ tbody.collapse.show {
 
 @media (min-width: 992px) {
   .navbar-expand-lg {
-    -ms-flex-direction: row;
+    -ms-flex-flow: row nowrap;
-        flex-direction: row;
+        flex-flow: row nowrap;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
     -ms-flex-pack: start;
         justify-content: flex-start;
   }
@@ -3713,10 +3818,8 @@ tbody.collapse.show {
 
 @media (min-width: 1200px) {
   .navbar-expand-xl {
-    -ms-flex-direction: row;
+    -ms-flex-flow: row nowrap;
-        flex-direction: row;
+        flex-flow: row nowrap;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
     -ms-flex-pack: start;
         justify-content: flex-start;
   }
@@ -3752,10 +3855,8 @@ tbody.collapse.show {
 }
 
 .navbar-expand {
-  -ms-flex-direction: row;
+  -ms-flex-flow: row nowrap;
-      flex-direction: row;
+      flex-flow: row nowrap;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
@@ -3842,6 +3943,14 @@ tbody.collapse.show {
   color: rgba(0, 0, 0, 0.5);
 }
 
+.navbar-light .navbar-text a {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover {
+  color: rgba(0, 0, 0, 0.9);
+}
+
 .navbar-dark .navbar-brand {
   color: white;
 }
@@ -3882,6 +3991,14 @@ tbody.collapse.show {
   color: rgba(255, 255, 255, 0.5);
 }
 
+.navbar-dark .navbar-text a {
+  color: white;
+}
+
+.navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover {
+  color: white;
+}
+
 .card {
   position: relative;
   display: -ms-flexbox;
@@ -3896,6 +4013,11 @@ tbody.collapse.show {
   border-radius: 0.25rem;
 }
 
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+
 .card-body {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
@@ -3933,10 +4055,6 @@ tbody.collapse.show {
   border-bottom-left-radius: 0.25rem;
 }
 
-.card .card-header + .list-group > .list-group-item:first-child {
-  border-top: 0;
-}
-
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
@@ -3948,6 +4066,10 @@ tbody.collapse.show {
   border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 }
 
+.card-header + .list-group .list-group-item:first-child {
+  border-top: 0;
+}
+
 .card-footer {
   padding: 0.75rem 1.25rem;
   background-color: rgba(0, 0, 0, 0.03);
@@ -4072,13 +4194,16 @@ tbody.collapse.show {
   .card-group .card:last-child .card-img-bottom {
     border-bottom-left-radius: 0;
   }
-  .card-group .card:not(:first-child):not(:last-child) {
+  .card-group .card:not(:first-child):not(:last-child):not(:only-child) {
     border-radius: 0;
   }
-  .card-group .card:not(:first-child):not(:last-child) .card-img-top,
+  .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
-  .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
+  .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom {
     border-radius: 0;
   }
+  .card-group .card:only-child {
+    border-radius: 0.25rem;
+  }
 }
 
 .card-columns .card {
@@ -4348,6 +4473,7 @@ tbody.collapse.show {
 }
 
 .alert {
+  position: relative;
   padding: 0.75rem 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid transparent;
@@ -4363,9 +4489,9 @@ tbody.collapse.show {
 }
 
 .alert-dismissible .close {
-  position: relative;
+  position: absolute;
-  top: -0.75rem;
+  top: 0;
-  right: -1.25rem;
+  right: 0;
   padding: 0.75rem 1.25rem;
   color: inherit;
 }
@@ -4607,10 +4733,15 @@ tbody.collapse.show {
 
 .list-group-flush .list-group-item {
   border-right: 0;
+  border-bottom: 0;
   border-left: 0;
   border-radius: 0;
 }
 
+.list-group-flush .list-group-item:first-child {
+  border-top: 0;
+}
+
 .list-group-flush:first-child .list-group-item:first-child {
   border-top: 0;
 }
@@ -4910,16 +5041,19 @@ button.close {
 .modal-header {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
+  -ms-flex-align: start;
-      align-items: center;
+      align-items: flex-start;
   -ms-flex-pack: justify;
       justify-content: space-between;
   padding: 15px;
   border-bottom: 1px solid #e9ecef;
+  border-top-left-radius: 0.3rem;
+  border-top-right-radius: 0.3rem;
 }
 
 .modal-header .close {
-  margin-left: auto;
+  padding: 15px;
+  margin: -15px -15px -15px auto;
 }
 
 .modal-title {
@@ -5679,6 +5813,10 @@ a.bg-dark:focus, a.bg-dark:hover {
   display: table !important;
 }
 
+.d-table-row {
+  display: table-row !important;
+}
+
 .d-table-cell {
   display: table-cell !important;
 }
@@ -5709,6 +5847,9 @@ a.bg-dark:focus, a.bg-dark:hover {
   .d-sm-table {
     display: table !important;
   }
+  .d-sm-table-row {
+    display: table-row !important;
+  }
   .d-sm-table-cell {
     display: table-cell !important;
   }
@@ -5738,6 +5879,9 @@ a.bg-dark:focus, a.bg-dark:hover {
   .d-md-table {
     display: table !important;
   }
+  .d-md-table-row {
+    display: table-row !important;
+  }
   .d-md-table-cell {
     display: table-cell !important;
   }
@@ -5767,6 +5911,9 @@ a.bg-dark:focus, a.bg-dark:hover {
   .d-lg-table {
     display: table !important;
   }
+  .d-lg-table-row {
+    display: table-row !important;
+  }
   .d-lg-table-cell {
     display: table-cell !important;
   }
@@ -5796,6 +5943,9 @@ a.bg-dark:focus, a.bg-dark:hover {
   .d-xl-table {
     display: table !important;
   }
+  .d-xl-table-row {
+    display: table-row !important;
+  }
   .d-xl-table-cell {
     display: table-cell !important;
   }

docs/4.0/about/history.md

@@ -2,8 +2,7 @@
 layout: docs
 title: History
 description: A brief overview of the history of Bootstrap.
-redirect_from:
+redirect_from: "/docs/4.0/about/"
- - /docs/4.0/about/
 group: about
 ---
 

docs/4.0/components/alerts.md

@@ -59,10 +59,10 @@ You can see this in action with a live demo:
 
 {% example html %}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
-  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 </div>
 {% endexample %}
 

docs/4.0/components/badge.md

@@ -31,7 +31,7 @@ Badges scale to match the size of the immediate parent element by using relative
 Badges can be used as part of links or buttons to provide a counter.
 
 {% example html %}
-<button class="btn btn-primary">
+<button type="button" class="btn btn-primary">
   Notifications <span class="badge badge-light">4</span>
 </button>
 {% endexample %}
@@ -41,7 +41,7 @@ Note that depending on how they are used, badges may be confusing for users of s
 Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
 
 {% example html %}
-<button class="btn btn-primary">
+<button type="button" class="btn btn-primary">
   Profile <span class="badge badge-light">9</span>
   <span class="sr-only">unread messages</span>
 </button>

docs/4.0/components/breadcrumb.md

@@ -4,6 +4,7 @@ title: Breadcrumb
 description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
 group: components
 ---
+
 ## Overview
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).

docs/4.0/components/button-group.md

@@ -25,6 +25,7 @@ In order for assistive technologies (such as screen readers) to convey that a se
 
 In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
 {% endcallout %}
+
 ## Button toolbar
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

docs/4.0/components/card.md

@@ -560,7 +560,7 @@ Just like with card groups, card footers in decks will automatically line up.
 
 ### Card columns
 
-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
+Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
 
 **Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
 
@@ -591,7 +591,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
-  <div class="card bg-primary p-3 text-center">
+  <div class="card bg-primary text-white text-center p-3">
     <blockquote class="blockquote mb-0">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
       <footer class="blockquote-footer">

docs/4.0/components/collapse.md

@@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>parent</td>
-      <td>selector</td>
+      <td>selector | jQuery object | DOM element </td>
       <td>false</td>
-      <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
+      <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
     </tr>
     <tr>
       <td>toggle</td>

docs/4.0/components/dropdowns.md

@@ -10,7 +10,7 @@ toc: true
 
 Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)
 
-Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
+Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
 
 If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 
@@ -588,7 +588,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>offset</td>
-      <td>number | string</td>
+      <td>number | string | function</td>
       <td>0</td>
       <td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
     </tr>

docs/4.0/components/forms.md

@@ -672,7 +672,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an
 
 ## Validation
 
-Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
+Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
 
 {% callout warning %}
 We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers.
@@ -739,18 +739,19 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
 <script>
 // Example starter JavaScript for disabling form submissions if there are invalid fields
 (function() {
-  "use strict";
+  'use strict';
-  window.addEventListener("load", function() {
+
-    var form = document.getElementById("needs-validation");
+  window.addEventListener('load', function() {
-    form.addEventListener("submit", function(event) {
+    var form = document.getElementById('needs-validation');
-      if (form.checkValidity() == false) {
+    form.addEventListener('submit', function(event) {
+      if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
-      form.classList.add("was-validated");
+      form.classList.add('was-validated');
     }, false);
   }, false);
-}());
+})();
 </script>
 {% endexample %}
 

docs/4.0/components/input-group.md

@@ -132,7 +132,7 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen
 </div>
 <br>
 <div class="row">
-  <div class="col-lg-offset-3 col-lg-6">
+  <div class="col-lg-6 offset-lg-3">
     <div class="input-group">
       <span class="input-group-btn">
         <button class="btn btn-secondary" type="button">Hate it</button>

docs/4.0/components/modal.md

@@ -32,7 +32,7 @@ Keep reading for demos and usage guidelines.
 Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
 
 <div class="bd-example bd-example-modal">
-  <div class="modal">
+  <div class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -54,7 +54,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 </div>
 
 {% highlight html %}
-<div class="modal">
+<div class="modal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -422,7 +422,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
 
 {% highlight html %}
 <!-- Large modal -->
-<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
 
 <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">

docs/4.0/components/navbar.md

@@ -323,7 +323,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
       </ul>
       <form class="form-inline">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
   </nav>
@@ -395,7 +395,7 @@ When the container is within your navbar, its horizontal padding is removed at b
 
 ## Placement
 
-Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
+Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).**
 
 {% example html %}
 <nav class="navbar navbar-light bg-light">

docs/4.0/components/navs.md

@@ -301,22 +301,18 @@ If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }
 
 Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
 
+Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
+
 <div class="bd-example bd-example-tabs">
   <ul class="nav nav-tabs" id="myTab" role="tablist">
     <li class="nav-item">
-      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
+      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
+      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
     </li>
-    <li class="nav-item dropdown">
+    <li class="nav-item">
-      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-        Dropdown
-      </a>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
-        <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
-      </div>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
@@ -326,38 +322,28 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I
     <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
       <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
     </div>
-    <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
+    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
       <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
     </div>
-    <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
-      <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
-    </div>
   </div>
 </div>
 
 {% highlight html %}
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
-  <li class="nav-item dropdown">
+  <li class="nav-item">
-    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-      Dropdown
-    </a>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
-      <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
-    </div>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
+  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
-  <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
 </div>
 {% endhighlight %}
 
@@ -365,17 +351,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
 
 <div class="bd-example bd-example-tabs">
   <nav class="nav nav-tabs" id="nav-tab" role="tablist">
-    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
+    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a>
+    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-    <div class="dropdown">
+    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
-      <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
-        Dropdown
-      </a>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
-        <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
-      </div>
-    </div>
   </nav>
   <div class="tab-content" id="nav-tabContent">
     <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
@@ -384,34 +362,22 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
       <p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
     </div>
-    <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">
+    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
       <p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
     </div>
-    <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">
-      <p>Proident incididunt esse qui ea nisi ullamco aliquip nostrud velit sint duis. Aute culpa aute cillum sit consectetur mollit minim non reprehenderit tempor. Occaecat amet consectetur aute esse ad ullamco ad commodo mollit reprehenderit esse in consequat. Mollit minim do consectetur pariatur irure non id ea dolore occaecat adipisicing consectetur est aute magna non.</p>
-    </div>
   </div>
 </div>
 
 {% highlight html %}
 <nav class="nav nav-tabs" id="myTab" role="tablist">
-  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a>
+  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a>
+  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-  <div class="dropdown">
+  <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
-    <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
-      Dropdown
-    </a>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">@fat</a>
-      <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">@mdo</a>
-    </div>
-  </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
   <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
   <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
-  <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">...</div>
+  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
-  <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">...</div>
 </div>
 {% endhighlight %}
 
@@ -420,17 +386,13 @@ The tabs plugin also works with pills.
 <div class="bd-example bd-example-tabs">
   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
     <li class="nav-item">
-      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
+      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
+      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
     </li>
-    <li class="nav-item dropdown">
+    <li class="nav-item">
-      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
-        <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
-      </div>
     </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">
@@ -440,36 +402,28 @@ The tabs plugin also works with pills.
     <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
       <p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
     </div>
-    <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">
+    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
       <p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
     </div>
-    <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">
-      <p>Tempor anim aliquip qui nisi sit minim ex in cupidatat ipsum adipisicing. Ad non magna anim id ullamco do dolor sit adipisicing nulla exercitation. Qui Lorem eiusmod sint in laboris pariatur est adipisicing non sunt occaecat in mollit culpa sit. Aliquip id duis do do quis mollit ut duis. Non dolor reprehenderit do esse nostrud deserunt non eiusmod minim anim sit voluptate ipsum. Nulla elit aliqua do sunt labore velit anim nisi dolor nostrud consectetur fugiat ex qui velit ex tempor. Do cillum qui anim aliquip id cillum duis ex laboris tempor incididunt sint dolor ullamco tempor. Fugiat laboris enim anim veniam aliquip cillum irure.</p>
-    </div>
   </div>
 </div>
 
 {% highlight html %}
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
   <li class="nav-item">
-    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
+    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
+    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
   </li>
-  <li class="nav-item dropdown">
+  <li class="nav-item">
-    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
-      <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
-    </div>
   </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
   <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
-  <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">...</div>
+  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
-  <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">...</div>
 </div>
 {% endhighlight %}
 
@@ -478,11 +432,11 @@ And with vertical pills.
 <div class="bd-example bd-example-tabs">
   <div class="row">
     <div class="col-3">
-      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
+      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
+        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
+        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
+        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
+        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
       </div>
     </div>
     <div class="col-9">
@@ -505,11 +459,11 @@ And with vertical pills.
 </div>
 
 {% highlight html %}
-<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
+<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
+  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
+  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
+  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
+  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
 </div>
 <div class="tab-content" id="v-pills-tabContent">
   <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
@@ -527,25 +481,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
-    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
+    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
+    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
   </li>
 </ul>
 
 <!-- Tab panes -->
 <div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel">...</div>
+  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel">...</div>
+  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel">...</div>
+  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel">...</div>
+  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
 </div>
 {% endhighlight %}
 
@@ -575,10 +529,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 {% highlight html %}
 <div class="tab-content">
-  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
+  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
+  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
 </div>
 {% endhighlight %}
 
@@ -594,24 +548,24 @@ Activates a tab element and content container. Tab should have either a `data-ta
 {% highlight html %}
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
-    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
+    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
+    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
   </li>
 </ul>
 
 <div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel">...</div>
+  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel">...</div>
+  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel">...</div>
+  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel">...</div>
+  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
 </div>
 
 <script>

docs/4.0/components/popovers.md

@@ -11,7 +11,7 @@ toc: true
 Things to know when using the popover plugin:
 
 
-- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
+- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
 - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
 - If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
@@ -151,7 +151,6 @@ $('.popover-dismiss').popover({
 {% endhighlight %}
 
 
-
 ## Usage
 
 Enable popovers via JavaScript:
@@ -180,7 +179,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     </tr>
     <tr>
       <td>container</td>
-      <td>string | false</td>
+      <td>string | element | false</td>
       <td>false</td>
       <td>
         <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
@@ -222,7 +221,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     </tr>
     <tr>
       <td>selector</td>
-      <td>string</td>
+      <td>string | false</td>
       <td>false</td>
       <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
     </tr>
@@ -306,7 +305,6 @@ Toggles an element's popover. **Returns to the caller before the popover has act
 
 Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
 
-
 {% highlight js %}$('#element').popover('dispose'){% endhighlight %}
 
 #### `.popover('enable')`

docs/4.0/components/scrollspy.md

@@ -316,13 +316,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>activate.bs.scrollspy</td>
-      <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+      <td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
     </tr>
   </tbody>
 </table>
 
 {% highlight js %}
-$('#myScrollspy').on('activate.bs.scrollspy', function () {
+$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
   // do something…
 })
 {% endhighlight %}

docs/4.0/components/tooltips.md

@@ -10,7 +10,7 @@ toc: true
 
 Things to know when using the tooltip plugin:
 
-- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
+- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
 - If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
 - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
 - Tooltips with zero-length titles are never displayed.
@@ -201,7 +201,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     </tr>
     <tr>
       <td>selector</td>
-      <td>string</td>
+      <td>string | false</td>
       <td>false</td>
       <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
     </tr>

docs/4.0/content/images.md

@@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
   <img src="..." class="rounded" alt="...">
 </div>
 {% endhighlight %}
+
+
+## Picture
+
+If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
+
+{% highlight html %}
+​<picture>
+ <source srcset="..." type="image/svg+xml">
+ <img src="..."  class="img-fluid img-thumbnail" alt="...">
+</picture>
+{% endhighlight %}

docs/4.0/content/reboot.md

@@ -330,7 +330,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
 
 ## HTML5 `[hidden]` attribute
 
-HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
 
 {% highlight html %}
 <input type="text" hidden>

docs/4.0/content/typography.md

@@ -16,7 +16,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont
 - Set the global link color via `$link-color` and apply link underlines only on `:hover`.
 - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
 
-These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
 
 ## Headings
 
@@ -297,24 +297,24 @@ Here's an example of it in practice. Choose whatever `font-size`s and media quer
 
 {% highlight scss %}
 html {
-  font-size: 14px;
+  font-size: 1rem;
 }
 
 @include media-breakpoint-up(sm) {
   html {
-    font-size: 16px;
+    font-size: 1.2rem;
   }
 }
 
 @include media-breakpoint-up(md) {
   html {
-    font-size: 20px;
+    font-size: 1.4rem;
   }
 }
 
 @include media-breakpoint-up(lg) {
   html {
-    font-size: 28px;
+    font-size: 1.6rem;
   }
 }
 {% endhighlight %}

docs/4.0/examples/album/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -18,6 +18,7 @@
 
   <body>
 
+    <header>
       <div class="collapse bg-dark" id="navbarHeader">
         <div class="container">
           <div class="row">
@@ -44,6 +45,9 @@
           </button>
         </div>
       </div>
+    </header>
+
+    <main role="main">
 
       <section class="jumbotron text-center">
         <div class="container">
@@ -61,41 +65,41 @@
 
           <div class="row">
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
           </div>
@@ -103,6 +107,8 @@
         </div>
       </div>
 
+    </main>
+
     <footer class="text-muted">
       <div class="container">
         <p class="float-right">
@@ -119,12 +125,14 @@
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
     <script src="../../../../assets/js/vendor/popper.min.js"></script>
+    <script src="../../../../dist/js/bootstrap.min.js"></script>
     <script src="../../../../assets/js/vendor/holder.min.js"></script>
     <script>
-      $(function () {
+      Holder.addTheme('thumb', {
-        Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
+        bg: '#55595c',
+        fg: '#eceeef',
+        text: 'Thumbnail'
       });
     </script>
-    <script src="../../../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>

docs/4.0/examples/blog/blog.css

@@ -20,7 +20,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: normal;
+  font-weight: 400;
   color: #333;
 }
 
@@ -41,7 +41,6 @@ h6, .h6 {
 .blog-masthead {
   margin-bottom: 3rem;
   background-color: #428bca;
-  -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
   box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
 }
 
@@ -89,7 +88,7 @@ h6, .h6 {
 .blog-title {
   margin-bottom: 0;
   font-size: 2rem;
-  font-weight: normal;
+  font-weight: 400;
 }
 .blog-description {
   font-size: 1.1rem;
@@ -110,7 +109,6 @@ h6, .h6 {
 /* Sidebar modules for boxing content */
 .sidebar-module {
   padding: 1rem;
-  /*margin: 0 -1rem 1rem;*/
 }
 .sidebar-module-inset {
   padding: 1rem;

docs/4.0/examples/blog/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -18,6 +18,7 @@
 
   <body>
 
+    <header>
       <div class="blog-masthead">
         <div class="container">
           <nav class="nav">
@@ -36,8 +37,9 @@
           <p class="lead blog-description">An example blog template built with Bootstrap.</p>
         </div>
       </div>
+    </header>
 
-    <div class="container">
+    <main role="main" class="container">
 
       <div class="row">
 
@@ -109,7 +111,7 @@
 
         </div><!-- /.blog-main -->
 
-        <div class="col-sm-3 ml-sm-auto blog-sidebar">
+        <aside class="col-sm-3 ml-sm-auto blog-sidebar">
           <div class="sidebar-module sidebar-module-inset">
             <h4>About</h4>
             <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
@@ -139,14 +141,14 @@
               <li><a href="#">Facebook</a></li>
             </ol>
           </div>
-        </div><!-- /.blog-sidebar -->
+        </aside><!-- /.blog-sidebar -->
 
       </div><!-- /.row -->
 
-    </div><!-- /.container -->
+    </main><!-- /.container -->
 
     <footer class="blog-footer">
-      <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+      <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
       <p>
         <a href="#">Back to top</a>
       </p>

docs/4.0/examples/carousel/carousel.css

@@ -18,8 +18,8 @@ body {
 }
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
-  z-index: 10;
   bottom: 3rem;
+  z-index: 10;
 }
 
 /* Declare heights because of positioning of img element */
@@ -45,7 +45,7 @@ body {
   text-align: center;
 }
 .marketing h2 {
-  font-weight: normal;
+  font-weight: 400;
 }
 .marketing .col-lg-4 p {
   margin-right: .75rem;

docs/4.0/examples/carousel/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -17,6 +17,7 @@
   </head>
   <body>
 
+    <header>
       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
         <a class="navbar-brand" href="#">Carousel</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@@ -40,6 +41,9 @@
           </form>
         </div>
       </nav>
+    </header>
+
+    <main role="main">
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel">
         <ol class="carousel-indicators">
@@ -161,14 +165,16 @@
 
         <!-- /END THE FEATURETTES -->
 
+      </div><!-- /.container -->
+
 
       <!-- FOOTER -->
-      <footer>
+      <footer class="container">
         <p class="float-right"><a href="#">Back to top</a></p>
         <p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
       </footer>
 
-    </div><!-- /.container -->
+    </main>
 
 
     <!-- Bootstrap core JavaScript

docs/4.0/examples/cover/cover.css

@@ -41,7 +41,6 @@ body {
   width: 100%;
   height: 100%; /* For at least Firefox */
   min-height: 100%;
-  -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
   box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
 }
 .site-wrapper-inner {
@@ -73,7 +72,7 @@ body {
 
 .nav-masthead .nav-link {
   padding: .25rem 0;
-  font-weight: bold;
+  font-weight: 700;
   color: rgba(255,255,255,.5);
   background-color: transparent;
   border-bottom: .25rem solid transparent;
@@ -112,7 +111,7 @@ body {
 }
 .cover .btn-lg {
   padding: .75rem 1.25rem;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 
@@ -139,10 +138,12 @@ body {
     position: fixed;
     bottom: 0;
   }
+
   /* Start the vertical centering */
   .site-wrapper-inner {
     vertical-align: middle;
   }
+
   /* Handle the widths */
   .masthead,
   .mastfoot,

docs/4.0/examples/cover/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -24,7 +24,7 @@
 
         <div class="cover-container">
 
-          <div class="masthead clearfix">
+          <header class="masthead clearfix">
             <div class="inner">
               <h3 class="masthead-brand">Cover</h3>
               <nav class="nav nav-masthead">
@@ -33,21 +33,21 @@
                 <a class="nav-link" href="#">Contact</a>
               </nav>
             </div>
-          </div>
+          </header>
 
-          <div class="inner cover">
+          <main role="main" class="inner cover">
             <h1 class="cover-heading">Cover your page.</h1>
             <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
             <p class="lead">
               <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
             </p>
-          </div>
+          </main>
 
-          <div class="mastfoot">
+          <footer class="mastfoot">
             <div class="inner">
-              <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+              <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-            </div>
             </div>
+          </footer>
 
         </div>
 

docs/4.0/examples/dashboard/dashboard.css

@@ -12,8 +12,8 @@ body {
  */
 
 h1 {
-  margin-bottom: 20px;
   padding-bottom: 9px;
+  margin-bottom: 20px;
   border-bottom: 1px solid #eee;
 }
 
@@ -35,8 +35,8 @@ h1 {
 
 /* Sidebar navigation */
 .sidebar {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .sidebar .nav {
@@ -59,7 +59,7 @@ h1 {
  * Dashboard
  */
 
- /* Placeholders */
+/* Placeholders */
 .placeholders {
   padding-bottom: 3rem;
 }

docs/4.0/examples/dashboard/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -17,6 +17,7 @@
   </head>
 
   <body>
+    <header>
       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
         <a class="navbar-brand" href="#">Dashboard</a>
         <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@@ -44,6 +45,7 @@
           </form>
         </div>
       </nav>
+    </header>
 
     <div class="container-fluid">
       <div class="row">
@@ -91,7 +93,7 @@
           </ul>
         </nav>
 
-        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
+        <main  role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
           <h1>Dashboard</h1>
 
           <section class="row text-center placeholders">