mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-25 04:12:55 +01:00
Code Issues Releases Wiki Activity

Update custom content example for list group to use utils so the layout doesn't break

Browse Source
This commit is contained in:
Mark Otto 2017-01-03 20:08:10 -08:00 committed by Mark Otto
parent b2121d499c
commit f93930199e
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/list-group.md
View File

@ -137,21 +137,33 @@ Add badges to any list group item to show unread counts, activity, and more with
## Custom content ## 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 %} {% example html %}
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action active"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<h5 class="mt-0 mb-1">List group item heading</h5> <div class="d-flex w-100 justify-content-between">
<small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> <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>
<a href="#" class="list-group-item list-group-item-action"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<h5 class="mt-0 mb-1">List group item heading</h5> <div class="d-flex w-100 justify-content-between">
<small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> <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>
<a href="#" class="list-group-item list-group-item-action"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<h5 class="mt-0 mb-1">List group item heading</h5> <div class="d-flex w-100 justify-content-between">
<small>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</small> <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>
</div> </div>
{% endexample %} {% endexample %}