Merge branch 'twbs/v4-dev' into dropdown-keyboard

9 files changed, 34 insertions, 22 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index f84383847..b45d13463 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Cards
-description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
+description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
 group: components
 ---
 
@@ -18,7 +18,7 @@ If you're familiar with Bootstrap 3, cards replace our old panels, wells, and th
 
 Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
 
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of it's parent element. This is easily customized with our various [sizing options](#sizing).
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
 
 {% example html %}
 <div class="card" style="width: 20rem;">
@@ -51,7 +51,7 @@ The building block of a card is the `.card-block`. Use it whenever you need a pa
 
 Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
 
-Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
+Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
 
 {% example html %}
 <div class="card">
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 88bd37dc2..17a96a113 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Forms
-description: Examples and usage guidelines for from controls, form layouts, and custom forms.
+description: Examples and usage guidelines for form controls, form layouts, and custom forms.
 group: components
 ---
 
@@ -331,7 +331,7 @@ Assistive technologies such as screen readers will have trouble with your forms
 
 ### Using the Grid
 
-For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/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.
+For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/) or [mixins]({{ site.baseurl }}/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 `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
 
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 3b30f7d8d..4316516ae 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -137,21 +137,33 @@ Add badges to any list group item to show unread counts, activity, and more with
 
 ## Custom content
 
-Add nearly any HTML within, even for linked list groups like the one below.
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
 
 {% example html %}
 <div class="list-group">
-  <a href="#" class="list-group-item list-group-item-action active">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small>3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small>Donec id elit non mi porta.</small>
   </a>
-  <a href="#" class="list-group-item list-group-item-action">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
   </a>
-  <a href="#" class="list-group-item list-group-item-action">
-    <h5 class="mt-0 mb-1">List group item heading</h5>
-    <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small>
+  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
   </a>
 </div>
 {% endexample %}
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 5ace1ac58..d61151f8f 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -19,7 +19,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
 - Clicking on the modal "backdrop" will automatically close the modal.
 - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
-- Modal's use `position: fixed`, which can sometimes be a bit particular about it's rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
+- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
 - One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
 - Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript.
 
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 5c6f95198..993661558 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -30,7 +30,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 
 - `.navbar-brand` for your company, product, or project name.
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns).
-- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
+- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
 - `.form-inline` for any form controls and actions.
 - `.navbar-text` for adding vertically centered strings of text.
 - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
diff --git a/docs/components/navs.md b/docs/components/navs.md
index fed519e8e..5b9397fc1 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -206,7 +206,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
 
 ## Working with flex utilities
 
-If you need responsive nav variations, consider using a series of [flex utilities](). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 {% example html %}
 <nav class="nav nav-pills flex-column flex-sm-row">
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 0273e8efe..03c3a56ec 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -141,7 +141,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 
 ## Alignment
 
-Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox).
+Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
 
 {% example html %}
 <nav aria-label="Page navigation example">
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 9f8bcf607..802a42a29 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -122,7 +122,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
   <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 <div class="progress">
-  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
+  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 <div class="progress">
   <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index deb84b778..825782ac2 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
       <td>selector</td>
       <td>string</td>
       <td>false</td>
-      <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+      <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
     </tr>
     <tr>
       <td>template</td>
@@ -241,7 +241,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <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://tether.io/#constraints">offset docs</a>.</td>
+      <td>Offset of the tooltip relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
     </tr>
   </tbody>
 </table>