don't use table for label variatons

4 files changed, 23 insertions, 60 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b4b499e8f..641de8a4a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4624,11 +4624,10 @@ button.close {
   color: #a47e3c;
 }
 
-.close {
+.alert .close {
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: 20px;
   color: inherit;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 0ae2198ad..e7d7efb58 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3894,56 +3894,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Available variations</h3>
     <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
-    <table class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th>Labels</th>
-          <th>Markup</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <span class="label">Default</span>
-          </td>
-          <td>
-            <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-success">Success</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-warning">Warning</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-danger">Danger</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span class="label label-info">Info</span>
-          </td>
-          <td>
-            <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="bs-docs-example">
+      <span class="label">Default</span>
+      <span class="label label-success">Success</span>
+      <span class="label label-warning">Warning</span>
+      <span class="label label-danger">Danger</span>
+      <span class="label label-info">Info</span>
+    </div>
+{% highlight html linenos %}
+<span class="label">Default</span>
+<span class="label label-success">Success</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+<span class="label label-info">Info</span>
+{% endhighlight %}
 
   </div>
 
diff --git a/less/alerts.less b/less/alerts.less
index 48e4bab42..e3637ead9 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -30,15 +30,14 @@
     font-weight: 500;
     color: darken(@state-warning-text, 10%);
   }
-}
 
-// Adjust close link position
-.close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  line-height: @line-height-base;
-  color: inherit;
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    color: inherit;
+  }
 }
 
 // Alternate styles
diff --git a/less/close.less b/less/close.less
index 2bfe9c40f..e63a3b2d7 100644
--- a/less/close.less
+++ b/less/close.less
@@ -11,6 +11,7 @@
   color: #000;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(.2);
+
   &:hover,
   &:focus {
     color: #000;