Adding contextual styles to list-items

components.html

@@ -3325,6 +3325,27 @@ body { padding-bottom: 70px; }
   <a href="#" class="list-group-item">Porta ac consectetur ac</a>
   <a href="#" class="list-group-item">Vestibulum at eros</a>
 </div>
+{% endhighlight %}
+
+    <h3 id="list-group-contextual-classes">Contextual classes</h3>
+    <p>Use contextual classes to color list items.</p>
+    <div class="bs-example">
+      <div class="list-group">
+        <a href="#" class="list-group-item">Cras justo odio</a>
+        <a href="#" class="list-group-item success">Dapibus ac facilisis in</a>
+        <a href="#" class="list-group-item">Morbi leo risus</a>
+        <a href="#" class="list-group-item warning">Porta ac consectetur ac</a>
+        <a href="#" class="list-group-item danger">Vestibulum at eros</a>
+      </div>
+    </div>
+{% highlight html %}
+<div class="list-group">
+  <a href="#" class="list-group-item">Cras justo odio</a>
+  <a href="#" class="list-group-item success">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item">Morbi leo risus</a>
+  <a href="#" class="list-group-item warning">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item danger">Vestibulum at eros</a>
+</div>
 {% endhighlight %}
 
     <h3 id="list-group-custom-content">Custom content</h3>

dist/css/bootstrap.css

@@ -5511,6 +5511,36 @@ a.thumbnail.active {
   margin-right: 5px;
 }
 
+.list-group > .list-group-item.success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.list-group > .list-group-item.success:hover {
+  background-color: #d0e9c6;
+  border-color: #c9e2b3;
+}
+
+.list-group > .list-group-item.danger {
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.list-group > .list-group-item.danger:hover {
+  background-color: #ebcccc;
+  border-color: #e4b9c0;
+}
+
+.list-group > .list-group-item.warning {
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+.list-group > .list-group-item.warning:hover {
+  background-color: #faf2cc;
+  border-color: #f7e1b5;
+}
+
 a.list-group-item {
   color: #555555;
 }

less/list-group.less

@@ -41,6 +41,11 @@
   }
 }
 
+// Contextual variants
+.list-group-item-variant(success; @state-success-bg; @state-success-border);
+.list-group-item-variant(danger; @state-danger-bg; @state-danger-border);
+.list-group-item-variant(warning; @state-warning-bg; @state-warning-border);
+
 // Linked list items
 a.list-group-item {
   color: @list-group-link-color;

less/mixins.less

@@ -448,6 +448,21 @@
   }
 }
 
+// List Groups
+// -------------------------
+.list-group-item-variant(@state; @background; @border) {
+  .list-group > .list-group-item.@{state} {
+    background-color: @background;
+    border-color: @border;
+  }
+
+  // Hover states
+  .list-group > .list-group-item.@{state}:hover {
+    background-color: darken(@background, 5%);
+    border-color: darken(@border, 5%);
+  }
+}
+
 // Button variants
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,