The big leap 🚀💨

2024-11-25 11:04:09 +03:00 · 2017-08-11 16:59:31 +02:00 · 2017-08-11 16:59:31 +02:00 · 750ba9b897
commit 750ba9b897
parent 38d19b2818
410 changed files with 17806 additions and 38277 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,3 +1,10 @@
 {
-  "presets": [ "es2015" ]
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    "external-helpers",
+    [
+      "module-alias",
+      [{ "src": "./node_modules/bootstrap", "expose": "bootstrap" }]
+    ]
+  ]
 }
--- a/.jekyll-metadata
+++ b/.jekyll-metadata
--- a/.ruby-gemset
+++ b/.ruby-gemset
@ -1 +0,0 @@
-bootstrap-material-design
--- a/.ruby-version
+++ b/.ruby-version
@ -1 +0,0 @@
-2.2.2
--- a/10
+++ b/10
@ -1,9 +1,9 @@
 source 'https://rubygems.org'

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

 PLATFORMS
  ruby
+  x64-mingw32

 DEPENDENCIES
-  jekyll (~> 3.1.1)
-  jekyll-redirect-from (~> 0.9.1)
-  jekyll-seo-tag (~> 0.1.3)
-  jekyll-sitemap (~> 0.10.0)
-  scss_lint (~> 0.43)
+  jekyll (~> 3.5.1)
+  jekyll-redirect-from (~> 0.12.1)
+  jekyll-sitemap (~> 1.1.1)
+  jekyll-toc (~> 0.3.0.pre1)
+  scss_lint (~> 0.54.0)

 BUNDLED WITH
-   1.12.5
+   1.15.3
--- a/README-FINAL.md
+++ b/README-FINAL.md
@ -1,55 +0,0 @@
-<h1 align=center>Material Design for Bootstrap</h1>
-
-Material Design for Bootstrap is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html)
-in your Bootstrap 4 based application.
-Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at
-the end of your document (just before the `</body>` tag), and everything will be converted to Material Design.
-
-
-## Documentation
-
- [Getting Started](http://fezvrasta.github.io/bootstrap-material-design/getting-started/introduction/)
- [Building](http://fezvrasta.github.io/bootstrap-material-design/getting-started/building/)
- [Material Design components](http://fezvrasta.github.io/bootstrap-material-design/material-design/list-groups/)
- [Bootstrap default rendering reference documentation](http://fezvrasta.github.io/bootstrap-material-design/components/buttons/)
- [Migration](http://fezvrasta.github.io/bootstrap-material-design/migration/)
-
-
-## Support
-
-The things to do are a lot and the time is little, if you are a passionate developer
-with experience with Bootstrap and Material Design for Bootstrap and you have some spare
-time, please consider becoming a contributor of this project!  
-If you are interested contact @FezVrasta or just adopt one of our [issues](https://github.com/FezVrasta/bootstrap-material-design/issues).
-
-If you like this project you may support it by [donating](http://fezvrasta.github.io/bootstrap-material-design), starring this repository or reporting issues.  
-All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/eJMMVB) test case where possible.
-
-
-## Contributing
-
-### Development
-If you want to get involved, please do so by submitting pull requests.  
-Before undertaking any major PR effort, please check the [existing issues](https://github.com/FezVrasta/bootstrap-material-design/issues).  
-If there isn't one, please file a new issue so we can discuss and assign the work so effort is not duplicated.  
-Thank you!
-
-### Standard guidelines
-Please read through our [contributing guidelines](CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
-
-Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://codeguide.co/), maintained by [Mark Otto](https://github.com/mdo), one of Bootstrap's founders.
-
-Editor preferences are available in the [editor config](https://github.com/FezVrasta/bootstrap-material-design/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
-
-
-## Versioning
-
-For transparency into our release cycle and in striving to maintain backward compatibility, this project 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/fezvrasta/bootstrap-material-design/releases) for changelogs
-of each release version.
-
-
-## License
-[MIT License](LICENSE.md)
--- a/README.md
+++ b/README.md
@ -1,40 +1,38 @@
-# bootstrap-material-design
-
-## **WARNING:** These docs relate to the next major release and integration with bootstrap V4.
-
-[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
-
+<h1 align=center>Material Design for Bootstrap</h1>

 Material Design for Bootstrap is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html)
-in your Bootstrap 4 based application.  Since this is a fully customizable version of Bootstrap,
-just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at 
+in your Bootstrap 4 based application.
+Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at
 the end of your document (just before the `</body>` tag), and everything will be converted to Material Design.

+
 ## Documentation

-NOTE: this is a temporary site location that will be published in at http://fezvrasta.github.io/bootstrap-material-design in the future. 
+- [Getting Started](http://fezvrasta.github.io/bootstrap-material-design/getting-started/introduction/)
+- [Building](http://fezvrasta.github.io/bootstrap-material-design/getting-started/building/)
+- [Material Design components](http://fezvrasta.github.io/bootstrap-material-design/material-design/list-groups/)
+- [Bootstrap default rendering reference documentation](http://fezvrasta.github.io/bootstrap-material-design/components/buttons/)
+- [Migration](http://fezvrasta.github.io/bootstrap-material-design/migration/)

- [Getting Started](http://rosskevin.github.io/bootstrap-material-design/getting-started/introduction/)
- [Building](http://rosskevin.github.io/bootstrap-material-design/getting-started/building/)
- [Material Design components](http://rosskevin.github.io/bootstrap-material-design/material-design/list-groups/)
- [Bootstrap default rendering reference documentation](http://rosskevin.github.io/bootstrap-material-design/components/buttons/)
- [Migration](http://rosskevin.github.io/bootstrap-material-design/migration/)

 ## Support

-If you like this project you may support it by donating via Gittip, starring this repository or reporting issues.  
-All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/eJMMVB) test case where possible.
+The things to do are a lot and the time is little, if you are a passionate developer
+with experience with Bootstrap and Material Design for Bootstrap and you have some spare
+time, please consider becoming a contributor of this project!  
+If you are interested contact @FezVrasta or just adopt one of our [issues](https://github.com/FezVrasta/bootstrap-material-design/issues).

-[![gittip](docs/assets/img/gittip-button.jpg)](https://www.gratipay.com/FezVrasta/)
-[![issues](docs/assets/img/issues-button.jpg)](https://github.com/FezVrasta/bootstrap-material-design/issues)
+If you like this project you may support it by [donating](http://fezvrasta.github.io/bootstrap-material-design), starring this repository or reporting issues.  
+All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/eJMMVB) test case where possible.


 ## Contributing

-### During V4 major development
-If you want to get involved, please do so by submitting pull requests.  Before undertaking any major PR effort, please check the [milestone](https://github.com/FezVrasta/bootstrap-material-design/milestones/V4) for an existing issue.  If there isn't one, please file a new issue and `cc: @rosskevin` so we can discuss and assign the work so effort is not duplicated.  Thank you!
-
-Please prefix any issue or pull request title with `V4`.
+### Development
+If you want to get involved, please do so by submitting pull requests.  
+Before undertaking any major PR effort, please check the [existing issues](https://github.com/FezVrasta/bootstrap-material-design/issues).  
+If there isn't one, please file a new issue so we can discuss and assign the work so effort is not duplicated.  
+Thank you!

 ### Standard guidelines
 Please read through our [contributing guidelines](CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
@ -43,6 +41,7 @@ Moreover, if your pull request contains JavaScript patches or features, you must

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

+
 ## Versioning

 For transparency into our release cycle and in striving to maintain backward compatibility, this project is maintained under
--- a/_config.yml
+++ b/_config.yml
@ -1,9 +1,3 @@
-include:
-  - .nojekyll
-
-sass:
-    sass_dir: sass
-
 # Dependencies
 markdown:         kramdown
 highlighter:      rouge
@ -15,57 +9,50 @@ kramdown:
 permalink:        pretty

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

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

-# Site vars
-#url:    "http://fezvrasta.github.io"
-repo:   https://github.com/FezVrasta/bootstrap-material-design
-#baseurl: "/bootstrap-material-design"
-url: "http://rosskevin.github.io"
+# Social
+title: Bootstrap Material Design
+description: The most popular HTML, CSS, and JS Material Design library in the world.
+twitter: getbootstrap
+authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
+social_logo_path: /assets/brand/bootstrap-social-logo.png
+social_image_path: /assets/brand/bootstrap-social.png

-# other variables generated in
+# Custom vars
+current_version:  4.0.0-beta
+docs_version:     4.0
+repo:             https://github.com/twbs/bootstrap
+slack:            https://bootstrap-slack.herokuapp.com

-mkp:               http://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385
-mdp:               http://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385
-#blog:             http://blog.getbootstrap.com
-#expo:             http://expo.getbootstrap.com
-#themes:           http://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
+
+blog:             https://blog.getbootstrap.com
+expo:             https://expo.getbootstrap.com
+themes:           https://themes.getbootstrap.com
+jobs:             https://jobs.getbootstrap.com

-#
 cdn:
-#  # See https://www.srihash.org for info on how to generate the hashes
-  css:            https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/dist/dist/bootstrap-material-design.min.css
-#  css_hash:       "sha384-XXXXXXXX"
-  js:             https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/dist/dist/bootstrap-material-design.iife.min.js
-#  js_hash:        "sha384-XXXXXXXX"
-
-  # fonts
-  font_roboto:    https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
-  font_icons:     https://fonts.googleapis.com/icon?family=Material+Icons
-
-  # VERSION is substituted in variables.rb and these are made available as site.data.cdn.*
-  jquery:         https://code.jquery.com/jquery-VERSION.min.js
-  bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.min.js
-  tether:         https://cdn.rawgit.com/HubSpot/tether/vVERSION/dist/js/tether.min.js
+  # 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
+  css_hash:       "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
+  js:             https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
+  js_hash:        "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+  jquery:         https://code.jquery.com/jquery-3.2.1.slim.min.js
+  jquery_hash:    "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  popper:         https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
+  popper_hash:    "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  snackbar:       https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js
-
-  'ie10-viewport-bug-workaround': https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js
-
-
-#twitter:
-#  username: getbootstrap
-#
-#social:
-#  type: organization
-#  name: twbs
-#  links: ["https://www.facebook.com/getbootstrap/", "https://twitter.com/getbootstrap"]
--- a/_data/breakpoints.yml
+++ b/_data/breakpoints.yml
@ -0,0 +1,29 @@
+- breakpoint: xs
+  abbr: ""
+  name: Extra small
+  min-width: 0px
+  container: ""
+
+- breakpoint: sm
+  abbr: -sm
+  name: Small
+  min-width: 576px
+  container: 540px
+
+- breakpoint: md
+  abbr: -md
+  name: Medium
+  min-width: 768px
+  container: 720px
+
+- breakpoint: lg
+  abbr: -lg
+  name: Large
+  min-width: 992px
+  container: 960px
+
+- breakpoint: xl
+  abbr: -xl
+  name: Extra large
+  min-width: 1200px
+  container: 1140px
--- a/_data/browser-bugs.yml
+++ b/_data/browser-bugs.yml
@ -0,0 +1,431 @@
+-
+  browser: >
+    Edge
+  summary: >
+    Visual artifacts in scrollable modal dialogs
+  upstream_bug: >
+    Edge#9011176
+  origin: >
+    Bootstrap#20755
+
+-
+  browser: >
+    Edge
+  summary: >
+    Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
+  upstream_bug: >
+    Edge#6793560
+  origin: >
+    Bootstrap#18692
+
+-
+  browser: >
+    Edge
+  summary: >
+    Hovered element still remains in `:hover` state after scrolling away.
+  upstream_bug: >
+    Edge#5381673
+  origin: >
+    Bootstrap#14211
+
+-
+  browser: >
+    Edge
+  summary: >
+    CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
+  upstream_bug: >
+    Edge#3342037
+  origin: >
+    Bootstrap#16671
+
+-
+  browser: >
+    Edge
+  summary: >
+    `background` of `<tr>` is only applied to first child cell instead of all cells in the row
+  upstream_bug: >
+    Edge#5865620
+  origin: >
+    Bootstrap#18504
+
+-
+  browser: >
+    Edge
+  summary: >
+    `@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
+  upstream_bug: >
+    Edge#7165383
+  origin: >
+    Bootstrap#18543
+
+-
+  browser: >
+    Edge
+  summary: >
+    Background color from lower layer bleeds through transparent border in some cases
+  upstream_bug: >
+    Edge#6274505
+  origin: >
+    Bootstrap#18228
+
+-
+  browser: >
+    Edge
+  summary: >
+    Hovering over descendant SVG element fires `mouseleave` event at ancestor
+  upstream_bug: >
+    Edge#7787318
+  origin: >
+    Bootstrap#19670
+
+-
+  browser: >
+    Edge
+  summary: >
+    Active `position: fixed;` `<button>` flickers when scrolling
+  upstream_bug: >
+    Edge#8770398
+  origin: >
+    Bootstrap#20507
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `.table-bordered` with an empty `<tbody>` is missing borders.
+  upstream_bug: >
+    Mozilla#1023761
+  origin: >
+    Bootstrap#13453
+
+-
+  browser: >
+    Firefox
+  summary: >
+    If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
+  upstream_bug: >
+    Mozilla#654072
+  origin: >
+    Bootstrap#793
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `focus` events should not be fired at the `document` object
+  upstream_bug: >
+    Mozilla#1228802
+  origin: >
+    Bootstrap#18365
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Wide floated table doesn't wrap onto new line
+  upstream_bug: >
+    Mozilla#1277782
+  origin: >
+    Bootstrap#19839
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
+  upstream_bug: >
+    Mozilla#577785
+  origin: >
+    Bootstrap#19670
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Layout with floated columns breaks when printing
+  upstream_bug: >
+    Mozilla#1315994
+  origin: >
+    Bootstrap#21092
+
+-
+  browser: >
+    Firefox (Windows)
+  summary: >
+    Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
+  upstream_bug: >
+    Mozilla#545685
+  origin: >
+    Bootstrap#15990
+
+-
+  browser: >
+    Firefox (OS X & Linux)
+  summary: >
+    Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
+  upstream_bug: >
+    Mozilla#1259972
+  origin: >
+    Bootstrap#19626
+
+-
+  browser: >
+    Chrome (Android)
+  summary: >
+    Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
+  upstream_bug: >
+    Chromium#595210
+  origin: >
+    Bootstrap#17338
+
+-
+  browser: >
+    Chrome (OS X)
+  summary: >
+    Clicking above `<input type="number">` increment button flashes the decrement button.
+  upstream_bug: >
+    Chromium#419108
+  origin: >
+    Offshoot of Bootstrap#8350 & Chromium#337668
+
+-
+  browser: >
+    Chrome
+  summary: >
+    CSS infinite linear animation with alpha transparency leaks memory.
+  upstream_bug: >
+    Chromium#429375
+  origin: >
+    Bootstrap#14409
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `table-cell` borders not overlapping despite `margin-right: -1px`
+  upstream_bug: >
+    Chromium#568691
+  origin: >
+    Bootstrap#17438, Bootstrap#14237
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
+  upstream_bug: >
+    Chromium#597642
+  origin: >
+    Bootstrap#19810
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    Chromium#370155
+  origin: >
+    Bootstrap#12832
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `position: absolute` element that's wider than its column is incorrectly clipped to column boundary
+  upstream_bug: >
+    Chromium#269061
+  origin: >
+    Bootstrap#20161
+
+-
+  browser: >
+    Chrome (Windows & Linux)
+  summary: >
+    Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
+  upstream_bug: >
+    Chromium#449180
+  origin: >
+    Bootstrap#15298
+
+-
+  browser: >
+    Safari
+  summary: >
+    `rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
+  upstream_bug: >
+    WebKit#156684
+  origin: >
+    Bootstrap#17403
+
+-
+  browser: >
+    Safari
+  summary: >
+    Link to container with id and tabindex results in container being ignored by VoiceOver (affects skip links)
+  upstream_bug: >
+    WebKit#163658
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    `px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
+  upstream_bug: >
+    WebKit#156687
+  origin: >
+    Bootstrap#17403
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    Weird button behavior with some `<input type="number">` elements.
+  upstream_bug: >
+    WebKit#137269, Safari#18834768
+  origin: >
+    Bootstrap#8350,
+    Normalize#283,
+    Chromium#337668
+
+-
+  browser: >
+    Safari (OS X)
+  summary: >
+    Small font size when printing webpage with fixed-width `.container`.
+  upstream_bug: >
+    WebKit#138192, Safari#19435018
+  origin: >
+    Bootstrap#14868
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `transform: translate3d(0,0,0);` rendering bug.
+  upstream_bug: >
+    WebKit#138162, Safari#18804973
+  origin: >
+    Bootstrap#14603
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Text input's cursor doesn't move while scrolling the page.
+  upstream_bug: >
+    WebKit#138201, Safari#18819624
+  origin: >
+    Bootstrap#14708
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Can't move cursor to start of text after entering long string of text into `<input type="text">`
+  upstream_bug: >
+    WebKit#148061, Safari#22299624
+  origin: >
+    Bootstrap#16988
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `display: block` causes text of temporal `<input>`s to become vertically misaligned
+  upstream_bug: >
+    WebKit#139848, Safari#19434878
+  origin: >
+    Bootstrap#11266, Bootstrap#13098
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping on `<body>` doesn't fire `click` events
+  upstream_bug: >
+    WebKit#151933
+  origin: >
+    Bootstrap#16028
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
+  upstream_bug: >
+    WebKit#153056
+  origin: >
+    Bootstrap#18859
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
+  upstream_bug: >
+    WebKit#153224, Safari#24235301
+  origin: >
+    Bootstrap#17497
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `<body>` with `overflow:hidden` CSS is scrollable on iOS
+  upstream_bug: >
+    WebKit#153852
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
+  upstream_bug: >
+    WebKit#153856
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
+  upstream_bug: >
+    WebKit#158342
+  origin: >
+    Bootstrap#17695
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    WebKit#158517
+  origin: >
+    Bootstrap#12832
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Element which is `position:fixed` disappears after opening a `<select>` menu
+  upstream_bug: >
+    WebKit#162362
+  origin: >
+    Bootstrap#20759
+
+-
+  browser: >
+    Safari (iPad Pro)
+  summary: >
+    Rendering of descendants of `position: fixed` element gets clipped on iPad Pro in Landscape orientation
+  upstream_bug: >
+    WebKit#152637, Safari#24030853
+  origin: >
+    Bootstrap#18738
--- a/_data/browser-features.yml
+++ b/_data/browser-features.yml
@ -0,0 +1,149 @@
+-
+  browser: >
+    Edge
+  summary: >
+    Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus
+  upstream_bug: >
+    A11yUserVoice#16717318
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    UserVoice#12299532
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
+  upstream_bug: >
+    UserVoice#6263621
+  origin: >
+    Bootstrap#17021
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    UserVoice#6508895
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Edge
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    UserVoice#15939898
+  origin: >
+    Bootstrap#20618
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    UserVoice#15944476
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Mozilla#854148
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    Mozilla#840640
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Firefox
+  summary: >
+    When virtual focus is on a button or link, fire actual focus on the element, too
+  upstream_bug: >
+    Mozilla#1000082
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    Chromium#642487
+  origin: >
+    Chromium#437860
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Chromium#304163
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    Chromium#576815
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Safari
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    WebKit#161535
+  origin: >
+    Bootstrap#20618
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    WebKit#64861
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    WebKit#84635
+  origin: >
+    Bootstrap#20175
--- a/_data/colors.yml
+++ b/_data/colors.yml
@ -0,0 +1,26 @@
+- name: blue
+  hex: "#007aff"
+- name: indigo
+  hex: "#2b29bb"
+- name: purple
+  hex: "#882ae0"
+- name: pink
+  hex: "#f14095"
+- name: red
+  hex: "#ea0242"
+- name: orange
+  hex: "#ff8d00"
+- name: yellow
+  hex: "#ffec00"
+- name: green
+  hex: "#34da36"
+- name: teal
+  hex: "#1dde8e"
+- name: cyan
+  hex: "#08eff3"
+- name: white
+  hex: "#fff"
+- name: gray
+  hex: "#464a4c"
+- name: gray-dark
+  hex: "#292b2c"
--- a/_data/core-team.yml
+++ b/_data/core-team.yml
@ -0,0 +1,39 @@
+- name: Mark Otto
+  user: mdo
+  gravatar: bc4ab438f7a4ce1c406aadc688427f2c
+
+- name: Jacob Thornton
+  user: fat
+  gravatar: a98244cbdacaf1c0b55499466002f7a8
+
+- name: Chris Rebert
+  user: cvrebert
+  gravatar: edec428c425453955f770095a7d26c50
+
+- name: Julian Thilo
+  user: juthilo
+  gravatar: 0f7dd3ce58a416be5685ea6194f82b11
+
+- name: XhmikosR
+  user: xhmikosr
+  gravatar: e37759b1ea0125d4e97b1e00b5eed26f
+
+- name: Heinrich Fenkart
+  user: hnrch02
+  gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f
+
+- name: Patrick H. Lauke
+  user: patrickhlauke
+  gravatar: 357f279672db832fc41a5a2f36559fcb
+
+- name: Thomas McDonald
+  user: thomas-mcdonald
+  gravatar: 24cd55ab1a62ffb113ab8c02f64c9301
+
+- name: Gleb Mazovetskiy
+  user: glebm
+  gravatar: 729f685b8e8d7e9feed18c177c82e59b
+
+- name: Johann-S
+  user: johann-s
+  gravatar: d90d49733a4fe1aa461e45cb4a4fd9e3
--- a/_data/grays.yml
+++ b/_data/grays.yml
@ -0,0 +1,18 @@
+- name: 100
+  hex: "#f8f9fa"
+- name: 200
+  hex: "#ebedef"
+- name: 300
+  hex: "#ced3d8"
+- name: 400
+  hex: "#abb3bd"
+- name: 500
+  hex: "#7c8a99"
+- name: 600
+  hex: "#55626f"
+- name: 700
+  hex: "#4a5560"
+- name: 800
+  hex: "#384048"
+- name: 900
+  hex: "#131619"
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@ -1,12 +1,55 @@
 - title: Getting started
  pages:
    - title: Introduction
-    - title: Building
    - title: Download
+    - title: Contents
    - title: Browsers & devices
-    - title: Customization
-    - title: Best practices
-    - title: Release process
+    - title: JavaScript
+    - title: Options
+    - title: Build tools
+    # - title: Best practices # TODO: Write this content
+    - title: Webpack
+    - title: Accessibility
+
+- title: Layout
+  pages:
+    - title: Overview
+    - title: Grid
+    - title: Media object
+    - title: Utilities for layout
+
+- title: Content
+  pages:
+    - title: Reboot
+    - title: Typography
+    - title: Code
+    - title: Images
+    - title: Tables
+    - title: Figures
+
+- title: Components
+  pages:
+    - title: Alerts
+    - title: Badge
+    - title: Breadcrumb
+    - title: Buttons
+    - title: Button group
+    - title: Card
+    - title: Carousel
+    - title: Collapse
+    - title: Dropdowns
+    - title: Forms
+    - title: Input group
+    - title: Jumbotron
+    - title: List group
+    - title: Modal
+    - title: Navs
+    - title: Navbar
+    - title: Pagination
+    - title: Popovers
+    - title: Progress
+    - title: Scrollspy
+    - title: Tooltips

 - title: Material Design
  pages:
@ -22,59 +65,36 @@
    - title: Selections
    - title: Snackbars

- title: About
+- title: Utilities
  pages:
-    - title: History
-    - title: Team
-    - title: Credits
-    - title: License
+    - title: Borders
+    - title: Clearfix
+    - title: Close icon
+    - title: Colors
+    - title: Display
+    - title: Embed
+    - title: Flex
+    - title: Float
+    - title: Image replacement
+    - title: Position
+    - title: Screenreaders
+    - title: Sizing
+    - title: Spacing
+    - title: Text
+    - title: Vertical align
+    - title: Visibility
+
+- title: Extend
+  pages:
+    # - title: Approach
+    - title: Icons
+
+# - title: About
+#   pages:
+#     - title: History
+#     - title: Team
+#     - title: Brand
+#     - title: License
+#     - title: Translations

-# change nav-docs.html if you change this name to insert "Bootstrap Reference Documentation"
 - title: Migration
-
-#- title: Layout
-#  pages:
-#    - title: Overview
-#    - title: Grid
-#    - title: Media object
-#    - title: Responsive utilities
-
- title: Content
-  pages:
-    - title: Typography
-    - title: Code
-    - title: Images
-    - title: Tables
-    - title: Figures
-
-
- title: Components
-  pages:
-    - title: Alerts
-    - title: Breadcrumb
-    - title: Buttons
-    - title: Button group
-    - title: Button dropdown
-    - title: Card
-    - title: Carousel
-    - title: Collapse
-    - title: Dropdowns
-    - title: Forms
-    - title: Input group
-    - title: Jumbotron
-    - title: Label
-    - title: List group
-    - title: Modal
-    - title: Navs
-    - title: Navbar
-    - title: Pagination
-    - title: Popovers
-    - title: Progress
-    - title: Scrollspy
-    - title: Tooltips
-    - title: Utilities
-
-# - title: Extend
-#   pages:
-#     - title: Approach
-#     - title: Icon fonts
--- a/_data/showcase.yml
+++ b/_data/showcase.yml
@ -0,0 +1,19 @@
+- name: Lyft
+  url: https://www.lyft.com
+  expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/
+  img: lyft
+
+- name: Vogue
+  url: http://www.vogue.com
+  expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/
+  img: vogue
+
+- name: Riot Design
+  url: http://riotdesign.eu/en/
+  expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
+  img: riot
+
+- name: Newsweek
+  url: http://www.newsweek.com/
+  expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/
+  img: newsweek
--- a/_data/theme-colors.yml
+++ b/_data/theme-colors.yml
@ -0,0 +1,16 @@
+- name: primary
+  hex: "#007aff"
+- name: secondary
+  hex: "#868e96"
+- name: success
+  hex: "#28a745"
+- name: danger
+  hex: "#dc3545"
+- name: warning
+  hex: "#ffc107"
+- name: info
+  hex: "#17a2b8"
+- name: light
+  hex: "#f8f9fa"
+- name: dark
+  hex: "#343a40"
--- a/_data/translations.yml
+++ b/_data/translations.yml
@ -0,0 +1,9 @@
+- name: Chinese
+  code: zh
+  description: Bootstrap 4 中文文档教程
+  url: http://wiki.jikexueyuan.com/project/bootstrap4/
+
+- name: Brazilian Portuguese
+  code: pt-BR
+  description: Bootstrap 4 Português do Brasil
+  url: https://bootstrapbrasil.github.io/v4/
--- a/_includes/ads.html
+++ b/_includes/ads.html
@ -0,0 +1 @@
+<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
--- a/_includes/callout-danger-async-methods.md
+++ b/_includes/callout-danger-async-methods.md
@ -0,0 +1,7 @@
+{% callout danger %}
+#### Asynchronous methods and transitions
+
+All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
+
+[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/)
+{% endcallout %}
--- a/docs/_includes/callout-warning-color-assistive-technologies.md
+++ b/docs/_includes/callout-warning-color-assistive-technologies.md
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@ -0,0 +1,63 @@
+<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
+    {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
+  </a>
+
+  <div class="navbar-nav-scroll">
+    <ul class="navbar-nav bd-navbar-nav flex-row">
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.jobs }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+      </li>
+    </ul>
+  </div>
+
+  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+    <li class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v4.0
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+        <a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (4.x)</a>
+        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
+      </div>
+    </li>
+
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
+        {% include icons/github.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" aria-label="Twitter">
+        {% include icons/twitter.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" rel="noopener" aria-label="Slack">
+        {% include icons/slack.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+  </ul>
+
+  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+</header>
--- a/_includes/docs-sidebar.html
+++ b/_includes/docs-sidebar.html
@ -0,0 +1,57 @@
+<form class="bd-search d-flex align-items-center">
+  <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
+  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
+    {% include icons/menu.svg class="" width="30" height="30" %}
+  </button>
+</form>
+
+<nav class="collapse bd-links" id="bd-docs-nav">
+  {% assign page_slug = page.url | split: '/' | last %}
+  {% for group in site.data.nav %}
+  {% assign link = group.pages | first %}
+  {% assign link_slug = link.title | slugify %}
+  {% assign group_slug = group.title | slugify %}
+  {% assign active = nil %}
+
+  {% if page.group == group_slug %}
+    {% assign active = 'active' %}
+  {% endif %}
+
+  <div class="bd-toc-item {{ active }}">
+      <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
+        {{ group.title }}
+      </a>
+
+      <ul class="nav bd-sidenav">
+        {% for doc in group.pages %}
+          {% assign doc_slug = doc.title | slugify %}
+          {% assign active = nil %}
+
+          {% if page.group == group_slug and page_slug == doc_slug %}
+            {% assign active = 'active bd-sidenav-active' %}
+          {% endif %}
+
+          <li class="{{ active }}">
+            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
+              {{ doc.title }}
+            </a>
+
+            {% comment %}
+            {% unless doc.sections == nil %}
+              <ul class="nav">
+                {% for section in doc.sections %}
+                  <li>
+                    <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
+                      {{ section.title }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endunless %}
+            {% endcomment %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</nav>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -0,0 +1,12 @@
+<footer class="bd-footer text-muted">
+  <div class="container-fluid p-3 p-md-5">
+    <ul class="bd-footer-links">
+      <li><a href="{{ site.repo }}">GitHub</a></li>
+      <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
+      <li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/about/">About</a></li>
+    </ul>
+    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
+    <p>Currently v{{ site.current_version }}. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
+  </div>
+</footer>
--- a/_includes/header.html
+++ b/_includes/header.html
@ -0,0 +1,38 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<title>
+  {% if page.title %}
+    {{ page.title }} &middot; {{ site.title }}
+  {% else %}
+    {{ site.title }} &middot; {{ site.description }}
+  {% endif %}
+</title>
+
+{% include social.html %}
+
+<!-- Bootstrap core CSS -->
+{% if site.github %}
+  <link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
+{% else %}
+  <link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.css" rel="stylesheet">
+{% endif %}
+
+<!-- Documentation extras -->
+{% if page.layout == "docs" %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+{% endif %}
+<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('send', 'pageview');
+</script>
--- a/_includes/icons/bootstrap.svg
+++ b/_includes/icons/bootstrap.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
--- a/_includes/icons/download.svg
+++ b/_includes/icons/download.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
--- a/_includes/icons/github.svg
+++ b/_includes/icons/github.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
--- a/_includes/icons/import.svg
+++ b/_includes/icons/import.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
--- a/_includes/icons/lightning.svg
+++ b/_includes/icons/lightning.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
--- a/_includes/icons/menu.svg
+++ b/_includes/icons/menu.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
--- a/_includes/icons/slack.svg
+++ b/_includes/icons/slack.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
--- a/_includes/icons/twitter.svg
+++ b/_includes/icons/twitter.svg
@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@ -0,0 +1,56 @@
+<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+
+<script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"></script>
+
+{% if site.github %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
+{% else %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.js"></script>
+{% endif %}
+
+{% if site.github %}
+  <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
+{% else %}
+  <script src="{{ site.baseurl }}/assets/js/vendor/anchor.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+{% endif %}
+
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
+<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
+
+{% if page.layout == "docs" %}
+<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+<script type="text/javascript">
+  var docsearch = docsearch({
+    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
+    indexName: 'bootstrap-v4',
+    inputSelector: '#search-input',
+    handleSelected: function (input, event, suggestion) {
+      var url = suggestion.url;
+      url = suggestion.isLvl1 ? url.split('#')[0]: url;
+      // If it's a title we remove the anchor so it does not jump.
+      window.location.href = url;
+    },
+    transformData: function (hits) {
+      return hits.map(function (hit) {
+        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
+        return hit;
+      });
+    },
+    debug: false // Set debug to true if you want to inspect the dropdown
+  });
+</script>
+{% endif %}
+
+<script>
+Holder.addTheme('gray', {
+  bg: '#777',
+  fg: 'rgba(255,255,255,.75)',
+  font: 'Helvetica',
+  fontweight: 'normal'
+})
+</script>
--- a/_includes/social.html
+++ b/_includes/social.html
@ -0,0 +1,36 @@
+<!-- Twitter -->
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+
+{% if page.title %}
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{{ page.title }}">
+  <meta name="twitter:description" content="{{ page.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
+{% else %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ site.title }}">
+  <meta name="twitter:description" content="{{ site.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
+{% endif %}
+
+<!-- Facebook -->
+{% if page.title %}
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:title" content="{{ page.title }}">
+  <meta property="og:description" content="{{ page.description }}">
+  <meta property="og:type" content="website">
+{% else %}
+  <meta property="og:url" content="{{ site.url }}">
+  <meta property="og:title" content="{{ site.title }}">
+  <meta property="og:description" content="{{ site.description }}">
+{% endif %}
+<meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' }}{{ site.social_image_path }}">
+<meta property="og:image:secure_url" content="{{ site.url }}{{ site.social_image_path }}">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -10,12 +10,17 @@
      </div>
    </a>

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

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

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

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

    {{ content }}

    {% include footer.html %}
+    {% include scripts.html %}
  </body>
 </html>
--- a/_layouts/simple.html
+++ b/_layouts/simple.html
@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
+    <p class="bd-lead">{{ page.description }}</p>
+    {% include ads.html %}
+    {{ content }}
+  </main>
+</div>
--- a/docs/_plugins/bugify.rb
+++ b/docs/_plugins/bugify.rb
@ -4,6 +4,7 @@ module Jekyll
      upstream_map = {
        "Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
        "Edge" => ["https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/", "Edge issue"],
+        "A11yUserVoice" => ["https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/", "Microsoft A11y UserVoice idea"],
        "UserVoice" => ["https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/", "Edge UserVoice idea"],
        "Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
        "Chromium" => ["https://bugs.chromium.org/p/chromium/issues/detail?id=", "Chromium issue"],
--- a/docs/_plugins/callout.rb
+++ b/docs/_plugins/callout.rb
--- a/docs/_plugins/highlight_alt.rb
+++ b/docs/_plugins/highlight_alt.rb
@ -62,11 +62,21 @@ eos
        code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
      end

+      def remove_example_classes(code)
+        # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
+        # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
+        # To fix the bug, replace `(?=")` with `(?=("|\ ))`.
+        code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
+        # Find empty class attributes after the previous regex and remove those too.
+        code = code.gsub(/\ class=""/, "")
+      end
+
      def render_rouge(code)
        require 'rouge'
        formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
        lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
        code = remove_holderjs(code)
+        code = remove_example_classes(code)
        code = formatter.format(lexer.lex(code))
        "<div class=\"highlight\"><pre>#{code}</pre></div>"
      end
--- a/docs/_plugins/markdown-block.rb
+++ b/docs/_plugins/markdown-block.rb
--- a/assets/brand/bootstrap-outline.svg
+++ b/assets/brand/bootstrap-outline.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
+  <g fill="#FFF" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
+    <path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
+  </g>
+</svg>
--- a/assets/brand/bootstrap-punchout.svg
+++ b/assets/brand/bootstrap-punchout.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
+  <g fill="#FFF" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
+    <path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
+  </g>
+</svg>
--- a/assets/brand/bootstrap-social-logo.png
+++ b/assets/brand/bootstrap-social-logo.png
--- a/assets/brand/bootstrap-social.png
+++ b/assets/brand/bootstrap-social.png
--- a/assets/brand/bootstrap-solid.svg
+++ b/assets/brand/bootstrap-solid.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path fill="#3F51B5" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
+    <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
+  </g>
+</svg>
--- a/assets/css/docs.min.css
+++ b/assets/css/docs.min.css
--- a/assets/css/docs.min.css.map
+++ b/assets/css/docs.min.css.map
--- a/assets/img/bootstrap-stack.png
+++ b/assets/img/bootstrap-stack.png
--- a/assets/img/bootstrap-themes.png
+++ b/assets/img/bootstrap-themes.png
--- a/assets/js/docs.min.js
+++ b/assets/js/docs.min.js
--- a/docs/assets/js/ie-emulation-modes-warning.js
+++ b/docs/assets/js/ie-emulation-modes-warning.js
@ -2,6 +2,7 @@
 // IT'S JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++
 /*!
+ * Copyright 2014-2015 The Bootstrap Authors
 * Copyright 2014-2015 Twitter, Inc.
 *
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
@ -9,7 +10,7 @@
 */
 // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
 (function () {
-  'use strict';
+  'use strict'

  function emulatedIEMajorVersion() {
    var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
@ -25,7 +26,7 @@
    // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
    // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
    // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
-    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')()
+    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
    if (jscriptVersion === undefined) {
      return 11 // IE11+ not in emulation mode
    }
@ -48,4 +49,4 @@
  if (emulated !== nonEmulated) {
    window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
  }
-})();
+}())
--- a/docs/assets/js/ie10-viewport-bug-workaround.js
+++ b/docs/assets/js/ie10-viewport-bug-workaround.js
@ -1,14 +1,15 @@
 /*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
- * Copyright 2014-2015 Twitter, Inc.
+ * Copyright 2014-2017 The Bootstrap Authors
+ * Copyright 2014-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

 // See the Getting Started docs for more information:
-// http://getbootstrap.com/getting-started/#support-ie10-width
+// https://getbootstrap.com/getting-started/#support-ie10-width

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

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

-})();
+}())
--- a/assets/js/src/application.js
+++ b/assets/js/src/application.js
@ -0,0 +1,121 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global Clipboard, anchors */
+
+(function($) {
+  'use strict';
+
+  $(function() {
+    $('body').bootstrapMaterialDesign();
+
+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop(
+      'indeterminate',
+      true
+    );
+
+    // Tooltip and popover demos
+    $('.tooltip-demo').tooltip({
+      selector: '[data-toggle="tooltip"]',
+      container: 'body',
+    });
+
+    $('[data-toggle="popover"]').popover();
+
+    // Demos within modals
+    $('.tooltip-test').tooltip();
+    $('.popover-test').popover();
+
+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop(
+      'indeterminate',
+      true
+    );
+
+    // Disable empty links in docs examples
+    $('.bd-content [href="#"]').click(function(e) {
+      e.preventDefault();
+    });
+
+    // Modal relatedTarget demo
+    $('#exampleModal').on('show.bs.modal', function(event) {
+      var $button = $(event.relatedTarget); // Button that triggered the modal
+      var recipient = $button.data('whatever'); // Extract info from data-* attributes
+      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+      var $modal = $(this);
+      $modal.find('.modal-title').text('New message to ' + recipient);
+      $modal.find('.modal-body input').val(recipient);
+    });
+
+    // Activate animated progress bar
+    $('.bd-toggle-animated-progress').on('click', function() {
+      $(this)
+        .siblings('.progress')
+        .find('.progress-bar-striped')
+        .toggleClass('progress-bar-animated');
+    });
+
+    // Insert copy to clipboard button before .highlight
+    $('.highlight').each(function() {
+      var btnHtml =
+        '<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>';
+      $(this).before(btnHtml);
+      $('.btn-clipboard').tooltip().on('mouseleave', function() {
+        // explicitly hide tooltip, since after clicking it remains
+        // focused (as it's a button), so tooltip would otherwise
+        // remain visible until focus is moved away
+        $(this).tooltip('hide');
+      });
+    });
+
+    var clipboard = new Clipboard('.btn-clipboard', {
+      target: function(trigger) {
+        return trigger.parentNode.nextElementSibling;
+      },
+    });
+
+    clipboard.on('success', function(e) {
+      $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle');
+
+      e.clearSelection();
+    });
+
+    clipboard.on('error', function(e) {
+      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-';
+      var fallbackMsg = 'Press ' + modifierKey + 'C to copy';
+
+      $(e.trigger)
+        .attr('title', fallbackMsg)
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle');
+    });
+
+    anchors.options = {
+      icon: '#',
+    };
+    anchors.add(
+      '.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
+    );
+    $(
+      '.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
+    ).wrapInner('<div></div>');
+  });
+})(jQuery);
--- a/assets/js/vendor/anchor.min.js
+++ b/assets/js/vendor/anchor.min.js
--- a/assets/js/vendor/clipboard.min.js
+++ b/assets/js/vendor/clipboard.min.js
--- a/assets/js/vendor/holder.min.js
+++ b/assets/js/vendor/holder.min.js
--- a/assets/js/vendor/jquery-slim.min.js
+++ b/assets/js/vendor/jquery-slim.min.js
--- a/assets/js/vendor/popper.min.js
+++ b/assets/js/vendor/popper.min.js
--- a/assets/scss/_ads.scss
+++ b/assets/scss/_ads.scss
@ -0,0 +1,38 @@
+// scss-lint:disable ImportantRule, IdSelector
+
+//
+// Carbon ads
+//
+
+#carbonads {
+  position: static;
+  display: block;
+  max-width: 400px;
+  padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  background-color: rgba(0,0,0,.05);
+
+  a {
+    color: #333;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    max-width: 330px;
+    border-radius: 4px;
+  }
+}
+
+.carbon-img {
+  float: left;
+  margin-left: -145px;
+}
+
+.carbon-poweredby {
+  display: block;
+  color: #777 !important;
+}
--- a/assets/scss/_algolia.scss
+++ b/assets/scss/_algolia.scss
@ -0,0 +1,139 @@
+// Docsearch overrides
+//
+// `!important` indicates overridden properties.
+.algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
+  // Menu container
+  .ds-dropdown-menu {
+    width: 100%;
+    min-width: 0 !important;
+    max-width: none !important;
+    padding: .75rem 0 !important;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.1);
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.175);
+
+    @include media-breakpoint-up(md) {
+      width: 175%;
+    }
+
+    // Caret
+    &::before {
+      display: none !important;
+    }
+
+    [class^=ds-dataset-] {
+      padding: 0 !important;
+      overflow: visible !important;
+      background-color: transparent !important;
+      border: 0 !important;
+    }
+
+    .ds-suggestions {
+      margin-top: 0 !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    padding: .125rem 1rem !important;
+    margin-top: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 500 !important;
+    color: $bd-purple-bright !important;
+    border-bottom: 0 !important;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    float: none !important;
+    padding-top: 0 !important;
+  }
+
+  // Section header
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  .algolia-docsearch-suggestion--content {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+
+    // Vertical divider between column header and content
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .ds-suggestion {
+    &:not(:first-child) {
+      .algolia-docsearch-suggestion--category-header {
+        padding-top: .75rem !important;
+        margin-top: .75rem !important;
+        border-top: 1px solid rgba(0,0,0,.1);
+      }
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion--title {
+    display: block;
+    padding: .25rem 1rem !important;
+    margin-bottom: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 400 !important;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    padding: 0 1rem .5rem !important;
+    margin-top: -.25rem;
+    font-size: .875rem !important;
+    font-weight: normal;
+    line-height: 1.25 !important;
+  }
+
+  .algolia-docsearch-footer {
+    float: none !important;
+    width: auto !important;
+    height: auto !important;
+    padding: .75rem 1rem 0;
+    font-size: .75rem !important;
+    line-height: 1 !important;
+    color: #767676 !important;
+    border-top: 1px solid rgba(0,0,0,.1);
+  }
+
+  .algolia-docsearch-footer--logo {
+    display: inline !important;
+    overflow: visible !important;
+    color: inherit !important;
+    text-indent: 0 !important;
+    background: none !important;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: #5f2dab;
+    background-color: rgba(154, 132, 187, .12);
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 rgba(95,45,171,.5) !important;
+  }
+
+  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+    background-color: rgba(208,189,236,.15) !important;
+  }
+}
--- a/assets/scss/_anchor.scss
+++ b/assets/scss/_anchor.scss
@ -0,0 +1,12 @@
+// scss-lint:disable ImportantRule
+
+.anchorjs-link {
+  font-weight: normal;
+  color: rgba($link-color, .5);
+  transition: color .16s linear;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+}
--- a/docs/assets/scss/_brand.scss
+++ b/docs/assets/scss/_brand.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 //
 // Brand guidelines
 //
@ -10,7 +8,7 @@
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
-  color: #563d7c;
+  color: #3F51B5;
  background-color: #f9f9f9;
  border-radius: .25rem;
 }
@ -25,7 +23,7 @@
 }
 .bd-brand-logos .inverse {
  color: #fff;
-  background-color: #563d7c;
+  background-color: #3F51B5;
 }

 // Heading content within
--- a/docs/assets/scss/_browser-bugs.scss
+++ b/docs/assets/scss/_browser-bugs.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 // Wall of Browser Bugs
 //
 // Better display for the responsive table on the Wall of Browser Bugs.
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@ -1,19 +1,29 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 // Buttons
 //
 // Custom buttons for the docs.

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

  &:hover,
-  &:focus,
  &:active {
    color: #fff;
    background-color: $bd-purple-bright;
    border-color: $bd-purple-bright;
  }
 }
+
+.btn-bd-yellow {
+  font-weight: 500;
+  color: $bd-yellow;
+  border-color: $bd-yellow;
+
+  &:hover,
+  &:active {
+    color: $bd-graphite;
+    background-color: $bd-yellow;
+    border-color: $bd-yellow;
+  }
+}
--- a/docs/assets/scss/_callouts.scss
+++ b/docs/assets/scss/_callouts.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 //
 // Callouts
 //
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 // clipboard.js
 //
 // JS-based `Copy` buttons for code snippets.
@ -25,6 +23,7 @@
  color: #818a91;
  cursor: pointer;
  background-color: transparent;
+  border: 0;
  border-radius: .25rem;

  &:hover {
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@ -0,0 +1,24 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 // scss-lint:disable QualifyingElement

 //
@ -21,9 +19,9 @@
    }
  }

-  .flex-items-xs-top,
-  .flex-items-xs-middle,
-  .flex-items-xs-bottom {
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
    min-height: 6rem;
    background-color: rgba(255,0,0,.1);
  }
@ -34,6 +32,45 @@
  background-color: rgba(255,0,0,.1);
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

 // Tooltips
 .tooltip-demo a {
@ -303,22 +369,22 @@
  overflow: auto;
 }

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

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

 //
 // Code snippets
@ -326,8 +392,9 @@

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

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

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

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

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

 .bd-pageheader {
-  padding: 2rem ($grid-gutter-width-base / 2);
+  padding: 2rem ($grid-gutter-width / 2);
  margin-bottom: 1.5rem;
  color: $bd-purple-light;
  text-align: center;
--- a/assets/scss/_responsive-tests.scss
+++ b/assets/scss/_responsive-tests.scss
@ -0,0 +1,17 @@
+// scss-lint:disable ImportantRule
+
+//
+// Responsive tests
+//
+
+// Responsive (scrollable) doc tables
+.table-responsive .highlight pre {
+  white-space: normal;
+}
+
+// Utility classes table
+.bd-table th small {
+  display: block;
+  font-weight: normal;
+  color: #999;
+}
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@ -0,0 +1,166 @@
+// scss-lint:disable VendorPrefix
+
+//
+// Right side table of contents
+//
+
+.bd-toc {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 4rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+  order: 2;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  font-size: .875rem;
+}
+
+.section-nav {
+  padding-left: 0;
+  border-left: 1px solid #eee;
+
+  ul {
+    padding-left: 1rem;
+
+    ul {
+      display: none;
+    }
+  }
+}
+
+.toc-entry {
+  display: block;
+
+  a {
+    display: block;
+    padding: .125rem 1.5rem;
+    color: #99979c;
+
+    &:hover {
+      color: $blue;
+      text-decoration: none;
+    }
+  }
+}
+
+//
+// Left side navigation
+//
+
+.bd-sidebar {
+  order: 0;
+  // background-color: #f5f2f9;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 4rem;
+      z-index: 1000;
+      max-height: calc(100vh - 4rem);
+    }
+    border-right: 1px solid rgba(0,0,0,.1);
+  }
+
+  @include media-breakpoint-up(xl) {
+    max-width: 320px;
+  }
+}
+
+.bd-links {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-right: -15px;
+  margin-left: -15px;
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      max-height: calc(100vh - 9rem);
+      overflow-y: auto;
+    }
+  }
+
+  // Override collapse behaviors
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
+}
+
+.bd-search {
+  position: relative; // To contain the Algolia search
+  padding: 1rem 15px;
+  margin-right: -15px;
+  margin-left: -15px;
+  border-bottom: 1px solid rgba(0,0,0,.05);
+
+  .form-control:focus {
+    border-color: $bd-purple-bright;
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-900;
+}
+
+.bd-sidenav {
+  display: none;
+}
+
+.bd-toc-link {
+  display: block;
+  padding: .25rem 1.5rem;
+  font-weight: 500;
+  color: rgba(0,0,0,.65);
+
+  &:hover {
+    color: rgba(0,0,0,.85);
+    text-decoration: none;
+  }
+}
+
+.bd-toc-item {
+  &.active {
+    margin-bottom: 1rem;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    > .bd-toc-link {
+      color: rgba(0,0,0,.85);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    > .bd-sidenav {
+      display: block;
+    }
+  }
+}
+
+// All levels of nav
+.bd-sidebar .nav > li > a {
+  display: block;
+  padding: .25rem 1.5rem;
+  font-size: 90%;
+  color: rgba(0,0,0,.65);
+}
+
+.bd-sidebar .nav > li > a:hover {
+  color: rgba(0,0,0,.85);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.bd-sidebar .nav > .active > a,
+.bd-sidebar .nav > .active:hover > a {
+  font-weight: 500;
+  color: rgba(0,0,0,.85);
+  background-color: transparent;
+}
--- a/docs/assets/scss/_skiplink.scss
+++ b/docs/assets/scss/_skiplink.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 // scss-lint:disable IdSelector

 #skippy {
--- a/docs/assets/scss/_syntax.scss
+++ b/docs/assets/scss/_syntax.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 .hll { background-color: #ffc; }
 .c { color: #999; }
 .k { color: #069; }
@ -63,3 +61,6 @@
 .css .o,
 .css .o + .nt,
 .css .nt + .nt { color: #999; }
+
+.language-bash::before { color: #009; content: "$ "; user-select: none; }
+.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
--- a/docs/assets/scss/_team.scss
+++ b/docs/assets/scss/_team.scss
@ -1,5 +1,3 @@
-// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
 .bd-team {
  margin-bottom: 1.5rem;

@ -8,8 +6,12 @@
    color: #555;
  }

-  .team-member:hover {
+  .team-member:hover,
+  .team-member:focus {
    color: #333;
+  }
+
+  .team-member:hover {
    text-decoration: none;
  }

--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -0,0 +1,11 @@
+// Local docs variables
+$bd-purple:          #3F51B5;
+$bd-purple-bright:   red; // lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-light:    #cdbfe3;
+$bd-purple-lightest: #f5f2f9;
+$bd-graphite:        #2a2730;
+$bd-graphite-light:  lighten($bd-graphite, 40%);
+$bd-yellow:          #ffe484;
+$bd-danger:          #d9534f;
+$bd-warning:         #f0ad4e;
+$bd-info:            #5bc0de;
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@ -0,0 +1,56 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+//   Doing so gives us access to the same core utilities provided by Bootstrap.
+//   For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$bd-`.
+//   These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+//   These classes indicate custom-built or modified components for the design
+//   and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+
+// Load Bootstrap variables and mixins
+@import "../../scss/functions";
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+// Load docs components
+@import "variables";
+@import "nav";
+@import "masthead";
+@import "featured-sites";
+@import "ads";
+@import "content";
+@import "page-header";
+@import "skiplink";
+@import "sidebar";
+@import "footer";
+@import "component-examples";
+@import "responsive-tests";
+@import "buttons";
+@import "callouts";
+@import "examples";
+@import "team";
+@import "browser-bugs";
+@import "brand";
+@import "colors";
+@import "clipboard-js";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
+@import "algolia";
--- a/bower.json
+++ b/bower.json
@ -19,11 +19,11 @@
  "moduleType": "globals",
  "main": [
    "scss/_core.scss",
-    "dist/bootstrap-material-design.iife.js"
+    "dist/js/bootstrap-material-design.js"
  ],
  "dependencies": {
    "jquery": "^2.2",
-    "tether": "^1.2",
+    "popper.js": "^1.10.11",
    "bootstrap": "v4-dev"
  }
 }
--- a/docs/4.0/about/brand.md
+++ b/docs/4.0/about/brand.md
@ -0,0 +1,78 @@
+---
+layout: docs
+title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
+group: about
+toc: true
+---
+
+Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
+
+## Mark and logo
+
+Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+</div>
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <span class="h1">Bootstrap</span>
+  </div>
+  <div class="bd-brand-item inverse">
+    <span class="h1">Bootstrap</span>
+  </div>
+</div>
+
+## Download mark
+
+Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+</div>
+
+## Name
+
+The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <span class="h3">Bootstrap</span>
+    <strong class="text-success">Right</strong>
+  </div>
+  <div class="bd-brand-item">
+    <span class="h3 text-muted">BootStrap</span>
+    <strong class="text-warning">Wrong</strong>
+  </div>
+  <div class="bd-brand-item">
+    <span class="h3 text-muted">Twitter Bootstrap</span>
+    <strong class="text-warning">Wrong</strong>
+  </div>
+</div>
+
+## Colors
+
+Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
+
+<div class="bd-brand">
+  <div class="color-swatches">
+    <div class="color-swatch bd-purple"></div>
+    <div class="color-swatch bd-purple-light"></div>
+    <div class="color-swatch bd-purple-lighter"></div>
+    <div class="color-swatch bd-gray"></div>
+  </div>
+</div>
--- a/docs/4.0/about/history.md
+++ b/docs/4.0/about/history.md
@ -0,0 +1,13 @@
+---
+layout: docs
+title: History
+description: A brief overview of the history of Bootstrap.
+redirect_from:
+ - /about/
+---
+
+Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
+
+Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
+
+Originally [released](https://blog.twitter.com/2011/bootstrap-from-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
--- a/docs/4.0/about/license.md
+++ b/docs/4.0/about/license.md
@ -0,0 +1,34 @@
+---
+layout: docs
+title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
+group: about
+---
+
+Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
+
+#### It requires you to:
+
+* Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
+
+#### It permits you to:
+
+- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
+- Use Bootstrap in packages or distributions that you create
+- Modify the source code
+- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
+
+#### It forbids you to:
+
+- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
+- Hold the creators or copyright holders of Bootstrap liable
+- Redistribute any piece of Bootstrap without proper attribution
+- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
+- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
+
+#### It does not require you to:
+
+- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
+- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
+
+The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE) for more information.
--- a/docs/4.0/about/team.md
+++ b/docs/4.0/about/team.md
@ -1,11 +1,11 @@
 ---
 layout: docs
 title: Team
+description: An overview of the founding team and core contributors to Bootstrap.
 group: about
 ---

-Material Design for Bootstrap is maintained by a small group of invaluable core contributors, 
-with the support and involvement of our community.
+Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

 <div class="list-group bd-team">
  {% for member in site.data.core-team %}
@ -19,4 +19,4 @@ with the support and involvement of our community.
  {% endfor %}
 </div>

-Get involved with Bootstrap development by [opening an issue](https://github.com/FezVrasta/bootstrap-material-design/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/FezVrasta/bootstrap-material-design/blob/master/CONTRIBUTING.md) for information on how we develop.
+Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for information on how we develop.
--- a/docs/4.0/about/translations.md
+++ b/docs/4.0/about/translations.md
@ -0,0 +1,18 @@
+---
+layout: docs
+title: Translations
+description: Links to community-translated Bootstrap documentation sites.
+group: about
+---
+
+Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
+
+<ul>
+{% for language in site.data.translations %}
+  <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
+{% endfor %}
+</ul>
+
+**We don't help organize or host translations, we just link to them.**
+
+Finished a new or better translation? Open a pull request to add it to our list.
--- a/docs/4.0/browser-bugs.md
+++ b/docs/4.0/browser-bugs.md
@ -0,0 +1,64 @@
+---
+layout: docs
+title: Wall of browser bugs
+group: browser-bugs
+---
+
+Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
+
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#supported-browsers).
+
+See also:
+
+* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://code.google.com/p/chromium/issues/detail?id=536263)
+* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
+* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
+* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
+
+<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
+  <thead>
+    <tr>
+      <th>Browser(s)</th>
+      <th>Summary of bug</th>
+      <th>Upstream bug(s)</th>
+      <th>Bootstrap issue(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for bug in site.data.browser-bugs %}
+    <tr>
+      <td>{{ bug.browser }}</td>
+      <td>{{ bug.summary | markdownify | bugify }}</td>
+      <td>{{ bug.upstream_bug | bugify }}</td>
+      <td>{{ bug.origin | bugify }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+
+# Most wanted features
+
+There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.
+
+We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.
+
+<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
+  <thead>
+    <tr>
+      <th>Browser(s)</th>
+      <th>Summary of feature</th>
+      <th>Upstream issue(s)</th>
+      <th>Bootstrap issue(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for feat in site.data.browser-features %}
+    <tr>
+      <td>{{ feat.browser }}</td>
+      <td>{{ feat.summary | markdownify | bugify }}</td>
+      <td>{{ feat.upstream_bug | bugify }}</td>
+      <td>{{ feat.origin | bugify }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@ -1,45 +1,20 @@
 ---
 layout: docs
 title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 group: components
+toc: true
 ---

-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation**
-This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
-See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
-{% endcallout %}
-
-
-
-
-Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
 ## Examples

 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).

 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're not looking too good.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> Change a few things up and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert—check it out!
+</div>{% endfor %}
 {% endexample %}

 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@ -50,29 +25,22 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.

 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>{% endfor %}
 {% endexample %}

 ### Additional content

-Alerts can also contain additional HTML elements like headings and paragraphs.
+Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

 {% example html %}
 <div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-  <p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
 {% endexample %}

@ -82,14 +50,15 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
 Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:

 - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
+- If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util). The compiled version includes this.
 - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
 - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.in` classes.
+- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.

 You can see this in action with a live demo:

 {% example html %}
-<div class="alert alert-warning alert-dismissible fade in" role="alert">
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
@ -122,7 +91,7 @@ Note that closing an alert will remove it from the DOM.
 | Method | Description |
 | --- | --- |
 | `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) |
-| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. |
+| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |

 {% highlight js %}$(".alert").alert('close'){% endhighlight %}

--- a/docs/4.0/components/badge.md
+++ b/docs/4.0/components/badge.md
@ -0,0 +1,78 @@
+---
+layout: docs
+title: Badges
+description: Documentation and examples for badges, our small count and labeling component.
+group: components
+toc: true
+---
+
+## Example
+
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+<div class="bd-example">
+<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
+</div>
+
+{% highlight html %}
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+{% endhighlight %}
+
+Badges can be used as part of links or buttons to provide a counter.
+
+{% example html %}
+<button class="btn btn-primary">
+  Notifications <span class="badge badge-light">4</span>
+</button>
+{% endexample %}
+
+Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
+
+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">
+  Profile <span class="badge badge-light">9</span>
+  <span class="sr-only">unread messages</span>
+</button>
+{% endexample %}
+
+## Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a badge.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
+{% endexample %}
+
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
+## Pill badges
+
+Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
+{% endexample %}
+
+## Links
+
+Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
+{% endexample %}
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@ -1,22 +1,11 @@
 ---
 layout: docs
 title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
 group: components
 ---

-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation**
-This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
-See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
-{% endcallout %}
-
-
-
-
-Indicate the current page's location within a navigational hierarchy. 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).
+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).

 {% example html %}
 <ol class="breadcrumb">
--- a/docs/4.0/components/button-group.md
+++ b/docs/4.0/components/button-group.md
@ -1,31 +1,14 @@
 ---
 layout: docs
 title: Button group
+description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
 group: components
+toc: true
 ---

-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation**
-This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
-See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
-{% endcallout %}
-
-
-
-
-Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
 ## Basic example

-Wrap a series of buttons with `.btn` in `.btn-group`.
+Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).

 {% example html %}
 <div class="btn-group" role="group" aria-label="Basic example">
@ -35,19 +18,26 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {% endexample %}

+{% callout warning %}
+#### Ensure correct `role` and provide a label
+
+In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
+
+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.
+Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

 {% example html %}
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
-  <div class="btn-group" role="group" aria-label="First group">
+  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
-  <div class="btn-group" role="group" aria-label="Second group">
+  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
@ -58,6 +48,36 @@ Combine sets of button groups into button toolbars for more complex components.
 </div>
 {% endexample %}

+Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
+
+{% example html %}
+<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group mr-2" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <span class="input-group-addon" id="btnGroupAddon">@</span>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
+  </div>
+</div>
+
+<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <span class="input-group-addon" id="btnGroupAddon2">@</span>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
+  </div>
+</div>
+{% endexample %}
+
 ## Sizing

 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
@ -113,6 +133,18 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi

 Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**

+<div class="bd-example">
+  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+  </div>
+</div>
+
+
 <div class="bd-example">
  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-secondary">Button</button>
@ -163,7 +195,3 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
  ...
 </div>
 {% endhighlight %}
-
-## Tooltips and popovers
-
-Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
--- a/docs/4.0/components/buttons.md
+++ b/docs/4.0/components/buttons.md
@ -1,53 +1,20 @@
 ---
 layout: docs
 title: Buttons
+description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 group: components
-redirect_from: "/components/"
+redirect_from: "/docs/4.0/components/"
+toc: true
 ---

-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation**
-This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
-See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
-{% endcallout %}
-
-
-
-
-Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
 ## Examples

-Bootstrap includes six predefined button styles, each serving its own semantic purpose.
+Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

 {% example html %}
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}

-<!-- Secondary, outline button -->
-<button type="button" class="btn btn-secondary">Secondary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}

@ -73,15 +40,10 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

 {% example html %}
-<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-success">Success</button>
-<button type="button" class="btn btn-outline-info">Info</button>
-<button type="button" class="btn btn-outline-warning">Warning</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 {% endexample %}

-
 ## Sizes

 Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
@ -116,10 +78,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset

 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

-{% callout info %}
-**Heads up!** IE9 and below render disabled buttons with gray, shadowed text that we can't override.
-{% endcallout %}
-
 {% example html %}
 <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
 <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
@ -166,13 +124,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to

 {% example html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary active">
+  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
 </div>
@ -180,13 +138,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to

 {% example html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary active">
+  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
 </div>
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@ -0,0 +1,645 @@
+---
+layout: docs
+title: Cards
+description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
+group: components
+toc: true
+---
+
+## About
+
+A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
+
+If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
+
+## Example
+
+Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
+
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+## Content types
+
+Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
+
+### Blocks
+
+The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
+
+{% example html %}
+<div class="card">
+  <div class="card-body">
+    This is some text within a card block.
+  </div>
+</div>
+{% endexample %}
+
+### Titles, text, and links
+
+Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
+
+Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+{% endexample %}
+
+### Images
+
+`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+{% endexample %}
+
+### List groups
+
+Create lists of content in a card with a flush list group.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+{% endexample %}
+
+### Kitchen sink
+
+Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-body">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+{% endexample %}
+
+### Header and footer
+
+Add an optional header and/or footer within a card.
+
+{% example html %}
+<div class="card">
+  <div class="card-header">
+    Featured
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+Card headers can be styled by adding `.card-header` to `<h*>` elements.
+
+{% example html %}
+<div class="card">
+  <h4 class="card-header">Featured</h4>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <div class="card-header">
+    Quote
+  </div>
+  <div class="card-body">
+    <blockquote class="blockquote mb-0">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card text-center">
+  <div class="card-header">
+    Featured
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+  <div class="card-footer text-muted">
+    2 days ago
+  </div>
+</div>
+{% endexample %}
+
+## Sizing
+
+Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
+
+### Using grid markup
+
+Using the grid, wrap cards in columns and rows as needed.
+
+{% example html %}
+<div class="row">
+  <div class="col-sm-6">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Special title treatment</h4>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Special title treatment</h4>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+### Using utilities
+
+Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
+
+{% example html %}
+<div class="card w-75">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
+</div>
+
+<div class="card w-50">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
+</div>
+{% endexample %}
+
+### Using custom CSS
+
+Use custom CSS in your stylesheets or as inline styles to set a width.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+## Text alignment
+
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card text-center" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card text-right" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+## Navigation
+
+Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
+
+{% example html %}
+<div class="card text-center">
+  <div class="card-header">
+    <ul class="nav nav-tabs card-header-tabs">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Active</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card text-center">
+  <div class="card-header">
+    <ul class="nav nav-pills card-header-pills">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Active</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+{% endexample %}
+
+## Images
+
+Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
+
+### Image caps
+
+Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
+
+{% example html %}
+<div class="card mb-3">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
+</div>
+{% endexample %}
+
+### Image overlays
+
+Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
+
+{% example html %}
+<div class="card bg-dark text-white">
+  <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
+  <div class="card-img-overlay">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text">Last updated 3 mins ago</p>
+  </div>
+</div>
+{% endexample %}
+
+## Card styles
+
+Cards include various options for customizing their backgrounds, borders, and color.
+
+### Background and color
+
+Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to change the appearance of a card.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 20rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body">
+    <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>{% endfor %}
+{% endexample %}
+
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
+### Border
+
+Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<div class="card border-{{ color.name }} mb-3" style="max-width: 20rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
+    <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>{% endfor %}
+{% endexample %}
+
+### Mixins utilities
+
+You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
+
+{% example html %}
+<div class="card border-success mb-3" style="max-width: 20rem;">
+  <div class="card-header bg-transparent border-success">Header</div>
+  <div class="card-body text-success">
+    <h4 class="card-title">Success card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <div class="card-footer bg-transparent border-success">Footer</div>
+</div>
+{% endexample %}
+
+## Card layout
+
+In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
+
+### Card groups
+
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
+
+{% example html %}
+<div class="card-group">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+When using card groups with footers, their content will automatically line up.
+
+{% example html %}
+<div class="card-group">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+### Card decks
+
+Need a set of equal width and height cards that aren't attached to one another? Use card decks.
+
+{% example html %}
+<div class="card-deck">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+Just like with card groups, card footers in decks will automatically line up.
+
+{% example html %}
+<div class="card-deck">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+### 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.
+
+**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.
+
+{% example html %}
+<div class="card-columns">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title that wraps to a new line</h4>
+      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+  </div>
+  <div class="card p-3">
+    <blockquote class="blockquote mb-0 card-body">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">
+        <small class="text-muted">
+          Someone famous in <cite title="Source Title">Source Title</cite>
+        </small>
+      </footer>
+    </blockquote>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <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">
+    <blockquote class="blockquote mb-0">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+      <footer class="blockquote-footer">
+        <small>
+          Someone famous in <cite title="Source Title">Source Title</cite>
+        </small>
+      </footer>
+    </blockquote>
+  </div>
+  <div class="card text-center">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
+  </div>
+  <div class="card p-3 text-right">
+    <blockquote class="blockquote mb-0">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">
+        <small class="text-muted">
+          Someone famous in <cite title="Source Title">Source Title</cite>
+        </small>
+      </footer>
+    </blockquote>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
+
+{% highlight scss %}
+.card-columns {
+  @include media-breakpoint-only(lg) {
+    column-count: 4;
+  }
+  @include media-breakpoint-only(xl) {
+    column-count: 5;
+  }
+}
+{% endhighlight %}
--- a/docs/4.0/components/carousel.md
+++ b/docs/4.0/components/carousel.md
@ -0,0 +1,300 @@
+---
+layout: docs
+title: Carousel
+description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
+group: components
+toc: true
+---
+
+## How it works
+
+The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
+
+In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
+
+Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
+
+Lastly, if you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
+
+## Example
+
+Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
+
+Be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page.
+
+### Slides only
+
+Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment.
+
+{% example html %}
+<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+### With controls
+
+Adding in the previous and next controls:
+
+{% example html %}
+<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+    </div>
+  </div>
+  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+{% endexample %}
+
+### With indicators
+
+You can also add the indicators to the carousel, alongside the controls, too.
+
+{% example html %}
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+  <ol class="carousel-indicators">
+    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+  </ol>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+    </div>
+  </div>
+  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+{% endexample %}
+
+{% callout warning %}
+#### Initial active element required
+
+The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
+{% endcallout %}
+
+### With captions
+
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
+
+<div class="bd-example">
+  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
+    <ol class="carousel-indicators">
+      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
+      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
+      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
+    </ol>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+        <div class="carousel-caption d-none d-md-block">
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+        <div class="carousel-caption d-none d-md-block">
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+        <div class="carousel-caption d-none d-md-block">
+          <h3>Third slide label</h3>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+        </div>
+      </div>
+    </div>
+    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="carousel-item">
+  <img src="..." alt="...">
+  <div class="carousel-caption d-none d-md-block">
+    <h3>...</h3>
+    <p>...</p>
+  </div>
+</div>
+{% endhighlight %}
+
+## Usage
+
+### Via data attributes
+
+Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
+
+The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
+
+### Via JavaScript
+
+Call carousel manually with:
+
+{% highlight js %}
+$('.carousel').carousel()
+{% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
+
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 100px;">Name</th>
+      <th style="width: 50px;">Type</th>
+      <th style="width: 50px;">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>interval</td>
+      <td>number</td>
+      <td>5000</td>
+      <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+    </tr>
+    <tr>
+      <td>keyboard</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Whether the carousel should react to keyboard events.</td>
+    </tr>
+    <tr>
+      <td>pause</td>
+      <td>string | boolean</td>
+      <td>"hover"</td>
+      <td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
+      <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
+    </tr>
+    <tr>
+      <td>ride</td>
+      <td>string</td>
+      <td>false</td>
+      <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
+    </tr>
+    <tr>
+      <td>wrap</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Whether the carousel should cycle continuously or have hard stops.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Methods
+
+{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
+#### `.carousel(options)`
+
+Initializes the carousel with an optional options `object` and starts cycling through items.
+
+{% highlight js %}
+$('.carousel').carousel({
+  interval: 2000
+})
+{% endhighlight %}
+
+#### `.carousel('cycle')`
+
+Cycles through the carousel items from left to right.
+
+#### `.carousel('pause')`
+
+Stops the carousel from cycling through items.
+
+#### `.carousel(number)`
+
+Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
+
+#### `.carousel('prev')`
+
+Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
+
+#### `.carousel('next')`
+
+Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
+
+### Events
+
+Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
+
+- `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`).
+- `relatedTarget`: The DOM element that is being slid into place as the active item.
+- `from`: The index of the current item
+- `to`: The index of the next item
+
+All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
+
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>slide.bs.carousel</td>
+      <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+    </tr>
+    <tr>
+      <td>slid.bs.carousel</td>
+      <td>This event is fired when the carousel has completed its slide transition.</td>
+    </tr>
+  </tbody>
+</table>
+
+{% highlight js %}
+$('#myCarousel').on('slide.bs.carousel', function () {
+  // do something…
+})
+{% endhighlight %}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>`
				`@ -0,0 +1 @@`
				<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>`
				`@ -0,0 +1 @@`
				`<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>`