diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 04d2c7c074..7f5243dde8 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1209,6 +1209,11 @@
         <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
+      </tr>
+	  <tr>
+        <td><a class="btn btn-dark" href="#">{{_i}}Dark{{/i}}</a></td>
+        <td><code>.btn-dark</code></td>
+        <td>{{_i}}Indicates a potential abort or black magic{{/i}}</td>
       </tr>
     </tbody>
   </table>
diff --git a/less/button-groups.less b/less/button-groups.less
index 4b0523df29..d8957c52d7 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -133,7 +133,8 @@
 .btn-primary,
 .btn-danger,
 .btn-info,
-.btn-success {
+.btn-success,
+.btn-dark {
   .caret {
     border-top-color: @white;
     .opacity(75);
diff --git a/less/buttons.less b/less/buttons.less
index 5fc4231832..0ac2be67a0 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -107,7 +107,9 @@
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-dark,
+.btn-dark:hover {
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: @white;
 }
@@ -116,7 +118,8 @@
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -141,6 +144,10 @@
 .btn-info {
   .buttonBackground(#5bc0de, #2f96b4);
 }
+// Dark appears as black
+.btn-dark {
+  .buttonBackground(#454545, #262626);
+}
 
 
 // Cross-browser Jank