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

8 files changed, 90 insertions, 22 deletions

diff --git a/docs/4.0/examples/.stylelintrc b/docs/4.0/examples/.stylelintrc
new file mode 100644
index 000000000..44cf7c0e0
--- /dev/null
+++ b/docs/4.0/examples/.stylelintrc
@@ -0,0 +1,12 @@
+{
+  "extends": "../../../build/.stylelintrc",
+  "rules": {
+    "at-rule-no-vendor-prefix": null,
+    "comment-empty-line-before": null,
+    "media-feature-name-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-qualifying-type": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null
+  }
+}
diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css
index 6eda0a7b1..0f319ec92 100644
--- a/docs/4.0/examples/blog/blog.css
+++ b/docs/4.0/examples/blog/blog.css
@@ -13,12 +13,18 @@ body {
   color: #555;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: #333;
diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css
index a59005148..ca7135b08 100644
--- a/docs/4.0/examples/dashboard/dashboard.css
+++ b/docs/4.0/examples/dashboard/dashboard.css
@@ -27,18 +27,12 @@ h1 {
   bottom: 0;
   left: 0;
   z-index: 1000;
-  padding: 20px;
+  padding: 20px 0;
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
   border-right: 1px solid #eee;
 }
 
-/* Sidebar navigation */
-.sidebar {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 .sidebar .nav {
   margin-bottom: 20px;
 }
diff --git a/docs/4.0/getting-started/contents.md b/docs/4.0/getting-started/contents.md
index 96acbc053..3d5389fee 100644
--- a/docs/4.0/getting-started/contents.md
+++ b/docs/4.0/getting-started/contents.md
@@ -18,7 +18,15 @@ bootstrap/
 │   ├── bootstrap.css
 │   ├── bootstrap.css.map
 │   ├── bootstrap.min.css
-│   └── bootstrap.min.css.map
+│   ├── bootstrap.min.css.map
+│   ├── bootstrap-grid.css
+│   ├── bootstrap-grid.css.map
+│   ├── bootstrap-grid.min.css
+│   ├── bootstrap-grid.min.css.map
+│   ├── bootstrap-reboot.css
+│   ├── bootstrap-reboot.css.map
+│   ├── bootstrap-reboot.min.css
+│   └── bootstrap-reboot.min.css.map
 └── js/
     ├── bootstrap.js
     └── bootstrap.min.js
@@ -26,6 +34,52 @@ bootstrap/
 
 This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
 
+### Comparison of CSS files
+
+<table class="table table-bordered table-responsive">
+  <thead>
+    <tr>
+      <th scope="col">CSS files</th>
+      <th scope="col" class="text-center">Layout</th>
+      <th scope="col" class="text-center">Content</th>
+      <th scope="col" class="text-center">Components</th>
+      <th scope="col" class="text-center">Utilities</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap.css</code></div>
+        <div><code class="text-nowrap">bootstrap.min.css</code></div>
+      </th>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+      <td class="table-success text-center align-middle">All</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap-grid.css</code></div>
+        <div><code class="text-nowrap">bootstrap-grid.min.css</code></div>
+      </th>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/">grid</a> system</td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/">flex</a> utilities</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        <div><code class="text-nowrap">bootstrap-reboot.css</code></div>
+        <div><code class="text-nowrap">bootstrap-reboot.min.css</code></div>
+      </th>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-warning text-center align-middle">Only <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/">Reboot</a></td>
+      <td class="table-danger text-center align-middle">No</td>
+      <td class="table-danger text-center align-middle">No</td>
+    </tr>
+  </tbody>
+</table>
+
 ## Bootstrap source code
 
 The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md
index cce660178..9f1199317 100644
--- a/docs/4.0/getting-started/download.md
+++ b/docs/4.0/getting-started/download.md
@@ -10,7 +10,7 @@ toc: true
 
 Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}** to easily drop into your project, which includes:
 
-- Compiled and minified CSS bundles (default, grid-only, and Reboot-only)
+- Compiled and minified CSS bundles (see [CSS files comparison]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#comparison-of-css-files))
 - Compiled and minified JavaScript plugins
 
 This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index c4c50dc4b..15c5caa0b 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -228,17 +228,19 @@ Within `_variables.scss`, you'll find our color variables and Sass map. Here's a
 
 {% highlight scss %}
 $colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
   "red": $red,
   "orange": $orange,
   "yellow": $yellow,
   "green": $green,
   "teal": $teal,
-  "blue": $blue,
-  "pink": $pink,
-  "purple": $purple,
+  "cyan": $cyan,
   "white": $white,
   "gray": $gray-600,
-  "gray-dark": $gray-900
+  "gray-dark": $gray-800
 ) !default;
 {% endhighlight %}
 
diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index ca608477b..9e81dd913 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -149,9 +149,9 @@ For example, here are two grid layouts that apply to every device and viewport,
 {% endexample %}
 </div>
 
-Equal-width columns can be broken into multiple lines, but there is a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevents this from working without an explicit `flex-basis` or `border`. Our example works thanks to the `border` being set; you can do the same with `.col { border: 1px solid transparent; }`. Alternatively, you can set the flex-basis to the width of the column (e.g., `.col { flex: 1 0 50%; }`).
+Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevented this from working without an explicit `flex-basis` or `border`.
 
-Both these fixes have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor).
+Two workarounds have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor), though if the browser is up to date this shouldn't be necessary.
 
 <div class="bd-example-row">
 {% example html %}
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 7c70c7221..8a0d3d3fa 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -69,7 +69,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
   - [Octicons](https://octicons.github.com/)
   - [Font Awesome](http://fontawesome.io/)
   - See the [Extend page]({{ site.baseurl }}/docs/{{ site.docs_version }}/extend/icons/) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
-- Dropped the Affix jQuery plugin.
+- **Dropped the Affix jQuery plugin.**
   - We recommend using `position: sticky` instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)/
   - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
 - **Dropped the pager component** as it was essentially slightly customized buttons.