Add horizontal list group modifier (#27970)

Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs.

Also added examples generate from our breakpoints data file with a protip for how to do equal width items.

1 files changed, 33 insertions, 0 deletions

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 796cc461f4..e688f959f7 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -80,6 +80,39 @@
 }
 
 
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $value in $displays {
+      .list-group-horizontal#{$infix} {
+        flex-direction: row;
+
+        .list-group-item {
+          margin-right: -$list-group-border-width;
+          margin-bottom: 0;
+
+          &:first-child {
+            @include border-left-radius($list-group-border-radius);
+            @include border-top-right-radius(0);
+          }
+
+          &:last-child {
+            margin-right: 0;
+            @include border-right-radius($list-group-border-radius);
+            @include border-bottom-left-radius(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most