From 79a10feb7aaebfb8714f1b8abb0bcbb44eb53d65 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 18 Jul 2013 00:10:22 -0700
Subject: [PATCH] Fixes #8452: adds `.active` to table classes

---
 docs/assets/css/bootstrap.css |  6 +++
 docs/css.html                 | 76 ++++++++++++++++++++++++-----------
 less/tables.less              |  5 +++
 3 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f74f5fb02f..e79177efa8 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1249,6 +1249,12 @@ table th[class^="col-"] {
   float: none;
 }
 
+.table > tbody > tr > td.active,
+.table > tbody > tr > th.active,
+.table > tbody > tr.active > td {
+  background-color: #f5f5f5;
+}
+
 .table > tbody > tr > td.success,
 .table > tbody > tr > th.success,
 .table > tbody > tr.success > td {
diff --git a/docs/css.html b/docs/css.html
index b401b6593d..10f2ea1ddf 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1048,8 +1048,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-    <h2 id="tables-row-classes">Optional row classes</h2>
-    <p>Use contextual classes to color table rows.</p>
+    <h2 id="tables-row-classes">Contextual table classes</h2>
+    <p>Use contextual classes to color table rows or individual cells.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
         <col class="col-lg-1">
@@ -1066,19 +1066,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <td>
             <code>.success</code>
           </td>
-          <td>Indicates a successful or positive action.</td>
+          <td>Indicates a successful or positive action</td>
         </tr>
         <tr>
           <td>
             <code>.danger</code>
           </td>
-          <td>Indicates a dangerous or potentially negative action.</td>
+          <td>Indicates a dangerous or potentially negative action</td>
         </tr>
         <tr>
           <td>
             <code>.warning</code>
           </td>
-          <td>Indicates a warning that might need attention.</td>
+          <td>Indicates a warning that might need attention</td>
+        </tr>
+        <tr>
+          <td>
+            <code>.active</code>
+          </td>
+          <td>Applies the hover color to a particular row or cell</td>
         </tr>
       </tbody>
     </table>
@@ -1087,42 +1093,64 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <thead>
           <tr>
             <th>#</th>
-            <th>Product</th>
-            <th>Payment Taken</th>
-            <th>Status</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
           </tr>
         </thead>
         <tbody>
           <tr class="success">
             <td>1</td>
-            <td>TB - Monthly</td>
-            <td>01/04/2012</td>
-            <td>Approved</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
           </tr>
           <tr class="danger">
-            <td>2</td>
-            <td>TB - Monthly</td>
-            <td>02/04/2012</td>
-            <td>Declined</td>
+            <td>3</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
           </tr>
           <tr class="warning">
-            <td>3</td>
-            <td>TB - Monthly</td>
-            <td>03/04/2012</td>
-            <td>Pending</td>
+            <td>5</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
+          <tr class="active">
+            <td>7</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
           </tr>
         </tbody>
       </table>
     </div><!-- /example -->
 {% highlight html %}
-...
 <tr class="success">
   <td>1</td>
-  <td>TB - Monthly</td>
-  <td>01/04/2012</td>
-  <td>Approved</td>
+  <td>Column content</td>
+  <td>Column content</td>
+  <td>Column content</td>
 </tr>
-...
 {% endhighlight %}
 
   </div>
diff --git a/less/tables.less b/less/tables.less
index 3a546917c4..b742897c17 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -219,6 +219,11 @@ table {
 // Exact selectors below required to override .table-striped
 
 .table > tbody > tr {
+  > td.active,
+  > th.active,
+  &.active > td {
+    background-color: @table-bg-hover;
+  }
   > td.success,
   > th.success,
   &.success > td {