Merge branch 'v4-dev' into v4-navbars

10 files changed, 59 insertions, 76 deletions

diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index 147d9305e..d7ecd8cec 100644
--- a/docs/getting-started/accessibility.md
+++ b/docs/getting-started/accessibility.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Accessibility
+description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
 group: getting-started
 ---
 
@@ -22,10 +23,10 @@ In addition, groups and toolbars should be given an explicit label, as most assi
 
 ## Skip navigation
 
-If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
+If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
 
 {% callout danger %}
-Due to long-standing shortcomings/bugs in Chrome (see [issue 454172 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=454172 "Chromium bug tracker - Issue 454172: Focus Link Target (sequential focus navigation starting point)")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
+Due to long-standing shortcomings/bugs in Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
 
 In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
 
@@ -46,7 +47,7 @@ Note that this bug will also affect any other in-page links your site may be usi
 
 When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
 
-Learn more at [HTML CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
+Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
 
 ## Additional resources
 
diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md
index 1e67a16e7..c030a5ac6 100644
--- a/docs/getting-started/best-practices.md
+++ b/docs/getting-started/best-practices.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Best practices
+description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index 497553610..842092ccf 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Browsers and devices
+description: Learn which browsers and devices are supported by Bootstrap.
 group: getting-started
 ---
 
@@ -171,9 +172,10 @@ See [this StackOverflow question](https://stackoverflow.com/questions/6771258/wh
 
 ## Internet Explorer 10 in Windows Phone 8
 
-Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
+Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
 
 {% highlight js %}
+// Copyright 2014-2015 The Bootstrap Authors
 // Copyright 2014-2015 Twitter, Inc.
 // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
@@ -187,7 +189,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 }
 {% endhighlight %}
 
-For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
+For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
 
 As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
 
@@ -218,13 +220,7 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
 
 Even in some modern browsers, printing can be quirky.
 
-In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) and [Chrome bug #273306](https://bugs.chromium.org/p/chromium/issues/detail?id=273306) for some details. Suggested workarounds:
-
-* Embrace the extra-small grid and make sure your page looks acceptable under it.
-* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small.
-* Add custom media queries to change the grid size breakpoints for print media only.
-
-Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
+As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
 
 {% highlight css %}
 @media print {
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
index c086c036b..a6d0593fa 100644
--- a/docs/getting-started/build-tools.md
+++ b/docs/getting-started/build-tools.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Build tools
+description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
 group: getting-started
 ---
 
@@ -19,7 +20,7 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo
 When completed, you'll be able to run the various Grunt commands provided from the command line.
 
 [install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
-[gembundler]: http://bundler.io/
+[gembundler]: https://bundler.io/
 
 ## Using Grunt
 
@@ -29,7 +30,7 @@ Our Gruntfile includes the following commands and tasks:
 | --- | --- |
 | `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
 | `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
-| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
+| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
 | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
 | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
 
@@ -46,7 +47,7 @@ For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sa
 
 Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
 
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/autoprefixer-settings.json`](https://github.com/twbs/bootstrap/blob/master/grunt/autoprefixer-settings.js) for details.
+We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/master/grunt/postcss.js) for details.
 
 ## Local documentation
 
@@ -56,7 +57,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
 2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
 3. Open <http://localhost:9001> in your browser, and voilà.
 
-Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
+Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
 
 ## Troubleshooting
 
diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md
index ab9c63325..4f51ef049 100644
--- a/docs/getting-started/contents.md
+++ b/docs/getting-started/contents.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Contents
+description: Learn about what's included in Bootstrap's precompiled and source code directories.
 group: getting-started
 ---
 
@@ -12,7 +13,7 @@ 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. -->
 
-{% highlight bash %}
+{% highlight plaintext %}
 bootstrap/
 ├── css/
 │   ├── bootstrap.css
@@ -30,7 +31,7 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us
 
 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:
 
-{% highlight bash %}
+{% highlight plaintext %}
 bootstrap/
 ├── dist/
 │   ├── css/
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index 1fa524eb5..448afcad3 100644
--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@@ -1,36 +1,35 @@
 ---
 layout: docs
 title: Download
+description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
 group: getting-started
 ---
 
 **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.
 
-<div class="row m-t-2">
-  <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.
-
-{% comment %}
-<a href="{{ site.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
-{% endcomment %}
-<span class="text-muted">Coming soon!</span>
-{% endmarkdown %}
-  </div>
-  <div class="col-sm-6">
-{% markdown %}
+### Bootstrap CSS and JS
+
+**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
+
+<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
+
 ### Source files
-Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
+**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).
 
 <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>
+
+### Bootstrap CDN
+
+Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project.
+
+{% highlight html %}
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
+{% endhighlight %}
 
 ## 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.
+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, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions.
 
 {% callout warning %}
 **Heads up!** Not all package managers have the v4 alpha published yet, but we should have them up shortly!
@@ -41,7 +40,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
 Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
 
 {% highlight bash %}
-$ npm install bootstrap@{{ site.current_version }}
+npm install bootstrap@{{ site.current_version }}
 {% endhighlight %}
 
 `require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
@@ -53,7 +52,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
 
 ### RubyGems
 
-Install Bootstrap in your Ruby apps using [Bundler](http://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](http://bundler.io/gemfile.html):
+Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
 
 {% highlight ruby %}
 gem 'bootstrap', '~> 4.0.0.alpha3'
@@ -62,7 +61,7 @@ gem 'bootstrap', '~> 4.0.0.alpha3'
 Alternatively, if you're not using Bundler, you can install the gem by running this command:
 
 {% highlight bash %}
-$ gem install bootstrap -v 4.0.0.alpha3
+gem install bootstrap -v 4.0.0.alpha3
 {% endhighlight %}
 
 [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
@@ -70,7 +69,7 @@ $ gem install bootstrap -v 4.0.0.alpha3
 ### Meteor
 
 {% highlight bash %}
-$ meteor add twbs:bootstrap@={{ site.current_version }}
+meteor add twbs:bootstrap@={{ site.current_version }}
 {% endhighlight %}
 
 ### Composer
@@ -78,15 +77,15 @@ $ meteor add twbs:bootstrap@={{ site.current_version }}
 You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
 
 {% highlight bash %}
-$ composer require twbs/bootstrap
+composer require twbs/bootstrap:{{ site.current_version }}
 {% endhighlight %}
 
 ### Bower
 
-Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
+Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).
 
 {% highlight bash %}
-$ bower install bootstrap#v{{ site.current_version }}
+bower install bootstrap#v{{ site.current_version }}
 {% endhighlight %}
 
 ### NuGet
@@ -94,31 +93,11 @@ $ bower install bootstrap#v{{ site.current_version }}
 If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
 
 {% highlight powershell %}
-PM> Install-Package bootstrap -Pre
-PM> Install-Package bootstrap.sass -Pre
+Install-Package bootstrap -Pre
 {% endhighlight %}
 
-The `-Pre` is required until Bootstrap v4 has a stable release.
-
-## 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>
+{% highlight powershell %}
+Install-Package bootstrap.sass -Pre
+{% endhighlight %}
 
+The `-Pre` is required until Bootstrap v4 has a stable release.
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md
index f8ab4e8ae..f0acc3dcb 100644
--- a/docs/getting-started/flexbox.md
+++ b/docs/getting-started/flexbox.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Flexbox
+description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
 group: getting-started
 ---
 
@@ -19,7 +20,7 @@ Flexbox support is available for a number of Bootstrap's components:
 - Input groups, which move from `display: table;` to `display: flex;`.
 - The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`.
 
-Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt.
+Vendor prefixes are provided in our compiled CSS with [Autoprefixer](https://github.com/postcss/autoprefixer) via Grunt. Some bugs in IE10-11's Flexbox implementation are worked around via [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes).
 
 ## Why flexbox?
 
@@ -39,7 +40,7 @@ If you're familiar with modifying variables in Sass—or any other CSS preproces
 2. Change it from `false` to `true`.
 3. Recompile, and done!
 
-Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information.
+Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information.
 
 ## Browser support
 
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index 8cec71fd6..bb9f0ea5f 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Introduction
+description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
 group: getting-started
 redirect_from: "/getting-started/"
 ---
@@ -16,7 +17,7 @@ Here's how to quickly get started with the Bootstrap CDN and a template starter
 
 ## 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)
+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.
 
@@ -39,7 +40,7 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al
 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](http://stackoverflow.com/q/6771258))
+* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do))
 * And, utilizing the viewport meta tag.
 
 Put it all together and your pages should look like this:
@@ -67,7 +68,7 @@ Put it all together and your pages should look like this:
 </html>
 {% endhighlight %}
 
-That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview/) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
 
 ## Important globals
 
@@ -114,7 +115,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box
 
 ### Normalize.css
 
-For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
+For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
 
 ## Community
 
diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md
index debc4dcf5..b6a38fb7a 100644
--- a/docs/getting-started/javascript.md
+++ b/docs/getting-started/javascript.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: JavaScript
+description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index 8ed206888..81c9c92fc 100644
--- a/docs/getting-started/options.md
+++ b/docs/getting-started/options.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Customization options
+description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
 group: getting-started
 ---
 
@@ -37,4 +38,4 @@ You can find and customize these variables for key global options in our `_varia
 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components.      |
 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                                |
 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                                    |
-| `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g. `.col-md-1` etc.).     |
+| `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |