diff --git a/docs/_includes/components/list-group.html b/docs/_includes/components/list-group.html index e95c9d4859..607b1e6614 100644 --- a/docs/_includes/components/list-group.html +++ b/docs/_includes/components/list-group.html @@ -74,6 +74,27 @@ Porta ac consectetur ac Vestibulum at eros +{% endhighlight %} + +

Button items

+

List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don't use the standard .btn classes here.

+
+
+ + + + + +
+
+{% highlight html %} +
+ + + + + +
{% endhighlight %}

Disabled items

diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 639066d656..1ec91b5631 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -124,6 +124,7 @@
  • Basic example
  • Badges
  • Linked items
  • +
  • Button items
  • Disabled items
  • Contextual classes
  • Custom content
  • diff --git a/less/list-group.less b/less/list-group.less index 1462ce16b3..216b91230a 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 8b5b065cb8..03aa19069d 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 {