From: Mark Otto <markdotto@gmail.com>
Date: Sat, 18 Mar 2017 23:30:12 +0000 (-0700)
Subject: fixes #21584
X-Git-Tag: v4.0.0-beta~147^2~153
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ec8c2519285a1c88d224739dc2f4b18b997a1e8b;p=thirdparty%2Fbootstrap.git

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
---

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 4316516aec..f3b5b7c892 100644
--- a/docs/components/list-group.md
+++ b/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>
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index bb8a8d1031..c4b5e2f926 100644
--- a/scss/_list-group.scss
+++ b/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;