From d7f84d1220719cdf2272c9aa3c6731a932394c58 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 7 May 2013 18:07:06 -0700
Subject: [PATCH] Require .btn-default for regular buttons

* Instead of , use  for standard, gray button
* Improves ability to customize buttons by encouraging folks to not override .btn and thus overriding all button modifier classes
* Updates docs to reflect the change
* Reorganize buttons CSS
---
 docs/assets/css/bootstrap.css | 111 ++++++++++----------
 docs/docs.html                | 187 +++++++++++++++++-----------------
 less/button-groups.less       |   4 +-
 less/buttons.less             | 119 ++++++++++------------
 less/mixins.less              |   3 +-
 less/variables.less           |  11 +-
 6 files changed, 217 insertions(+), 218 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e8ddf5bb10..26cfc3b097 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1830,7 +1830,7 @@ select:focus:invalid:focus {
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid #a7a9aa;
+  border: 1px solid transparent;
   border-radius: 4px;
 }
 
@@ -1865,72 +1865,38 @@ fieldset[disabled] .btn {
           box-shadow: none;
 }
 
-.btn-large {
-  padding: 11px 14px;
-  font-size: 17.5px;
-  border-radius: 6px;
-}
-
-.btn-small {
-  padding: 2px 10px;
-  font-size: 11.9px;
-  border-radius: 3px;
-}
-
-.btn-mini {
-  padding: 0 6px;
-  font-size: 10.5px;
-  border-radius: 3px;
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-input[type="submit"].btn-block,
-input[type="reset"].btn-block,
-input[type="button"].btn-block {
-  width: 100%;
-}
-
-.btn {
+.btn-default {
   color: #ffffff;
   background-color: #a7a9aa;
   border-color: #a7a9aa;
 }
 
-.btn:hover,
-.btn:focus,
-.btn:active,
-.btn.active {
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active,
+.btn-default.active {
   background-color: #9a9c9d;
   border-color: #8d9091;
 }
 
-.btn.disabled:hover,
-.btn[disabled]:hover,
-fieldset[disabled] .btn:hover,
-.btn.disabled:focus,
-.btn[disabled]:focus,
-fieldset[disabled] .btn:focus,
-.btn.disabled:active,
-.btn[disabled]:active,
-fieldset[disabled] .btn:active,
-.btn.disabled.active,
-.btn[disabled].active,
-fieldset[disabled] .btn.active {
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
   background-color: #a7a9aa;
   border-color: #a7a9aa;
 }
 
 .btn-primary {
+  color: #ffffff;
   background-color: #428bca;
   border-color: #428bca;
 }
@@ -1960,6 +1926,7 @@ fieldset[disabled] .btn-primary.active {
 }
 
 .btn-warning {
+  color: #ffffff;
   background-color: #f0ad4e;
   border-color: #f0ad4e;
 }
@@ -1989,6 +1956,7 @@ fieldset[disabled] .btn-warning.active {
 }
 
 .btn-danger {
+  color: #ffffff;
   background-color: #d9534f;
   border-color: #d9534f;
 }
@@ -2018,6 +1986,7 @@ fieldset[disabled] .btn-danger.active {
 }
 
 .btn-success {
+  color: #ffffff;
   background-color: #5cb85c;
   border-color: #5cb85c;
 }
@@ -2047,6 +2016,7 @@ fieldset[disabled] .btn-success.active {
 }
 
 .btn-info {
+  color: #ffffff;
   background-color: #5bc0de;
   border-color: #5bc0de;
 }
@@ -2114,6 +2084,41 @@ fieldset[disabled] .btn-link:focus {
   text-decoration: none;
 }
 
+.btn-large {
+  padding: 11px 14px;
+  font-size: 17.5px;
+  border-radius: 6px;
+}
+
+.btn-small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+  border-radius: 3px;
+}
+
+.btn-mini {
+  padding: 0 6px;
+  font-size: 10.5px;
+  border-radius: 3px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
diff --git a/docs/docs.html b/docs/docs.html
index 88ab16d7ce..5b502cf896 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2047,7 +2047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h2 id="buttons-options">Button options</h2>
-    <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
+    <p>Use any of the available button classes to quickly create a styled button.</p>
     <div class="bs-docs-example">
       <button type="button" class="btn btn-default">Default</button>
       <button type="button" class="btn btn-primary">Primary</button>
@@ -2080,56 +2080,55 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
 
-
     <h2 id="buttons-sizes">Button sizes</h2>
     <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
     <div class="bs-docs-example">
       <p>
-        <button type="button" class="btn btn-large btn-primary">Large button</button>
-        <button type="button" class="btn btn-large">Large button</button>
+        <button type="button" class="btn btn-primary btn-large">Large button</button>
+        <button type="button" class="btn btn-default btn-large">Large button</button>
       </p>
       <p>
         <button type="button" class="btn btn-primary">Default button</button>
-        <button type="button" class="btn">Default button</button>
+        <button type="button" class="btn btn-default">Default button</button>
       </p>
       <p>
-        <button type="button" class="btn btn-small btn-primary">Small button</button>
-        <button type="button" class="btn btn-small">Small button</button>
+        <button type="button" class="btn btn-primary btn-small">Small button</button>
+        <button type="button" class="btn btn-default btn-small">Small button</button>
       </p>
       <p>
-        <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-        <button type="button" class="btn btn-mini">Mini button</button>
+        <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+        <button type="button" class="btn btn-default btn-mini">Mini button</button>
       </p>
     </div>
 {% highlight html %}
 <p>
-  <button type="button" class="btn btn-large btn-primary">Large button</button>
-  <button type="button" class="btn btn-large">Large button</button>
+  <button type="button" class="btn btn-primary btn-large">Large button</button>
+  <button type="button" class="btn btn-default btn-large">Large button</button>
 </p>
 <p>
   <button type="button" class="btn btn-primary">Default button</button>
-  <button type="button" class="btn">Default button</button>
+  <button type="button" class="btn btn-default">Default button</button>
 </p>
 <p>
-  <button type="button" class="btn btn-small btn-primary">Small button</button>
-  <button type="button" class="btn btn-small">Small button</button>
+  <button type="button" class="btn btn-primary btn-small">Small button</button>
+  <button type="button" class="btn btn-default btn-small">Small button</button>
 </p>
 <p>
-  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-  <button type="button" class="btn btn-mini">Mini button</button>
+  <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+  <button type="button" class="btn btn-default btn-mini">Mini button</button>
 </p>
 {% endhighlight %}
 
     <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
     <div class="bs-docs-example">
       <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
-        <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-        <button type="button" class="btn btn-large btn-block">Block level button</button>
+        <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
+        <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
       </div>
     </div>
 {% highlight html %}
-<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-<button type="button" class="btn btn-large btn-block">Block level button</button>
+<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
+<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
 {% endhighlight %}
 
 
@@ -2139,12 +2138,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Button element</h3>
     <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
     <p class="bs-docs-example">
-      <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
-      <button type="button" class="btn btn-large" disabled="disabled">Button</button>
+      <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
+      <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
     </p>
 {% highlight html %}
 <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled="disabled">Button</button>
+<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
 {% endhighlight %}
 
     <div class="bs-docs-sidenote">
@@ -2155,12 +2154,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Anchor element</h3>
     <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
     <p class="bs-docs-example">
-      <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-      <a href="#" class="btn btn-large disabled">Link</a>
+      <a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
+      <a href="#" class="btn btn-default btn-large disabled">Link</a>
     </p>
 {% highlight html %}
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
+<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
+<a href="#" class="btn btn-default btn-large disabled">Link</a>
 {% endhighlight %}
     <p>
       We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
@@ -2171,19 +2170,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
 
-    <h2 id="buttons-tags">One class, multiple tags</h2>
-    <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+    <h2 id="buttons-tags">Using multiple tags</h2>
+    <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
     <form class="bs-docs-example">
-      <a class="btn" href="">Link</a>
-      <button class="btn" type="submit">Button</button>
-      <input class="btn" type="button" value="Input">
-      <input class="btn" type="submit" value="Submit">
+      <a class="btn btn-default" href="#">Link</a>
+      <button class="btn btn-default" type="submit">Button</button>
+      <input class="btn btn-default" type="button" value="Input">
+      <input class="btn btn-default" type="submit" value="Submit">
     </form>
 {% highlight html %}
-<a class="btn" href="">Link</a>
-<button class="btn" type="submit">Button</button>
-<input class="btn" type="button" value="Input">
-<input class="btn" type="submit" value="Submit">
+<a class="btn btn-default" href="#">Link</a>
+<button class="btn btn-default" type="submit">Button</button>
+<input class="btn btn-default" type="button" value="Input">
+<input class="btn btn-default" type="submit" value="Submit">
 {% endhighlight %}
 
     <div class="bs-docs-sidenote">
@@ -2599,20 +2598,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar">
         <div class="btn-group">
-          <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
-          <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
-          <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
-          <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+          <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+          <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+          <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+          <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
         </div>
       </div>
     </div><!-- /bs-docs-example -->
 {% highlight html %}
 <div class="btn-toolbar">
   <div class="btn-group">
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
-    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
   </div>
 </div>
 {% endhighlight %}
@@ -2638,8 +2637,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div><!-- /bs-docs-example -->
 {% highlight html %}
 <div class="btn-group">
-  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
-  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
+  <a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
     <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
@@ -2652,18 +2651,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h5>Large button</h5>
     <div class="bs-docs-example">
-      <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+      <a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
     </div><!-- /bs-docs-example -->
 {% highlight html %}
-<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
 {% endhighlight %}
 
     <h5>Small button</h5>
     <div class="bs-docs-example">
-      <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+      <a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
     </div><!-- /bs-docs-example -->
 {% highlight html %}
-<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
 {% endhighlight %}
 
 
@@ -2878,16 +2877,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
     <div class="bs-docs-example">
       <div class="btn-group" style="margin: 9px 0 5px;">
-        <button type="button" class="btn">Left</button>
-        <button type="button" class="btn">Middle</button>
-        <button type="button" class="btn">Right</button>
+        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-default">Right</button>
       </div>
     </div>
 {% highlight html %}
 <div class="btn-group">
-  <button type="button" class="btn">Left</button>
-  <button type="button" class="btn">Middle</button>
-  <button type="button" class="btn">Right</button>
+  <button type="button" class="btn btn-default">Left</button>
+  <button type="button" class="btn btn-default">Middle</button>
+  <button type="button" class="btn btn-default">Right</button>
 </div>
 {% endhighlight %}
 
@@ -2896,18 +2895,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
-          <button type="button" class="btn">1</button>
-          <button type="button" class="btn">2</button>
-          <button type="button" class="btn">3</button>
-          <button type="button" class="btn">4</button>
+          <button type="button" class="btn btn-default">1</button>
+          <button type="button" class="btn btn-default">2</button>
+          <button type="button" class="btn btn-default">3</button>
+          <button type="button" class="btn btn-default">4</button>
         </div>
         <div class="btn-group">
-          <button type="button" class="btn">5</button>
-          <button type="button" class="btn">6</button>
-          <button type="button" class="btn">7</button>
+          <button type="button" class="btn btn-default">5</button>
+          <button type="button" class="btn btn-default">6</button>
+          <button type="button" class="btn btn-default">7</button>
         </div>
         <div class="btn-group">
-          <button type="button" class="btn">8</button>
+          <button type="button" class="btn btn-default">8</button>
         </div>
       </div>
     </div>
@@ -2923,12 +2922,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
     <div class="bs-docs-example">
       <div class="btn-group">
-        <button type="button" class="btn">1</button>
-        <button type="button" class="btn">2</button>
-        <button type="button" class="btn">3</button>
+        <button type="button" class="btn btn-default">1</button>
+        <button type="button" class="btn btn-default">2</button>
+        <button type="button" class="btn btn-default">3</button>
 
         <div class="btn-group">
-          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
             Dropdown
             <span class="caret"></span>
           </button>
@@ -2945,10 +2944,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     <div class="bs-docs-example">
       <div class="btn-group btn-group-vertical">
-        <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
-        <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
-        <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
-        <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
+        <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
+        <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
+        <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
+        <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-justify"></i></button>
       </div>
     </div>
 {% highlight html %}
@@ -2961,9 +2960,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
     <div class="bs-docs-example">
       <div class="btn-group btn-group-justified">
-        <a href="#" class="btn">Left</a>
-        <a href="#" class="btn">Right</a>
-        <a href="#" class="btn">Middle</a>
+        <a href="#" class="btn btn-default">Left</a>
+        <a href="#" class="btn btn-default">Right</a>
+        <a href="#" class="btn btn-default">Middle</a>
       </div>
     </div>
 {% highlight html %}
@@ -2994,7 +2993,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin-bottom: 10px;">
         <div class="btn-group">
-          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -3048,7 +3047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Action <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -3066,8 +3065,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
-          <button class="btn">Action</button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <button class="btn btn-default">Action</button>
+          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -3125,8 +3124,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <!-- Split button -->
 <div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <button class="btn btn-default">Action</button>
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -3144,7 +3143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
-          <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
             Large button <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
@@ -3156,7 +3155,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
             Small button <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
@@ -3168,7 +3167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
             Mini button <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
@@ -3184,7 +3183,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
     Large button <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -3194,7 +3193,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
     Small button <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -3204,7 +3203,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 <!-- Mini button group -->
 <div class="btn-group">
-  <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
     Mini button <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -3218,8 +3217,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="btn-toolbar">
         <div class="btn-group dropup">
-          <button class="btn">Dropup</button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <button class="btn btn-default">Dropup</button>
+          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -3229,8 +3228,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group dropup">
-          <button class="btn primary">Right dropup</button>
-          <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <button class="btn btn-primary">Right dropup</button>
+          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu pull-right">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -3243,8 +3242,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group dropup">
-  <button class="btn">Dropup</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <button class="btn btn-default">Dropup</button>
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
diff --git a/less/button-groups.less b/less/button-groups.less
index 3a72d90bfc..6f9a52acd8 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -4,10 +4,10 @@
 
 // Button carets
 .btn .caret {
-  border-top-color: @btn-color;
+  border-top-color: @btn-default-color;
 }
 .dropup .btn .caret {
-  border-bottom-color: @btn-color;
+  border-bottom-color: @btn-default-color;
 }
 
 // Make the div behave like a button
diff --git a/less/buttons.less b/less/buttons.less
index b65e3fdc7e..128971a4c2 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -17,7 +17,7 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid @btn-border;
+  border: 1px solid transparent;
   border-radius: @border-radius-base;
   white-space: nowrap;
 
@@ -50,91 +50,35 @@
 }
 
 
-// Button Sizes
-// -------------------------
-
-// Large
-.btn-large {
-  padding: @padding-large;
-  font-size: @font-size-large;
-  border-radius: @border-radius-large;
-}
-
-// Small
-.btn-small {
-  padding: @padding-small;
-  font-size: @font-size-small;
-  border-radius: @border-radius-small;
-}
-
-// Mini
-.btn-mini {
-  padding: @padding-mini;
-  font-size: @font-size-mini;
-  border-radius: @border-radius-small;
-}
-
-
-// Icons in buttons
-// -------------------------
-
-// TODO: figure this shit out
-
-// Block button
-// -------------------------
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
-
-
 // Alternate buttons
 // --------------------------------------------------
 
-.btn {
-  color: @btn-color;
-  .btn-pseudo-states(@btn-bg, @btn-border);
+.btn-default {
+  .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
+  .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-warning-bg, @btn-warning-border);
+  .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
+  .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-success-bg, @btn-success-border);
+  .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-info-bg, @btn-info-border);
+  .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
 }
 
 
 // Link buttons
-// --------------------------------------------------
+// -------------------------
 
 // Make a button look and behave like a link
 .btn-link,
@@ -173,3 +117,48 @@ fieldset[disabled] .btn-link {
     }
   }
 }
+
+
+// Button Sizes
+// --------------------------------------------------
+
+.btn-large {
+  padding: @padding-large;
+  font-size: @font-size-large;
+  border-radius: @border-radius-large;
+}
+.btn-small {
+  padding: @padding-small;
+  font-size: @font-size-small;
+  border-radius: @border-radius-small;
+}
+.btn-mini {
+  padding: @padding-mini;
+  font-size: @font-size-mini;
+  border-radius: @border-radius-small;
+}
+
+
+// Block button
+// --------------------------------------------------
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
diff --git a/less/mixins.less b/less/mixins.less
index 2323d12031..48e2073c58 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -350,7 +350,8 @@
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@background, @border) {
+.btn-pseudo-states(@color, @background, @border) {
+  color: @color;
   background-color: @background;
   border-color: @border;
 
diff --git a/less/variables.less b/less/variables.less
index 37d51e16e7..6c0c0ab414 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -84,22 +84,27 @@
 // Buttons
 // -------------------------
 
-@btn-color:                      #fff;
-@btn-bg:                         #a7a9aa;
-@btn-border:                     @btn-bg;
+@btn-default-color:              #fff;
+@btn-default-bg:                 #a7a9aa;
+@btn-default-border:             @btn-default-bg;
 
+@btn-primary-color:              @btn-default-color;
 @btn-primary-bg:                 @brand-primary;
 @btn-primary-border:             @btn-primary-bg;
 
+@btn-success-color:              @btn-default-color;
 @btn-success-bg:                 @brand-success;
 @btn-success-border:             @btn-success-bg;
 
+@btn-warning-color:              @btn-default-color;
 @btn-warning-bg:                 @brand-warning;
 @btn-warning-border:             @btn-warning-bg;
 
+@btn-danger-color:               @btn-default-color;
 @btn-danger-bg:                  @brand-danger;
 @btn-danger-border:              @btn-danger-bg;
 
+@btn-info-color:                 @btn-default-color;
 @btn-info-bg:                    @brand-info;
 @btn-info-border:                @btn-info-bg;