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.

2 files changed, 19 insertions, 0 deletions

diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss
index c50876420..ac65e128c 100644
--- a/site/docs/4.2/assets/scss/_component-examples.scss
+++ b/site/docs/4.2/assets/scss/_component-examples.scss
@@ -246,6 +246,9 @@
 .bd-example > .list-group {
   max-width: 400px;
 }
+.bd-example > [class*="list-group-horizontal"] {
+  max-width: 100%;
+}
 
 // Navbars
 .bd-example {
diff --git a/site/docs/4.2/components/list-group.md b/site/docs/4.2/components/list-group.md
index d3becaefb..251dae672 100644
--- a/site/docs/4.2/components/list-group.md
+++ b/site/docs/4.2/components/list-group.md
@@ -100,6 +100,22 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 {% endcapture %}
 {% include example.html content=example %}
 
+## Horizontal
+
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+
+**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
+
+{% for bp in site.data.breakpoints %}
+{% capture example %}
+<ul class="list-group list-group-horizontal{{ bp.abbr }}">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+</ul>
+{% endcapture %}
+{% include example.html content=example %}{% endfor %}
+
 ## Contextual classes
 
 Use contextual classes to style list items with a stateful background and color.