Merge branch 'v4-dev' into v4-forms-cleanup

14 files changed, 273 insertions, 151 deletions

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index c269c3d8f..56e8b089c 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -30,6 +30,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
@@ -57,7 +60,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
 <div class="alert alert-success" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-  <p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
+  <p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
 {% endexample %}
 
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 391c96311..d5aa453d7 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
-
-Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
 ## Button tags
 
@@ -61,7 +58,7 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 
 ## Outline buttons
 
-In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-*-outline` ones to remove all background images and colors on any button.
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
 {% example html %}
 <button type="button" class="btn btn-outline-primary">Primary</button>
diff --git a/docs/components/card.md b/docs/components/card.md
index 53580d667..b53d2e39a 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -362,6 +362,9 @@ Cards include their own variant classes for quickly changing the `background-col
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Outline variants
 
 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 5e153d596..09d518a60 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -45,8 +45,6 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
 </div>
 {% endexample %}
 
-
-
 ## Alignment
 
 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
@@ -55,11 +53,18 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 **Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.
 {% endcallout %}
 
-{% highlight html %}
-<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
-  ...
+{% example html %}
+<div class="btn-group">
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    This dropdown's menu is right-aligned
+  </button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button">Something else here</button>
+  </div>
 </div>
-{% endhighlight %}
+{% endexample %}
 
 ## Menu headers
 
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 907bad705..14921b210 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
 
 {% example html %}
 <form>
-  <fieldset class="form-group">
+  <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
     <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="exampleSelect1">Example select</label>
     <select class="form-control" id="exampleSelect1">
       <option>1</option>
@@ -37,8 +37,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
       <option>4</option>
       <option>5</option>
     </select>
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="exampleSelect2">Example multiple select</label>
     <select multiple class="form-control" id="exampleSelect2">
       <option>1</option>
@@ -47,34 +47,37 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
       <option>4</option>
       <option>5</option>
     </select>
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="exampleTextarea">Example textarea</label>
     <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="exampleInputFile">File input</label>
     <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
     <small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
-  </fieldset>
-  <div class="radio">
-    <label>
-      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-      Option one is this and that&mdash;be sure to include why it's great
-    </label>
-  </div>
-  <div class="radio">
-    <label>
-      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-      Option two can be something else and selecting it will deselect option one
-    </label>
-  </div>
-  <div class="radio disabled">
-    <label>
-      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
-      Option three is disabled
-    </label>
   </div>
+  <fieldset class="form-group">
+    <legend>Radio buttons</legend>
+    <div class="radio">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+        Option one is this and that&mdash;be sure to include why it's great
+      </label>
+    </div>
+    <div class="radio">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="radio disabled">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+        Option three is disabled
+      </label>
+    </div>
+  </fieldset>
   <div class="checkbox">
     <label>
       <input type="checkbox"> Check me out
@@ -258,14 +261,14 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
 
 {% example html %}
 <form>
-  <fieldset class="form-group">
+  <div class="form-group">
     <label for="formGroupExampleInput">Example label</label>
     <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
-  </fieldset>
-  <fieldset class="form-group">
+  </div>
+  <div class="form-group">
     <label for="formGroupExampleInput2">Another label</label>
     <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
-  </fieldset>
+  </div>
 </form>
 {% endexample %}
 
@@ -330,11 +333,16 @@ Because of this, you may need to manually address the width and alignment of ind
 </form>
 {% endexample %}
 
+{% callout warning %}
+ #### Alternatives to hidden labels
+ Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
+ {% endcallout %}
+
 ### Using the Grid
 
 For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
 
-Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels.
+Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.form-control-legend` to make them appear similar to regular `<label>` elements.
 
 {% example html %}
 <div class="container">
@@ -351,29 +359,27 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
         <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
       </div>
     </div>
-    <div class="form-group row">
-      <label class="col-sm-2">Radios</label>
-      <div class="col-sm-10">
-        <div class="radio">
-          <label>
-            <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
-            Option one is this and that&mdash;be sure to include why it's great
-          </label>
-        </div>
-        <div class="radio">
-          <label>
-            <input type="radio" name="gridRadios" id="gridRadios2" value="option2">
-            Option two can be something else and selecting it will deselect option one
-          </label>
-        </div>
-        <div class="radio disabled">
-          <label>
-            <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
-            Option three is disabled
-          </label>
-        </div>
+    <fieldset class="form-group">
+      <legend>Radio buttons</legend>
+      <div class="radio">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+          Option one is this and that&mdash;be sure to include why it's great
+        </label>
       </div>
-    </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+          Option two can be something else and selecting it will deselect option one
+        </label>
+      </div>
+      <div class="radio disabled">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+          Option three is disabled
+        </label>
+      </div>
+    </fieldset>
     <div class="form-group row">
       <label class="col-sm-2">Checkbox</label>
       <div class="col-sm-10">
@@ -385,8 +391,8 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
       </div>
     </div>
     <div class="form-group row">
-      <div class="col-sm-offset-2 col-sm-10">
-        <button type="submit" class="btn btn-secondary">Sign in</button>
+      <div class="offset-sm-2 col-sm-10">
+        <button type="submit" class="btn btn-primary">Sign in</button>
       </div>
     </div>
   </form>
@@ -487,17 +493,17 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
 
 ### Without labels
 
-Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
+Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
 
 {% example html %}
 <div class="checkbox">
   <label>
-    <input type="checkbox" id="blankCheckbox" value="option1">
+    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
   </label>
 </div>
 <div class="radio">
   <label>
-    <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
   </label>
 </div>
 {% endexample %}
@@ -805,6 +811,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
 </label>
 {% endexample %}
 
+#### Validation states
+
+Add other states to your custom forms with our validation classes.
+
+{% example html %}
+<div class="form-group has-success">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+<div class="form-group has-warning">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+<div class="form-group has-danger m-b-0">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+{% endexample %}
 
 #### Stacked
 
@@ -860,3 +893,22 @@ Here's how it works:
 - We declare a `height` on the `<input>` for proper spacing for surrounding content.
 
 In other words, it's an entirely custom element, all generated via CSS.
+
+#### Translating or customizing the strings
+
+The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
+
+{% highlight scss %}
+$custom-file-text: (
+  placeholder: (
+    en: "Choose file...",
+    es: "Seleccionar archivo..."
+  ),
+  button-label: (
+    en: "Browse",
+    es: "Navegar"
+  )
+);
+{% endhighlight %}
+
+You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
diff --git a/docs/components/label.md b/docs/components/label.md
deleted file mode 100644
index e1495201c..000000000
--- a/docs/components/label.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: docs
-title: Labels
-group: components
----
-
-Small and adaptive tag for adding context to just about any content.
-
-## Example
-
-Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units.
-
-{% example html %}
-<h1>Example heading <span class="label label-default">New</span></h1>
-<h2>Example heading <span class="label label-default">New</span></h2>
-<h3>Example heading <span class="label label-default">New</span></h3>
-<h4>Example heading <span class="label label-default">New</span></h4>
-<h5>Example heading <span class="label label-default">New</span></h5>
-<h6>Example heading <span class="label label-default">New</span></h6>
-{% endexample %}
-
-## Contextual variations
-
-Add any of the below mentioned modifier classes to change the appearance of a label.
-
-{% example html %}
-<span class="label label-default">Default</span>
-<span class="label label-primary">Primary</span>
-<span class="label label-success">Success</span>
-<span class="label label-info">Info</span>
-<span class="label label-warning">Warning</span>
-<span class="label label-danger">Danger</span>
-{% endexample %}
-
-## Pill labels
-
-Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
-
-{% example html %}
-<span class="label label-pill label-default">Default</span>
-<span class="label label-pill label-primary">Primary</span>
-<span class="label label-pill label-success">Success</span>
-<span class="label label-pill label-info">Info</span>
-<span class="label label-pill label-warning">Warning</span>
-<span class="label label-pill label-danger">Danger</span>
-{% endexample %}
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index c3d466d5f..8b3b9cd88 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p
 </ul>
 {% endexample %}
 
-## Labels
+## Tags
 
-Add labels to any list group item to show unread counts, activity, etc.
+Add tags to any list group item to show unread counts, activity, etc.
 
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">14</span>
+    <span class="tag tag-default tag-pill pull-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">2</span>
+    <span class="tag tag-default tag-pill pull-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">1</span>
+    <span class="tag tag-default tag-pill pull-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>
@@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Custom content
 
 Add nearly any HTML within, even for linked list groups like the one below.
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 1bbcd3fbf..f3c29dac6 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -34,7 +34,7 @@ Always try to place a modal's HTML code in a top-level position in your document
 {% callout warning %}
 #### Mobile device caveats
 
-There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-navbars-and-virtual-keyboards) for details.
+There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
 {% endcallout %}
 
 ### Static example
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 727189083..a723f33e3 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -265,7 +265,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
       </tr>
       <tr>
-        <td>offsets</td>
+        <td>offset</td>
         <td>string</td>
         <td>'0 0'</td>
         <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 480da4903..57028c972 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -13,12 +13,24 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
 
 ### Example
 
+To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
+
 {% example html %}
-<progress class="progress" value="0" max="100">0%</progress>
-<progress class="progress" value="25" max="100">25%</progress>
-<progress class="progress" value="50" max="100">50%</progress>
-<progress class="progress" value="75" max="100">75%</progress>
-<progress class="progress" value="100" max="100">100%</progress>
+
+<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
+<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
+
+<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
+<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
+
+<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
+<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
+
+<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
+<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
+
+<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
+<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
 {% endexample %}
 
 ### IE9 support
@@ -26,9 +38,10 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
 Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
 
 {% example html %}
-<progress class="progress" value="25" max="100">
+<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
+<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
   <div class="progress">
-    <span class="progress-bar" style="width: 25%;">25%</span>
+    <span class="progress-bar" style="width: 25%;"></span>
   </div>
 </progress>
 {% endexample %}
@@ -38,10 +51,10 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
 Progress bars use some of the same button and alert classes for consistent styles.
 
 {% example html %}
-<progress class="progress progress-success" value="25" max="100">25%</progress>
-<progress class="progress progress-info" value="50" max="100">50%</progress>
-<progress class="progress progress-warning" value="75" max="100">75%</progress>
-<progress class="progress progress-danger" value="100" max="100">100%</progress>
+<progress class="progress progress-success" value="25" max="100"></progress>
+<progress class="progress progress-info" value="50" max="100"></progress>
+<progress class="progress progress-warning" value="75" max="100"></progress>
+<progress class="progress progress-danger" value="100" max="100"></progress>
 {% endexample %}
 
 ### Striped
@@ -49,11 +62,11 @@ Progress bars use some of the same button and alert classes for consistent style
 Uses a gradient to create a striped effect.
 
 {% example html %}
-<progress class="progress progress-striped" value="10" max="100">10%</progress>
-<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
-<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
-<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
-<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
+<progress class="progress progress-striped" value="10" max="100"></progress>
+<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
+<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
+<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
+<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
 {% endexample %}
 
 ### Animated stripes
@@ -63,12 +76,12 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres
 **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
 
 <div class="bd-example">
-  <progress class="progress progress-striped" value="25" max="100">25%</progress>
+  <progress class="progress progress-striped" value="25" max="100"></progress>
   <button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>
 
 {% highlight html %}
-<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
+<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
 {% endhighlight %}
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 4ae0fa219..622469aa1 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -14,7 +14,7 @@ group: components
 The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
 
 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-default" role="navigation">
+  <nav id="navbar-example2" class="navbar navbar-default">
     <h3 class="navbar-brand">Project Name</h3>
     <ul class="nav nav-pills">
       <li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
diff --git a/docs/components/tag.md b/docs/components/tag.md
new file mode 100644
index 000000000..09608931a
--- /dev/null
+++ b/docs/components/tag.md
@@ -0,0 +1,49 @@
+---
+layout: docs
+title: Tags
+group: components
+---
+
+Small and adaptive tag for adding context to just about any content.
+
+## Example
+
+Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+{% example html %}
+<h1>Example heading <span class="tag tag-default">New</span></h1>
+<h2>Example heading <span class="tag tag-default">New</span></h2>
+<h3>Example heading <span class="tag tag-default">New</span></h3>
+<h4>Example heading <span class="tag tag-default">New</span></h4>
+<h5>Example heading <span class="tag tag-default">New</span></h5>
+<h6>Example heading <span class="tag tag-default">New</span></h6>
+{% endexample %}
+
+## Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a tag.
+
+{% example html %}
+<span class="tag tag-default">Default</span>
+<span class="tag tag-primary">Primary</span>
+<span class="tag tag-success">Success</span>
+<span class="tag tag-info">Info</span>
+<span class="tag tag-warning">Warning</span>
+<span class="tag tag-danger">Danger</span>
+{% endexample %}
+
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
+## Pill tags
+
+Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+
+{% example html %}
+<span class="tag tag-pill tag-default">Default</span>
+<span class="tag tag-pill tag-primary">Primary</span>
+<span class="tag tag-pill tag-success">Success</span>
+<span class="tag tag-pill tag-info">Info</span>
+<span class="tag tag-pill tag-warning">Warning</span>
+<span class="tag tag-pill tag-danger">Danger</span>
+{% endexample %}
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 204c2ddaa..fb8cb24dd 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -229,7 +229,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
       </tr>
       <tr>
-        <td>offsets</td>
+        <td>offset</td>
         <td>string</td>
         <td>'0 0'</td>
         <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index b67221119..350345cff 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -39,6 +39,8 @@ Where *size* is one of:
 * `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
 * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
 
+(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+
 Here are some representative examples of these classes:
 
 {% highlight scss %}
@@ -160,11 +162,38 @@ Similar to the contextual text color classes, easily set the background of an el
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
 {% endcallout %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
-Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
-{% endcallout %}
+## Widths
+
+Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`.
+
+{% example html %}
+<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
+{% endexample %}
+
+## CSS `display` (`block`, `inline`, `inline-block`)
+
+Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
+
+To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead.
+
+{% example html %}
+<div class="d-inline bg-success">Inline</div>
+<div class="d-inline bg-success">Inline</div>
+
+<span class="d-block bg-primary">Block</span>
+
+<div class="d-inline-block bg-warning">
+  <h3>inline-block</h3>
+  Boot that strap!
+</div>
+<div class="d-inline-block bg-warning">
+  <h3>inline-block</h3>
+  Strap that boot!
+</div>
+{% endexample %}
 
 ## Close icon
 
@@ -230,6 +259,20 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
 }
 {% endhighlight %}
 
+## Fixed positioning
+
+The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined:
+
+{% highlight scss %}
+.pos-f-t {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+}
+{% endhighlight %}
+
 ## Invisible content
 
 The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.