diff --git a/docs/_includes/components/list-group.html b/docs/_includes/components/list-group.html index e95c9d485988b94c9a0eee211feaf8e8baaa22df..607b1e6614219d27f1c907577ea13a61665fd336 100644 --- a/docs/_includes/components/list-group.html +++ b/docs/_includes/components/list-group.html @@ -74,6 +74,27 @@ <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> +{% endhighlight %} + + <h2 id="list-group-buttons">Button items</h2> + <p>List group items may be buttons instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p> + <div class="bs-example" data-example-id="list-group-btns"> + <div class="list-group"> + <button class="list-group-item">Cras justo odio</button> + <button class="list-group-item">Dapibus ac facilisis in</button> + <button class="list-group-item">Morbi leo risus</button> + <button class="list-group-item">Porta ac consectetur ac</button> + <button class="list-group-item">Vestibulum at eros</button> + </div> + </div> +{% highlight html %} +<div class="list-group"> + <button class="list-group-item">Cras justo odio</button> + <button class="list-group-item">Dapibus ac facilisis in</button> + <button class="list-group-item">Morbi leo risus</button> + <button class="list-group-item">Porta ac consectetur ac</button> + <button class="list-group-item">Vestibulum at eros</button> +</div> {% endhighlight %} <h2 id="list-group-disabled">Disabled items</h2> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 639066d6563b48dd458d246036f46f88332e61a5..1ec91b5631532714a26784dc829e2dbb1d7936d3 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -124,6 +124,7 @@ <li><a href="#list-group-basic">Basic example</a></li> <li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-linked">Linked items</a></li> + <li><a href="#list-group-buttons">Button items</a></li> <li><a href="#list-group-disabled">Disabled items</a></li> <li><a href="#list-group-contextual-classes">Contextual classes</a></li> <li><a href="#list-group-custom-content">Custom content</a></li> diff --git a/less/list-group.less b/less/list-group.less index 1462ce16b325082f98f78d8e28535fe96e86f1da..216b91230ab6fa786b0a8d53bc2e60004baec147 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -38,12 +38,13 @@ } -// Linked list items +// Interactive list items // -// Use anchor elements instead of `li`s or `div`s to create linked list items. +// Use anchor or button elements instead of `li`s or `div`s to create interactive items. // Includes an extra `.active` modifier class for showing selected items. -a.list-group-item { +a.list-group-item, +button.list-group-item { color: @list-group-link-color; .list-group-item-heading { @@ -59,6 +60,11 @@ a.list-group-item { } } +button.list-group-item { + width: 100%; + text-align: left; +} + .list-group-item { // Disabled state &.disabled, diff --git a/less/mixins/list-group.less b/less/mixins/list-group.less index 8b5b065cb84cec3364d028e046b3fd24878f20b1..03aa19069d954a3db712462f17d073eca6a9498f 100644 --- a/less/mixins/list-group.less +++ b/less/mixins/list-group.less @@ -5,7 +5,8 @@ color: @color; background-color: @background; - a& { + a&, + button& { color: @color; .list-group-item-heading {