diff options
| author | Mark Otto <[email protected]> | 2017-01-03 20:08:10 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-01-04 11:41:40 -0800 |
| commit | f93930199ea3db27ed4dc258e4bf5a38d00bf653 (patch) | |
| tree | 62faffd55de515e82702287eafabc65475136bf6 /docs | |
| parent | b2121d499c8ca4240fdbf4a4ae0ce8792cad411e (diff) | |
| download | bootstrap-f93930199ea3db27ed4dc258e4bf5a38d00bf653.tar.xz bootstrap-f93930199ea3db27ed4dc258e4bf5a38d00bf653.zip | |
Update custom content example for list group to use utils so the layout doesn't break
Diffstat (limited to 'docs')
| -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 %} |