diff options
| -rw-r--r-- | docs/components/list-group.md | 32 |
1 files changed, 22 insertions, 10 deletions
diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 3b30f7d8d..4316516ae 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -137,21 +137,33 @@ Add badges to any list group item to show unread counts, activity, and more with ## Custom content -Add nearly any HTML within, even for linked list groups like the one below. +Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). {% example html %} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action active"> - <h5 class="mt-0 mb-1">List group item heading</h5> - <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> + <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> + <div class="d-flex w-100 justify-content-between"> + <h5 class="mb-1">List group item heading</h5> + <small>3 days ago</small> + </div> + <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + <small>Donec id elit non mi porta.</small> </a> - <a href="#" class="list-group-item list-group-item-action"> - <h5 class="mt-0 mb-1">List group item heading</h5> - <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> + <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> + <div class="d-flex w-100 justify-content-between"> + <h5 class="mb-1">List group item heading</h5> + <small class="text-muted">3 days ago</small> + </div> + <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + <small class="text-muted">Donec id elit non mi porta.</small> </a> - <a href="#" class="list-group-item list-group-item-action"> - <h5 class="mt-0 mb-1">List group item heading</h5> - <small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> + <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> + <div class="d-flex w-100 justify-content-between"> + <h5 class="mb-1">List group item heading</h5> + <small class="text-muted">3 days ago</small> + </div> + <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + <small class="text-muted">Donec id elit non mi porta.</small> </a> </div> {% endexample %} |