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 %}
+
+
+ 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.
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+{% highlight html %}
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
{% 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 {