7 files changed, 70 insertions, 118 deletions
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 77d090cbe..95e3a14c2 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -48,12 +48,25 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
 
 {% example html %}
-<a class="btn btn-secondary" href="#" role="button">Link</a>
-<button class="btn btn-secondary" type="submit">Button</button>
-<input class="btn btn-secondary" type="button" value="Input">
-<input class="btn btn-secondary" type="submit" value="Submit">
+<a class="btn btn-primary" href="#" role="button">Link</a>
+<button class="btn btn-primary" type="submit">Button</button>
+<input class="btn btn-primary" type="button" value="Input">
+<input class="btn btn-primary" type="submit" value="Submit">
 {% endexample %}
 
+## Outline buttons
+
+In need of a button, but not the hefty background colors they bring? Add the `.btn-outline` modifier class to remove all background images and colors on any button.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-outline">Primary</button>
+<button type="button" class="btn btn-secondary btn-outline">Secondary</button>
+<button type="button" class="btn btn-success btn-outline">Success</button>
+<button type="button" class="btn btn-warning btn-outline">Warning</button>
+<button type="button" class="btn btn-danger btn-outline">Danger</button>
+{% endexample %}
+
+
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 95a2c5992..bfb24bd28 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -15,7 +15,7 @@ Bootstrap provides several form control styles, layout options, and custom compo
 
 Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
 
-Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a `type` attribute** for proper rendering.
+Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**.
 
 {% example html %}
 <form>
@@ -79,7 +79,7 @@ Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a
       <input type="checkbox"> Check me out
     </label>
   </div>
-  <button type="submit" class="btn btn-secondary">Submit</button>
+  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 {% endexample %}
 
@@ -425,16 +425,6 @@ When you need to place plain text next to a form label within a form, use the `.
 </form>
 {% endexample %}
 
-## Focus state
-
-We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
-
-<div class="bd-example">
-  <form>
-    <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
-  </form>
-</div>
-
 ## Disabled states
 
 Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
@@ -534,6 +524,7 @@ Block level help text for form controls.
 
 Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
 
+{% comment %}
 {% callout warning %}
 #### Conveying validation state to assistive technologies and colorblind users
 
@@ -541,20 +532,22 @@ Using these validation styles to denote the state of a form control only provide
 
 Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
 {% endcallout %}
+{% endcomment %}
 
 {% example html %}
 <div class="form-group has-success">
   <label class="control-label" for="inputSuccess1">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess1">
+  <input type="text" class="form-control form-control-success" id="inputSuccess1">
 </div>
 <div class="form-group has-warning">
   <label class="control-label" for="inputWarning1">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning1">
+  <input type="text" class="form-control form-control-warning" id="inputWarning1">
 </div>
 <div class="form-group has-error">
   <label class="control-label" for="inputError1">Input with error</label>
-  <input type="text" class="form-control" id="inputError1">
+  <input type="text" class="form-control form-control-error" id="inputError1">
 </div>
+
 <div class="has-success">
   <div class="checkbox">
     <label>
@@ -581,100 +574,6 @@ Ensure that an alternative indication of state is also provided. For instance, y
 </div>
 {% endexample %}
 
-You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
-
-{% callout warning %}
-#### Icons, labels, and input groups
-
-Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
-{% endcallout %}
-
-{% example html %}
-<div class="form-group has-success has-feedback">
-  <label class="control-label" for="inputSuccess2">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
-  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
-  <span id="inputSuccess2Status" class="sr-only">(success)</span>
-</div>
-<div class="form-group has-warning has-feedback">
-  <label class="control-label" for="inputWarning2">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
-  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
-  <span id="inputWarning2Status" class="sr-only">(warning)</span>
-</div>
-<div class="form-group has-error has-feedback">
-  <label class="control-label" for="inputError2">Input with error</label>
-  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
-  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
-  <span id="inputError2Status" class="sr-only">(error)</span>
-</div>
-<div class="form-group has-success has-feedback">
-  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
-  <div class="input-group">
-    <span class="input-group-addon">@</span>
-    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
-  </div>
-  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
-  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
-</div>
-{% endexample %}
-
-{% example html %}
-<form class="form-horizontal">
-  <div class="form-group has-success has-feedback">
-    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
-    <div class="col-sm-9">
-      <input type="text" class="form-control" id="inputSuccess3">
-      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-    </div>
-  </div>
-  <br>
-  <div class="form-group has-success has-feedback">
-    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
-    <div class="col-sm-9">
-      <div class="input-group">
-        <span class="input-group-addon">@</span>
-        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
-      </div>
-      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
-      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
-    </div>
-  </div>
-</form>
-{% endexample %}
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group has-success has-feedback">
-    <label class="control-label" for="inputSuccess4">Input with success</label>
-    <input type="text" class="form-control" id="inputSuccess4">
-    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-  </div>
-</form>
-{% endexample %}
-
-{% example html %}
-<div class="form-group has-success has-feedback">
-  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
-  <div class="input-group">
-    <span class="input-group-addon">@</span>
-    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
-  </div>
-  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
-  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
-</div>
-{% endexample %}
-
-For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
-
-{% example html %}
-<div class="form-group has-success has-feedback">
-  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
-  <input type="text" class="form-control" id="inputSuccess5">
-  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-</div>
-{% endexample %}
-
 ## Custom forms
 
 For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
@@ -703,7 +602,7 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
 </label>
 {% endexample %}
 
-Custom checkboxes can also utilize the `:indeterminate` pseudo class.
+Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
 <div class="bd-example bd-example-indeterminate">
   <label class="c-input c-checkbox">
@@ -713,7 +612,7 @@ Custom checkboxes can also utilize the `:indeterminate` pseudo class.
   </label>
 </div>
 
-**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice:
+ If you're using jQuery, something like this should suffice:
 
 {% highlight js %}
 $('.your-checkbox').prop('indeterminate', true)
diff --git a/docs/components/images.md b/docs/components/images.md
index 3092c4a1a..03dce0a46 100644
--- a/docs/components/images.md
+++ b/docs/components/images.md
@@ -78,3 +78,14 @@ Align images with the [helper float classes](/components/helpers) or [text align
   <img src="..." class="img-rounded" alt="...">
 </div>
 {% endhighlight %}
+
+## Figures
+
+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.
+
+{% 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">A caption for the above image.</figcaption>
+</figure>
+{% endexample %}
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index a15c8d8fe..3532b3998 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -129,5 +129,4 @@ Add nearly any HTML within, even for linked list groups like the one below.
     <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
   </a>
 </div>
-</div>
 {% endexample %}
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 5cc988406..31ec2392c 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -4,7 +4,7 @@ title: Popovers
 group: components
 ---
 
-Add small overlays of content, like those found in iOS, to any element for housing secondary information.
+Add small overlay content, like those found in iOS, to any element for housing secondary information.
 
 ## Contents
 
@@ -23,6 +23,8 @@ Things to know when using the popover plugin:
 - Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
 - When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
 
+Got all that? Great, let's see how they work with some examples.
+
 ## Example: Enable popovers everywhere
 
 One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
@@ -35,6 +37,8 @@ $(function () {
 
 ## Example: Using the `container` option
 
+When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead.
+
 {% highlight js %}
 $(function () {
   $('.example-popover').popover(
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 2dfa5ae9b..43ed68bda 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -4,7 +4,7 @@ title: Tooltips
 group: components
 ---
 
-Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
+Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
 
 ## Contents
 
@@ -22,6 +22,8 @@ Things to know when using the popover plugin:
 - Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
 - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
 
+Got all that? Great, let's see how they work with some examples.
+
 ## Example: Enable popovers everywhere
 
 One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
diff --git a/docs/components/typography.md b/docs/components/typography.md
index 0ad328377..faeb3f22d 100644
--- a/docs/components/typography.md
+++ b/docs/components/typography.md
@@ -102,6 +102,30 @@ Create lighter, secondary text in any heading with a generic `<small>` tag or th
 <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
 {% endhighlight %}
 
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+<div class="bd-example bd-example-type">
+  <table class="table">
+    <tbody>
+      <tr>
+        <td><h1 class="display-4">Display 4</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-3">Display 3</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-2">Display 2</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-1">Display 1</h1></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
 ## Lead
 
 Make a paragraph stand out by adding `.lead`.