From 7ba4ac0cd302b2519b7a28c4eb59a9e56f50cb0f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 30 Oct 2016 14:13:06 -0700 Subject: [PATCH] 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. --- docs/components/list-group.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) 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. {% 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 %} + +{% endhighlight %} + + ## Disabled items Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.