fixes #21584

- revert back to display block for list items to prevent unwanted behaviors
- fixes a handful of other linked issues (see main thread)
- updates docs to include more utilities for the one example

docs/components/list-group.md

@@ -116,19 +116,19 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 
 ## With badges
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment) and the badge's placement.
+Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/utilities/flexbox/).
 
 {% example html %}
 <ul class="list-group">
-  <li class="list-group-item justify-content-between">
+  <li class="list-group-item d-flex justify-content-between align-items-center">
     Cras justo odio
     <span class="badge badge-default badge-pill">14</span>
   </li>
-  <li class="list-group-item justify-content-between">
+  <li class="list-group-item d-flex justify-content-between align-items-center">
     Dapibus ac facilisis in
     <span class="badge badge-default badge-pill">2</span>
   </li>
-  <li class="list-group-item justify-content-between">
+  <li class="list-group-item d-flex justify-content-between align-items-center">
     Morbi leo risus
     <span class="badge badge-default badge-pill">1</span>
   </li>

scss/_list-group.scss

@@ -42,9 +42,7 @@
 
 .list-group-item {
   position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
+  display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;