Merge remote-tracking branch 'twbs/v4-dev' into patch-1

Conflicts:
	scss/_custom-forms.scss
	scss/_variables.scss

1 files changed, 37 insertions, 7 deletions

diff --git a/docs/content/typography.md b/docs/content/typography.md
index 082a87ec9..e97593e2e 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -85,26 +85,26 @@ Traditional heading elements are designed to work best in the meat of your page
   <table class="table">
     <tbody>
       <tr>
-        <td><h1 class="display-4">Display 4</h1></td>
+        <td><h1 class="display-1">Display 1</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-3">Display 3</h1></td>
+      <td><h1 class="display-2">Display 2</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-2">Display 2</h1></td>
+      <td><h1 class="display-3">Display 3</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-1">Display 1</h1></td>
+      <td><h1 class="display-4">Display 4</h1></td>
       </tr>
     </tbody>
   </table>
 </div>
 
 {% highlight html %}
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-2">Display 2</h1>
 <h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
 {% endhighlight %}
 
 ## Lead
@@ -235,3 +235,33 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
+
+## Responsive typography
+
+*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+
+Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
+
+{% highlight scss %}
+html {
+  font-size: 14px;
+}
+
+@include media-breakpoint-up(sm) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  html {
+    font-size: 28px;
+  }
+}
+{% endhighlight %}