Merge branch 'v4-dev' into dropdown-keyboard

3 files changed, 48 insertions, 82 deletions

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index ab3a48dde..91fcc4424 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -37,6 +37,40 @@
   border: 1px solid rgba($bd-purple, .15);
 }
 
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
 
 //
 // Container illustrations
@@ -298,6 +332,12 @@
   overflow: auto;
 }
 
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
 // Helpers
 .bd-example > {
   .bg-primary,
diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index 28f4cd442..878787b21 100644
--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@@ -6,11 +6,15 @@
 
 .bd-content {
   > table {
-    display: block;
     width: 100%;
     max-width: 100%;
-    margin-bottom: $spacer;
-    overflow-y: auto;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      overflow-x: auto;
+      -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+    }
 
     // Cells
     > thead,
diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss
index 7b1b500b3..9656a2bc3 100644
--- a/docs/assets/scss/_responsive-tests.scss
+++ b/docs/assets/scss/_responsive-tests.scss
@@ -10,86 +10,8 @@
 }
 
 // Utility classes table
-.bd-table th small,
-.responsive-utilities th small {
+.bd-table th small {
   display: block;
   font-weight: normal;
   color: #999;
 }
-.responsive-utilities tbody th {
-  font-weight: normal;
-}
-.responsive-utilities td {
-  text-align: center;
-}
-.responsive-utilities .is-visible {
-  color: #468847;
-  background-color: #dff0d8 !important;
-}
-.responsive-utilities .is-hidden {
-  color: #ccc;
-  background-color: #f9f9f9 !important;
-}
-
-// Responsive tests
-.responsive-utilities-test {
-  margin-top: .25rem;
-}
-.responsive-utilities-test .col-6 {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-.responsive-utilities-test span {
-  display: block;
-  padding: 1rem .5rem;
-  font-size: 1rem;
-  font-weight: bold;
-  line-height: 1.1;
-  text-align: center;
-  border-radius: .25rem;
-}
-.visible-on,
-.hidden-on {
-  .col-6 {
-    > .not-visible {
-      color: #999;
-      border: 1px solid #ddd;
-    }
-  }
-}
-.visible-on,
-.hidden-on {
-  .col-6 {
-    .visible {
-      color: #468847;
-      background-color: #dff0d8;
-      border: 1px solid #d6e9c6;
-    }
-  }
-}
-
-@include media-breakpoint-only(xs) {
-  .hidden-xs-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(sm) {
-  .hidden-sm-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(md) {
-  .hidden-md-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(lg) {
-  .hidden-lg-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(xl) {
-  .hidden-xl-only {
-    display: none !important;
-  }
-}