diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md
index a357e58ad3..4952da5b78 100644
--- a/docs/4.0/layout/overview.md
+++ b/docs/4.0/layout/overview.md
@@ -172,3 +172,5 @@ $zindex-tooltip:           1070 !default;
 ```
 
 Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content.
+
+Additionally, the `button-group`, `input-group`, `list-group`, and `pagination` components make use of setting `z-index` to `1` or `2` in order to ensure that the borders of the _active_ element correctly appear "above" their sibling elements.
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 1a373f3232..4dcd9aa67c 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -14,12 +14,12 @@
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover {
-      z-index: 2;
+      z-index: 1;
     }
     &:focus,
     &:active,
     &.active {
-      z-index: 2;
+      z-index: 1;
     }
   }
 
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index a1d16e3848..ae70ebc081 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -14,7 +14,7 @@
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
-    z-index: 2;
+    z-index: 1;
     flex: 1 1 auto;
     // Add width 1% and flex-basis auto to ensure that button will not wrap out
     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
@@ -23,7 +23,7 @@
 
     // Bring the "active" form control to the front
     @include hover-focus-active {
-      z-index: 3;
+      z-index: 2;
     }
   }
 }
@@ -150,7 +150,7 @@
 
     // Bring the "active" button to the front
     @include hover-focus-active {
-      z-index: 3;
+      z-index: 2;
     }
   }
 
@@ -168,7 +168,7 @@
   &:not(:first-child) {
     > .btn,
     > .btn-group {
-      z-index: 2;
+      z-index: 1;
       // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
       margin-left: 0;
 
@@ -179,7 +179,7 @@
 
       // Because specificity
       @include hover-focus-active {
-        z-index: 3;
+        z-index: 2;
       }
     }
   }
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 7e0b19e01e..abe132255d 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -70,7 +70,7 @@
 
   // Include both here for `<a>`s and `<button>`s
   &.active {
-    z-index: 2; // Place active items above their siblings for proper border styling
+    z-index: 1; // Place active items above their siblings for proper border styling
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border-color;
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 69a36ffe53..6e83cf676f 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -18,7 +18,7 @@
   }
 
   &.active .page-link {
-    z-index: 2;
+    z-index: 1;
     color: $pagination-active-color;
     background-color: $pagination-active-bg;
     border-color: $pagination-active-border-color;