Merge pull request #16215 from zacechola/list_group_buttons

Adds button styles to `.list-group-item`

4 files changed, 33 insertions, 4 deletions

diff --git a/docs/_includes/components/list-group.html b/docs/_includes/components/list-group.html
index e95c9d485..607b1e661 100644
--- a/docs/_includes/components/list-group.html
+++ b/docs/_includes/components/list-group.html
@@ -76,6 +76,27 @@
 </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>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</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>
   <p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
   <div class="bs-example" data-example-id="list-group-disabled">
diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html
index 639066d65..1ec91b563 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 1462ce16b..216b91230 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 8b5b065cb..03aa19069 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 {