Merge branch 'v4' into force-expanded

5 files changed, 148 insertions, 74 deletions

diff --git a/docs/getting-started/support.md b/docs/getting-started/browsers-devices.md
index 3712214fb..83cd83566 100644
--- a/docs/getting-started/support.md
+++ b/docs/getting-started/browsers-devices.md
@@ -1,10 +1,10 @@
 ---
 layout: page
-title: Supported platforms
+title: Browsers and devices
 group: getting-started
 ---
 
-Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
+Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs.
 
 ## Contents
 
@@ -15,6 +15,10 @@ Bootstrap is built to work best with the latest techniques. As such, older deskt
 
 Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11**. More specific support information is provided below.
 
+### Mobile devices
+
+Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers.
+
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
     <thead>
@@ -22,7 +26,6 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
         <td></td>
         <th>Chrome</th>
         <th>Firefox</th>
-        <th>Internet Explorer</th>
         <th>Opera</th>
         <th>Safari</th>
         <th>Android Browser &amp; WebView</th>
@@ -33,10 +36,9 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
         <th scope="row">Android</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
-        <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
         <td class="text-danger">Not supported</td>
         <td class="text-muted">N/A</td>
-        <td class="text-success">Android v5.0+<br>supported</td>
+        <td class="text-success">Android v5.0+ supported</td>
       </tr>
       <tr>
         <th scope="row">iOS</th>
@@ -46,13 +48,34 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
         <td class="text-success">Supported</td>
         <td class="text-muted">N/A</td>
       </tr>
+    </tbody>
+  </table>
+</div>
+
+### Desktop browsers
+
+Similarly, the latest versions of most desktop browsers are supported.
+
+<div class="table-responsive">
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <td></td>
+        <th>Chrome</th>
+        <th>Firefox</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+    </thead>
+    <tbody>
       <tr>
-        <th scope="row">Mac OS X</th>
+        <th scope="row">Mac</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
+        <td class="text-muted">N/A</td>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
-        <td class="text-muted">N/A</td>
       </tr>
       <tr>
         <th scope="row">Windows</th>
@@ -61,7 +84,6 @@ Bootstrap supports the **latest, stable releases** of all major browsers and pla
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-danger">Not supported</td>
-        <td class="text-muted">N/A</td>
       </tr>
     </tbody>
   </table>
@@ -114,12 +136,14 @@ Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3
 
 As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
 
-Alternatively, you can add the some third party JavaScript to backfill support for the browser. You'll need the following:
+Alternatively, you may add some third party JavaScript to backfill support for IE8 to Bootstrap 4. You'll need the following:
 
 * [The HTML5 shiv](http://en.wikipedia.org/wiki/HTML5_Shiv)
 * [Respond.js](https://github.com/scottjehl/Respond)
 * [Rem unit polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill)
 
+No support will be provided for this, though you may find some help from the community in [our Slack channel]({{ site.slack }}).
+
 ## IE Compatibility modes
 
 Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate `<meta>` tag in your pages:
diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md
index 9fb6a6ced..999a9b8a8 100644
--- a/docs/getting-started/contents.md
+++ b/docs/getting-started/contents.md
@@ -4,22 +4,11 @@ title: Contents
 group: getting-started
 ---
 
-Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
-
-{% callout warning %}
-#### jQuery required
-
-Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
-{% endcallout %}
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
+Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor's contents and structure below. Remember, no matter the implementation flavor, **Bootstrap's JavaScript plugins require jQuery**.
 
 ## Precompiled Bootstrap
 
-Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
+Once downloaded, unzip the compressed folder and you'll see something like this:
 
 <!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
 
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index e5f3372a7..c718fbc83 100644
--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@@ -4,58 +4,40 @@ title: Download
 group: getting-started
 ---
 
-Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
+**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
 
-## Contents
+<div class="row m-t-md">
+  <div class="col-sm-6">
+{% markdown %}
+### Compiled
+Download just the compiled and minified CSS and JavaScript. Doesn't include any documentation or original source files.
 
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Custom builds
-
-Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
-
-<div class="row">
-  <div class="col-sm-4">
-    <h3>Reboot</h3>
-    <p>Includes variables/mixins, Normalize, and Reboot. No JavaScript.</p>
-    <a class="btn btn-primary" href="#">Download</a>
-  </div>
-  <div class="col-sm-4">
-    <h3>Grid only</h3>
-    <p>Includes variables/mixins and our grid system. No JavaScript.</p>
-    <a class="btn btn-primary" href="#">Download</a>
+<a href="{{ site.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
+{% endmarkdown %}
   </div>
-  <div class="col-sm-4">
-    <h3>Flexbox</h3>
-    <p>All of Bootstrap, with flexbox support enabled and <strong>lower browser support</strong>.</p>
-    <a class="btn btn-primary" href="#">Download</a>
+  <div class="col-sm-6">
+{% markdown %}
+### Source files
+Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup](../compiling).**
+
+<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+{% endmarkdown %}
   </div>
 </div>
 
-## Precompiled
-
-Compiled and minified CSS and JavaScript. No docs or original source files are included.
-
-<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
-
-## Download source and docs
-
-Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
-
-<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
-
 ## Package managers
 
+Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+
 ### Bower
 
-You can also install and manage Bootstrap's Sass, CSS, and JavaScript using [Bower](http://bower.io).
+Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
 
 {% highlight bash %}$ bower install bootstrap{% endhighlight %}
 
 ### npm
 
-Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstrap). Install it into your Node powered apps with:
+Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
 
 {% highlight bash %}$ npm install bootstrap{% endhighlight %}
 
@@ -74,12 +56,31 @@ $ meteor add twbs:bootstrap
 
 ### Composer
 
-You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using [Composer](https://getcomposer.org):
+You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
 
 {% highlight bash %}
 $ composer require twbs/bootstrap
 {% endhighlight %}
 
-## Autoprefixer required
 
-Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its source Sass and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this as Autoprefixer is already integrated into our Gruntfile.
+## Custom builds
+
+Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
+
+<div class="row">
+  <div class="col-sm-4">
+    <h3>Reboot</h3>
+    <p>Includes variables/mixins, Normalize, and Reboot. No JavaScript.</p>
+    <a class="btn btn-bs btn-outline" href="#">Download</a>
+  </div>
+  <div class="col-sm-4">
+    <h3>Grid only</h3>
+    <p>Includes variables/mixins and our grid system. No JavaScript.</p>
+    <a class="btn btn-bs btn-outline" href="#">Download</a>
+  </div>
+  <div class="col-sm-4">
+    <h3>Flexbox</h3>
+    <p>All of Bootstrap with flexbox enabled and <strong>lower browser support</strong>.</p>
+    <a class="btn btn-bs btn-outline" href="#">Download</a>
+  </div>
+</div>
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
new file mode 100644
index 000000000..5197102c4
--- /dev/null
+++ b/docs/getting-started/introduction.md
@@ -0,0 +1,62 @@
+---
+layout: page
+title: Introduction
+group: getting-started
+---
+
+Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
+
+Here's how to quickly get started with the Bootstrap CDN and a template starter page.
+
+## Quick start
+
+Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
+
+Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
+
+{% highlight html %}
+<link rel="stylesheet" href="{{ site.cdn.css }}">
+{% endhighlight %}
+
+Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
+
+{% highlight html %}
+<script src="{{ site.cdn.jquery }}"></script>
+<script src="{{ site.cdn.js }}"></script>
+{% endhighlight %}
+
+And that's it—you're your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
+
+## Starter template
+
+Be sure to have your pages set up with the latest design and development standards. That means:
+
+* Using an HTML5 doctype
+* Forcing Internet Explorer to use its latest rendering mode ([read more]())
+* And, utilizing the viewport meta tag.
+
+Put it all together and your pages should look like this:
+
+{% highlight html %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="{{ site.cdn.css }}">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+
+    <!-- jQuery first, then Bootstrap JS. -->
+    <script src="{{ site.cdn.jquery }}"></script>
+    <script src="{{ site.cdn.js }}"></script>
+  </body>
+</html>
+{% endhighlight %}
+
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) or [our official examples](../examples/) to start laying out your site's content and components.
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 84dc5c712..c5a6c4822 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -1,30 +1,26 @@
 ---
 layout: page
-title: Start using Bootstrap
+title: Quick start
 group: getting-started
 ---
 
-Quickly add Bootstrap to your project via the Bootstrap CDN, graciously provided by the MaxCDN folks.
+Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
 
-## Include CSS and JS
-
-Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
-
-<div class="alert alert-warning">
-  <strong>Heads up!</strong> Much of this page will be inaccurate during the v4 alpha releases.
-</div>
+Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
 
 {% highlight html %}
 <link rel="stylesheet" href="{{ site.cdn.css }}">
 {% endhighlight %}
 
-Then, add the Bootstrap JavaScript—and jQuery—near the end of your pages. It's best placed right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
+Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
 
 {% highlight html %}
 <script src="{{ site.cdn.jquery }}"></script>
 <script src="{{ site.cdn.js }}"></script>
 {% endhighlight %}
 
+And that's it—you're your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
+
 ## Page template
 
 Be sure to have your pages set up with the latest design and development standards. That means:
@@ -40,16 +36,18 @@ Put it all together and your pages should look like this:
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="{{ site.cdn.css }}">
   </head>
   <body>
     <h1>Hello, world!</h1>
 
+    <!-- jQuery first, then Bootstrap JS. -->
     <script src="{{ site.cdn.jquery }}"></script>
     <script src="{{ site.cdn.js }}"></script>
   </body>
 </html>
 {% endhighlight %}
 
-And that's it. Happy Bootstrapping!
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) to start laying out your site's content before adding components.