add specific docs example for badged list group items
floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
This commit is contained in:
parent
e11e6ec913
commit
7ba4ac0cd3
|
@ -46,6 +46,26 @@ Add badges to any list group item to show unread counts, activity, etc.
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% 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-xs-between` utility class](/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item flex-items-xs-between">
|
||||||
|
Cras justo odio
|
||||||
|
<span class="badge badge-default badge-pill">14</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item flex-items-xs-between">
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
<span class="badge badge-default badge-pill">2</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item flex-items-xs-between">
|
||||||
|
Morbi leo risus
|
||||||
|
<span class="badge badge-default badge-pill">1</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
## Disabled items
|
## Disabled items
|
||||||
|
|
||||||
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
||||||
|
|
Loading…
Reference in New Issue