diff options
| author | Mark Otto <[email protected]> | 2016-12-20 15:02:07 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-20 22:55:01 -0800 |
| commit | a6f03b0f71ae5c6b70be7f28057412be95b4ba71 (patch) | |
| tree | 5f8be5fa3c5befc5b79ef8c5c1a187addaf7272d /docs | |
| parent | a6a87b0d9d0622333f266abc6100179abf66e09c (diff) | |
| download | bootstrap-a6f03b0f71ae5c6b70be7f28057412be95b4ba71.tar.xz bootstrap-a6f03b0f71ae5c6b70be7f28057412be95b4ba71.zip | |
update docs to use .mt-1 on floated labels; clarify docs for guidance
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/list-group.md | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 820470bbb..8a02f9864 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -27,26 +27,26 @@ The most basic list group is simply an unordered list with list items, and the p ## Badge -Add badges to any list group item to show unread counts, activity, etc. +Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Below we use `.float-right` and `.mt-1` to align the badge to this example's specific needs, but you may need different or additional utilities. {% example html %} <ul class="list-group"> <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right">14</span> + <span class="badge badge-default badge-pill float-right mt-1">14</span> Cras justo odio </li> <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right">2</span> + <span class="badge badge-default badge-pill float-right mt-1">2</span> Dapibus ac facilisis in </li> <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right">1</span> + <span class="badge badge-default badge-pill float-right mt-1">1</span> Morbi leo risus </li> </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-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. +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-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges. {% highlight html %} <ul class="list-group"> |