Merge pull request #16215 from zacechola/list_group_buttons

Adds button styles to `.list-group-item`
twbs · May 14, 2015 · c5babda · c5babda
2 parents 82279a8 + fa2cdd4
commit c5babda
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/docs/_includes/components/list-group.html b/docs/_includes/components/list-group.html
@@ -74,6 +74,27 @@ <h2 id="list-group-linked">Linked items</h2>
   <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>&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>

diff --git 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
@@ -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
@@ -5,7 +5,8 @@
     color: @color;
     background-color: @background;
 
-    a& {
+    a&,
+    button& {
       color: @color;
 
       .list-group-item-heading {