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

10 files changed, 27 insertions, 14 deletions

diff --git a/docs/_includes/nav-docs.html b/docs/_includes/nav-docs.html
index 2b44c8acc..05a9c0b85 100644
--- a/docs/_includes/nav-docs.html
+++ b/docs/_includes/nav-docs.html
@@ -1,5 +1,5 @@
 <form class="bd-search hidden-sm-down">
-  <input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
+  <input type="search" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
   <div class="dropdown-menu bd-search-results" id="search-results"></div>
 </form>
 
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index cea237de0..ab3a48dde 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -83,7 +83,7 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem -1rem;
+  margin: 1rem (-$grid-gutter-width-base / 2);
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
   @include clearfix();
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index da72e322e..dae4ec7d3 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -55,12 +55,13 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 
 ### Additional content
 
-Alerts can also contain additional HTML elements like headings and paragraphs.
+Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
 {% example html %}
 <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>
+  <hr>
   <p class="mb-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/badge.md b/docs/components/badge.md
index 4e4bafcde..896c917f3 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -53,3 +53,16 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
 <span class="badge badge-pill badge-warning">Warning</span>
 <span class="badge badge-pill badge-danger">Danger</span>
 {% endexample %}
+
+## Links
+
+Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
+
+{% example html %}
+<a href="#" class="badge badge-default">Default</a>
+<a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-danger">Danger</a>
+{% endexample %}
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index 18d1c1298..c269bb382 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -40,7 +40,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 
 ## Accordion example
 
-Extend the default collapse behavior to create an accordion.
+Using the [card]({{ site.baseurl }}/components/card) component, you can extend the default collapse behavior to create an accordion.
 
 {% example html %}
 <div id="accordion" role="tablist">
diff --git a/docs/content/images.md b/docs/content/images.md
index fc8cda6b4..a89206488 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -25,9 +25,9 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 {% endhighlight %}
 
 {% callout warning %}
-#### SVG images and IE 9-10
+#### SVG images and IE 10
 
-In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
+In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
 {% endcallout %}
 
 ## Image thumbnails
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index c1fe73dc0..33619eb1e 100644
--- a/docs/getting-started/accessibility.md
+++ b/docs/getting-started/accessibility.md
@@ -48,7 +48,7 @@ Note that this bug will also affect any other in-page links your site may be usi
 
 When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
 
-Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
+Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessibility](http://accessibility.psu.edu/headings/).
 
 ## Additional resources
 
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 736b9ed12..04aa2c9ad 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -169,7 +169,6 @@ We don't encourage customization of these values; should you change one, you lik
 
 ```scss
 $zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
 $zindex-fixed:             1030 !default;
 $zindex-sticky:            1030 !default;
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index e207737d1..c3f0c0090 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -28,11 +28,11 @@ Try to use these on a limited basis and avoid creating entirely different versio
       <th></th>
       <th>
         Extra small devices
-        <small>Portrait phones (&lt;544px)</small>
+        <small>Portrait phones (&lt;576px)</small>
       </th>
       <th>
         Small devices
-        <small>Landscape phones (&ge;544px - &lt;768px)</small>
+        <small>Landscape phones (&ge;576px - &lt;768px)</small>
       </th>
       <th>
         Medium devices
diff --git a/docs/migration.md b/docs/migration.md
index cb4b13410..5e623317e 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -170,11 +170,11 @@ The navbar has been entirely rewritten in flexbox with improved support for alig
 
 - An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
 
-### Labels, badges, and tags
+### Labels and badges
 
-- Renamed `.label` to `.tag` to disambiguate from the `<label>` element.
-- Dropped the `.badge` component as it was nearly identical to labels/tags. Use the `.tag-pill` modifier together with the label component instead for that rounded look.
-- Tags are no longer floated automatically in list groups and other components. Utility classes are now required for that.
+- Renamed `.label` to `.badge` to disambiguate from the `<label>` element.
+- Dropped the `.badge` component as it was nearly identical to labels. Use the `.badge-pill` modifier together with the label component instead for that rounded look.
+- Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
 
 ### Panels, thumbnails, and wells