diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 4316516aec9023f452670119f15700406ac41edb..f3b5b7c8920c0abf6c41f5898790b38a8410c123 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 bb8a8d10319af6f27f25cdb23e270125a85b7ceb..c4b5e2f926985de3bf1f049e21be9c677e365298 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;