5 files changed, 47 insertions, 17 deletions
diff --git a/docs/content/figures.md b/docs/content/figures.md
index d8e2435fe..d57270518 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -6,11 +6,11 @@ group: content
 
 Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
 
-Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
+Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
 
 {% example html %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}
@@ -19,7 +19,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 
 {% example html %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
-  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
+  <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}
diff --git a/docs/content/images.md b/docs/content/images.md
index 1f9abc982..38a855a09 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -26,7 +26,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 {% callout warning %}
 #### SVG images and IE 9-10
 
-In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
+In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
 {% endcallout %}
 
 ## Image shapes
@@ -50,13 +50,13 @@ Add classes to an `<img>` element to easily style images in any project.
 Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded pull-left" alt="...">
-<img src="..." class="img-rounded pull-right" alt="...">
+<img src="..." class="img-rounded pull-xs-left" alt="...">
+<img src="..." class="img-rounded pull-xs-right" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <div class="text-center">
+  <div class="text-xs-center">
     <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
   </div>
 </div>
 
 {% highlight html %}
-<div class="text-center">
+<div class="text-xs-center">
   <img src="..." class="img-rounded" alt="...">
 </div>
 {% endhighlight %}
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index 076a3752f..9631a86b6 100644
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -166,7 +166,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
 - `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
-- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout.
+- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
 
 These changes, and more, are demonstrated below.
 
@@ -272,7 +272,7 @@ The `<address>` element is updated to reset the browser default `font-style` fro
 The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
 
 <div class="bd-example">
-  <blockquote>
+  <blockquote class="blockquote">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
   </blockquote>
@@ -280,8 +280,38 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
 
 ### Inline elements
 
-The `<abbr>` element receives basic styling to make it stand the amongst paragraph text.
+The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
 
 <div class="bd-example">
   Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
 </div>
+
+## HTML5 `[hidden]` attribute
+
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem.
+
+{% highlight html %}
+<input type="text" hidden>
+{% endhighlight %}
+
+{% callout warning %}
+#### jQuery incompatibility
+
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{% endcallout %}
+
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.
+
+## Click delay optimization for touch
+
+Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive.
+
+Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) – though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) – and IE11 on Windows Phone 8.1.
+
+On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here.
+
+To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.
+
+In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
+
+For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 1c58638a7..80bbbf854 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -451,7 +451,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 {% callout warning %}
 #### Firefox and fieldsets
 
-Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
+Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we **don't** provide in Bootstrap:
 
 {% highlight css %}
 @-moz-document url-prefix() {
diff --git a/docs/content/typography.md b/docs/content/typography.md
index e97593e2e..bc2a85c63 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -15,11 +15,11 @@ Bootstrap includes simple and easily customized typography for headings, body te
 
 Bootstrap sets basic global display, typography, and link styles. Specifically, we:
 
-- Set `background-color: #fff;` on the `<body>`
+- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default)
 - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base
 - Set the global link color via `$link-color` and apply link underlines only on `:hover`
 
-These styles can be found within `_reboot.scss`.
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.
 
 
 ## Headings