diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/list-group.md | 20 |
1 files changed, 20 insertions, 0 deletions
diff --git a/docs/components/list-group.md b/docs/components/list-group.md index bc7c8b194..f241d0431 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. |