From: Mark Otto <markdotto@gmail.com>
Date: Sun, 30 Oct 2016 21:13:06 +0000 (-0700)
Subject: add specific docs example for badged list group items
X-Git-Tag: v4.0.0-alpha.6~461
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7ba4ac0cd302b2519b7a28c4eb59a9e56f50cb0f;p=thirdparty%2Fbootstrap.git

add specific docs example for badged list group items

floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
---

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index bc7c8b1948..f241d0431a 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -46,6 +46,26 @@ Add badges to any list group item to show unread counts, activity, etc.
 </ul>
 {% endexample %}
 
+When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class](/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
+
+{% highlight html %}
+<ul class="list-group">
+  <li class="list-group-item flex-items-xs-between">
+    Cras justo odio
+    <span class="badge badge-default badge-pill">14</span>
+  </li>
+  <li class="list-group-item flex-items-xs-between">
+    Dapibus ac facilisis in
+    <span class="badge badge-default badge-pill">2</span>
+  </li>
+  <li class="list-group-item flex-items-xs-between">
+    Morbi leo risus
+    <span class="badge badge-default badge-pill">1</span>
+  </li>
+</ul>
+{% endhighlight %}
+
+
 ## Disabled items
 
 Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.