1 files changed, 37 insertions, 0 deletions
diff --git a/components.html b/components.html
index 8653149ff..c515d2030 100644
--- a/components.html
+++ b/components.html
@@ -3356,6 +3356,43 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
+    <h3 id="list-group-contextual-classes">Contextual classes</h3>
+    <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
+    <div class="bs-example">
+      <div class="row">
+        <div class="col-sm-6">
+          <ul class="list-group">
+            <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+            <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
+            <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
+          </ul>
+        </div>
+        <div class="col-sm-6">
+          <div class="list-group">
+            <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+            <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
+            <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
+          </div>
+        </div>
+      </div>
+    </div>
+{% highlight html %}
+<ul class="list-group">
+  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
+  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
+</ul>
+<div class="list-group">
+  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
+</div>
+{% endhighlight %}
+
     <h3 id="list-group-custom-content">Custom content</h3>
     <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
     <div class="bs-example">