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

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

14 files changed, 93 insertions, 88 deletions

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 5f7886303..c14d3d63a 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -68,19 +68,12 @@ Instead of applying button sizing classes to every button in a group, just add `
     <button type="button" class="btn btn-secondary">Middle</button>
     <button type="button" class="btn btn-secondary">Right</button>
   </div>
-  <br>
-  <div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
-    <button type="button" class="btn btn-secondary">Left</button>
-    <button type="button" class="btn btn-secondary">Middle</button>
-    <button type="button" class="btn btn-secondary">Right</button>
-  </div>
 </div>
 
 {% highlight html %}
 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
 <div class="btn-group" role="group" aria-label="...">...</div>
 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
-<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}
 
 ## Nesting
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 664c8f57b..0ca8c0e08 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -26,6 +26,9 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 <!-- Indicates a successful or positive action -->
 <button type="button" class="btn btn-success">Success</button>
 
+<!-- Contextual button for informational alert messages -->
+<button type="button" class="btn btn-info">Info</button>
+
 <!-- Indicates caution should be taken with this action -->
 <button type="button" class="btn btn-warning">Warning</button>
 
@@ -63,6 +66,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 <button type="button" class="btn btn-primary-outline">Primary</button>
 <button type="button" class="btn btn-secondary-outline">Secondary</button>
 <button type="button" class="btn btn-success-outline">Success</button>
+<button type="button" class="btn btn-info-outline">Info</button>
 <button type="button" class="btn btn-warning-outline">Warning</button>
 <button type="button" class="btn btn-danger-outline">Danger</button>
 {% endexample %}
diff --git a/docs/components/card.md b/docs/components/card.md
index d6413672d..516367e65 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -19,7 +19,7 @@ Cards require a small amount of markup and classes to provide you with as much c
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -34,7 +34,7 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -53,7 +53,7 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-block">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
@@ -75,7 +75,7 @@ Cards support a wide variety of content, including images, text, list groups, li
     <h4 class="card-title">Card title</h4>
     <h6 class="card-subtitle text-muted">Support card subtitle</h6>
   </div>
-  <img data-src="holder.js/100%x180/?text=Image" alt="Card image">
+  <img data-src="holder.js/100px180/?text=Image" alt="Card image">
   <div class="card-block">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="card-link">Card link</a>
@@ -86,7 +86,7 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 ## Sizing
 
-Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
+Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.
 
 Using the grid:
 
@@ -112,7 +112,7 @@ Using the grid:
 Using custom widths:
 
 {% example html %}
-<div class="card card-block" style="width: 20rem;">
+<div class="card card-block" style="width: 18rem;">
   <h3 class="card-title">Special title treatment</h3>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -196,7 +196,7 @@ Similar to headers and footers, cards include top and bottom image caps.
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -209,7 +209,7 @@ Similar to headers and footers, cards include top and bottom image caps.
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
-  <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
 </div>
 {% endexample %}
 
@@ -219,7 +219,7 @@ Turn an image into a card background and overlay your card's text. Depending on
 
 {% example html %}
 <div class="card card-inverse">
-  <img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image">
+  <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
   <div class="card-img-overlay">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -295,10 +295,12 @@ Cards include their own variant classes for quickly changing the `background-col
 
 Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
 
+Only applies to small devices and above.
+
 {% example html %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -306,7 +308,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -314,7 +316,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -328,13 +330,15 @@ Use card groups to render cards as a single, attached element with equal width a
 
 Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
 
+Only applies to small devices and above.
+
 **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
 
 {% example html %}
 <div class="card-deck-wrapper">
   <div class="card-deck">
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -342,7 +346,7 @@ Need a set of equal width and height cards that aren't attached to one another?
       </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -350,7 +354,7 @@ Need a set of equal width and height cards that aren't attached to one another?
       </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -363,14 +367,14 @@ Need a set of equal width and height cards that aren't attached to one another?
 
 ## Columns
 
-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`.
+Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
 
 **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
 
 {% example html %}
 <div class="card-columns">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title that wraps to a new line</h4>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -387,7 +391,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     </blockquote>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -410,7 +414,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
   <div class="card">
-    <img class="card-img" data-src="holder.js/100%x260/" alt="Card image">
+    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
   </div>
   <div class="card card-block text-right">
     <blockquote class="card-blockquote">
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index 440d37436..40050c29f 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -96,7 +96,7 @@ The collapse plugin utilizes a few classes to handle the heavy lifting:
 - `.collapse.in` shows the content
 - `.collapsing` is added when the transition starts, and removed when it finishes
 
-These classes can be found in `component-animations.less`.
+These classes can be found in `_animation.scss`.
 
 ### Via data attributes
 
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 037e0d1cf..5e153d596 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -4,7 +4,7 @@ title: Dropdowns
 group: components
 ---
 
-Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin.
+Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)
 
 ## Contents
 
@@ -34,10 +34,10 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
 
 {% example html %}
 <div class="dropdown open">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
   </button>
-  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
     <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>
diff --git a/docs/components/forms.md b/docs/components/forms.md
index f45f207ca..90f3e38dc 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -169,7 +169,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
 
 ### Form groups
 
-The `.form-group` class is the easiest way to add some structure to forms. It's only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
+The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
 
 {% example html %}
 <form>
@@ -186,7 +186,7 @@ The `.form-group` class is the easiest way to add some structure to forms. It's
 
 ### Inline forms
 
-Use the `.inline-form` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
 
 - Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
 - Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
@@ -396,15 +396,15 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
 
 {% example html %}
-<form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Email</label>
+<form>
+  <div class="form-group row">
+    <label class="col-sm-2 form-control-label">Email</label>
     <div class="col-sm-10">
       <p class="form-control-static">[email protected]</p>
     </div>
   </div>
-  <div class="form-group">
-    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+  <div class="form-group row">
+    <label for="inputPassword" class="col-sm-2 form-control-label">Password</label>
     <div class="col-sm-10">
       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
     </div>
@@ -535,7 +535,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas
 
 ## Validation
 
-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 `.text-help` within that element will receive the validation styles.
+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 `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
 
 {% comment %}
 {% callout warning %}
@@ -549,15 +549,15 @@ Ensure that an alternative indication of state is also provided. For instance, y
 
 {% example html %}
 <div class="form-group has-success">
-  <label class="control-label" for="inputSuccess1">Input with success</label>
+  <label class="form-control-label" for="inputSuccess1">Input with success</label>
   <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>
+  <label class="form-control-label" for="inputWarning1">Input with warning</label>
   <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>
+  <label class="form-control-label" for="inputError1">Input with error</label>
   <input type="text" class="form-control form-control-error" id="inputError1">
 </div>
 
@@ -603,7 +603,7 @@ We hide the default `<input>` with `opacity` and use the `.c-indicator` to build
 
 With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
 
-In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](http://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
+In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
 
 #### Checkboxes
 
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md
index c12dca3cd..af12996e6 100644
--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@@ -26,7 +26,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr
 <div class="jumbotron jumbotron-fluid">
   <div class="container">
     <h1 class="display-3">Fluid jumbotron</h1>
-    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of it's parent.</p>
+    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
   </div>
 </div>
 {% endexample %}
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 2b28c1998..6bda50798 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -180,7 +180,7 @@ Additionally, you may give a description of your modal dialog with `aria-describ
 {% callout info %}
 #### Embedding YouTube videos
 
-Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
 {% endcallout %}
 
 ## Optional sizes
@@ -316,7 +316,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
 
 ## Varying modal content based on trigger button
 
-Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
+Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
 
 {% example html %}
 <div class="bd-example">
@@ -336,11 +336,11 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
         <div class="modal-body">
           <form>
             <div class="form-group">
-              <label for="recipient-name" class="control-label">Recipient:</label>
+              <label for="recipient-name" class="form-control-label">Recipient:</label>
               <input type="text" class="form-control" id="recipient-name">
             </div>
             <div class="form-group">
-              <label for="message-text" class="control-label">Message:</label>
+              <label for="message-text" class="form-control-label">Message:</label>
               <textarea class="form-control" id="message-text"></textarea>
             </div>
           </form>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 2c98c812a..4991c6d50 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -16,7 +16,6 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e
 Here's what you need to know before getting started with the navbar:
 
 - Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
-- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
 - Use `.pull-left` and `.pull-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
@@ -164,7 +163,13 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 ## Placement
 
-Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
+Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.
+
+{% example html %}
+<nav class="navbar navbar-full navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Full width</a>
+</nav>
+{% endexample %}
 
 {% example html %}
 <nav class="navbar navbar-fixed-top navbar-light bg-faded">
diff --git a/docs/components/navs.md b/docs/components/navs.md
index b27ad3542..564564f52 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -62,8 +62,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -316,34 +316,32 @@ When showing a new tab, the events fire in the following order:
 
 If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.tab</td>
-        <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-     </tr>
-     <tr>
-        <td>shown.bs.tab</td>
-        <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-      </tr>
-      <tr>
-        <td>hide.bs.tab</td>
-        <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
-      </tr>
-      <tr>
-        <td>hidden.bs.tab</td>
-        <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.bs.tab</td>
+      <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+   </tr>
+   <tr>
+      <td>shown.bs.tab</td>
+      <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+    </tr>
+    <tr>
+      <td>hide.bs.tab</td>
+      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
+    </tr>
+    <tr>
+      <td>hidden.bs.tab</td>
+      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
+    </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 98672d23e..3b9753aa5 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -193,7 +193,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       </tr>
       <tr>
         <td>content</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
         <td>''</td>
         <td>
           <p>Default content value if <code>data-content</code> attribute isn't present.</p>
@@ -245,7 +245,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       </tr>
       <tr>
         <td>title</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
         <td>''</td>
         <td>
           <p>Default title value if <code>title</code> attribute isn't present.</p>
@@ -268,7 +268,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>offsets</td>
         <td>string</td>
         <td>'0 0'</td>
-        <td>Offset of the popover relative to it's target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</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>
       </tr>
     </tbody>
   </table>
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index c2625a04b..dd0b45d99 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -51,7 +51,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
 
 ### Requires Bootstrap nav
 
-Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/nav/) for proper highlighting of active links.
+Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/navs/) for proper highlighting of active links.
 
 ### Requires relative positioning
 
@@ -96,7 +96,7 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
 {% callout info %}
 #### Non-`:visible` target elements ignored
 
-Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
+Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
 {% endcallout %}
 
 ### Methods
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 65bd2703b..85f3e63b6 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -203,7 +203,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       </tr>
       <tr>
         <td>title</td>
-        <td>string | function</td>
+        <td>string | element | function</td>
         <td>''</td>
         <td>
           <p>Default title value if <code>title</code> attribute isn't present.</p>
@@ -226,7 +226,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>offsets</td>
         <td>string</td>
         <td>'0 0'</td>
-        <td>Offset of the popover relative to it's target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</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>
       </tr>
     </tbody>
   </table>
diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 1905efefe..456e44414 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -13,7 +13,7 @@ Bootstrap includes dozens of utilities—classes with a single purpose. They're
 
 ## Spacing
 
-Assign `margin` or `padding` to an element or a subset of it's sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
+Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
 
 ### Margin
 
@@ -132,6 +132,7 @@ Similar to the contextual text color classes, easily set the background of an el
 <div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
 <div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
 <div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
+<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
 {% endexample %}
 
 {% callout info %}
@@ -233,7 +234,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
 
 ## Hidden content
 
-Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io).
+Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem.
 
 Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.