*really* refactor the buttons and update them all over the docs

5 files changed, 67 insertions, 67 deletions

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 433a18c88..c000c9c88 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -757,11 +757,6 @@
         <td>{{_i}}Stacked, left-aligned labels over controls{{/i}}</td>
       </tr>
       <tr>
-        <th>{{_i}}Horizontal{{/i}}</th>
-        <td><code>.form-horizontal</code></td>
-        <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
-      </tr>
-      <tr>
         <th>{{_i}}Inline{{/i}}</th>
         <td><code>.form-inline</code></td>
         <td>{{_i}}Left-aligned label and inline-block controls for compact style{{/i}}</td>
@@ -771,6 +766,11 @@
         <td><code>.form-search</code></td>
         <td>{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}</td>
       </tr>
+      <tr>
+        <th>{{_i}}Horizontal{{/i}}</th>
+        <td><code>.form-horizontal</code></td>
+        <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
+      </tr>
     </tbody>
   </table>
 
@@ -879,7 +879,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -972,7 +972,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -1096,7 +1096,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -1139,28 +1139,28 @@
         <td>{{_i}}Standard gray button with gradient{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn primary" href="#">{{_i}}Primary{{/i}}</a></td>
-        <td><code>.primary</code></td>
+        <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
+        <td><code>.btn-primary</code></td>
         <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn info" href="#">{{_i}}Info{{/i}}</a></td>
-        <td><code>.info</code></td>
+        <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
+        <td><code>.btn-info</code></td>
         <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn success" href="#">{{_i}}Success{{/i}}</a></td>
-        <td><code>.success</code></td>
+        <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
+        <td><code>.btn-success</code></td>
         <td>{{_i}}Indicates a successful or positive action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn warning" href="#">{{_i}}Warning{{/i}}</a></td>
-        <td><code>.warning</code></td>
+        <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
+        <td><code>.btn-warning</code></td>
         <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn danger" href="#">{{_i}}Danger{{/i}}</a></td>
-        <td><code>.danger</code></td>
+        <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>
     </tbody>
@@ -1185,24 +1185,24 @@
       <h3>{{_i}}Multiple sizes{{/i}}</h3>
       <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
       <p>
-        <a href="#" class="btn large primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn large">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
       </p>
       <p>
-        <a href="#" class="btn small primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn small">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
       </p>
     </div>
     <div class="span4">
       <h3>{{_i}}Disabled state{{/i}}</h3>
-      <p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>
-        <a href="#" class="btn large primary disabled">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn large disabled">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary btn-disabled">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-disabled">{{_i}}Action{{/i}}</a>
       </p>
       <p>
-        <button class="btn large primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
-        <button class="btn large" disabled>{{_i}}Action{{/i}}</button>
+        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
       </p>
     </div>
     <div class="span4">
@@ -1415,8 +1415,8 @@
           <a class="btn" href="#"><i class="icon align-justify"></i></a>
         </div>
         <div class="btn-group">
-          <a class="btn primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
-          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#"><i class="icon pencil"></i> {{_i}}Edit{{/i}}</a></li>
             <li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
@@ -1428,13 +1428,13 @@
       </div>
       <p>
         <a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
-        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
-        <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
+        <a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
+        <a class="btn btn-danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
       </p>
       <p>
-        <a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
-        <a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
-        <a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
+        <a class="btn btn-large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
+        <a class="btn btn-small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
+        <a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
       </p>
     </div>
     <div class="span4">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 214478966..e61d83152 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -122,7 +122,7 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -132,7 +132,7 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
+          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -144,7 +144,7 @@
       </div>
       <div class="btn-toolbar">
         <div class="btn-group">
-          <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
+          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -154,7 +154,7 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
+          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -199,8 +199,8 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
-          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-primary" href="#">{{_i}}Action{{/i}}</a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -210,8 +210,8 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
-          <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a>
+          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -223,8 +223,8 @@
       </div>
       <div class="btn-toolbar">
         <div class="btn-group">
-          <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
-          <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a>
+          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -234,8 +234,8 @@
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
-          <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a>
+          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">{{_i}}Action{{/i}}</a></li>
             <li><a href="#">{{_i}}Another action{{/i}}</a></li>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 4cc3244f5..9160e895b 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -15,7 +15,7 @@
 
 <section class="download" id="components">
   <div class="page-header">
-    <a class="btn small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
     <h1>
       {{_i}}1. Chose components{{/i}}
       <small>{{_i}}Get just the CSS you need{{/i}}</small>
@@ -71,7 +71,7 @@
 
 <section class="download" id="plugins">
   <div class="page-header">
-    <a class="btn small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
     <h1>
       {{_i}}2. Select jQuery plugins{{/i}}
       <small>{{_i}}Quickly add only the necessary javascript{{/i}}</small>
@@ -140,7 +140,7 @@
 
 <section class="download" id="variables">
   <div class="page-header">
-    <a class="btn small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
     <h1>
       {{_i}}3. Customize variables{{/i}}
       <small>{{_i}}Optionally modify Bootstrap without a compiler{{/i}}</small>
@@ -239,7 +239,7 @@
     </h1>
   </div>
   <div class="download-btn">
-    <a class="btn xlarge primary" href="#">{{_i}}Customize and Download{{/i}}</a>
+    <a class="btn btn-primary" href="#">{{_i}}Customize and Download{{/i}}</a>
     <h4>{{_i}}What's included?{{/i}}</h4>
     <p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
   </div>
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 5ef0c680a..f7cadc081 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -5,8 +5,8 @@
     <h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
     <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
     <p class="download-info">
-      <a href="https://github.com/twitter/bootstrap/" class="btn primary large">{{_i}}View project on GitHub{{/i}}</a>
-      <a href="assets/bootstrap.zip" class="btn large">{{_i}}Download Bootstrap{{/i}}</a>
+      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
     </p>
   </div>
 
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index f8fdec8ea..9b787fb1b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -138,7 +138,7 @@
                 <p>{{_i}}One fine body…{{/i}}</p>
               </div>
               <div class="modal-footer">
-                <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+                <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
                 <a href="#" class="btn">{{_i}}Close{{/i}}</a>
               </div>
             </div>
@@ -163,11 +163,11 @@
               <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+              <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
               <a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
             </div>
           </div>
-          <a data-toggle="modal" href="#myModal" class="btn primary large">{{_i}}Launch demo modal{{/i}}</a>
+          <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
 
           <hr>
 
@@ -216,7 +216,7 @@
     &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
     &lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
@@ -726,7 +726,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>{{_i}}Example hover popover{{/i}}</h2>
           <p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
           <div class="well">
-            <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
+            <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
           </div>
           <hr>
           <h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
@@ -841,7 +841,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
             <p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
             <p>
-              <a class="btn danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
+              <a class="btn btn-danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
             </p>
           </div>
           <hr>
@@ -907,7 +907,7 @@ $('#my-alert').bind('closed', function () {
              <tr>
                <td>{{_i}}Stateful{{/i}}</td>
                <td>
-                  <button id="fat-btn" data-loading-text="loading..." class="btn primary">
+                  <button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
                     {{_i}}Loading State{{/i}}
                   </button>
                 </td>
@@ -915,16 +915,16 @@ $('#my-alert').bind('closed', function () {
              <tr>
                <td>{{_i}}Single toggle{{/i}}</td>
                <td>
-                  <button class="btn primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
+                  <button class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
                 </td>
              </tr>
              <tr>
                <td>{{_i}}Checkbox{{/i}}</td>
                <td>
                   <div class="btn-group" data-toggle="buttons-checkbox">
-                    <button class="btn primary">{{_i}}Left{{/i}}</button>
-                    <button class="btn primary">{{_i}}Middle{{/i}}</button>
-                    <button class="btn primary">{{_i}}Right{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Left{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Right{{/i}}</button>
                   </div>
                </td>
              </tr>
@@ -932,9 +932,9 @@ $('#my-alert').bind('closed', function () {
                <td>{{_i}}Radio{{/i}}</td>
                <td>
                   <div class="btn-group" data-toggle="buttons-radio">
-                    <button class="btn primary">{{_i}}Left{{/i}}</button>
-                    <button class="btn primary">{{_i}}Middle{{/i}}</button>
-                    <button class="btn primary">{{_i}}Right{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Left{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Right{{/i}}</button>
                   </div>
                </td>
              </tr>
@@ -1082,7 +1082,7 @@ $('#my-alert').bind('closed', function () {
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.{{/i}}</p>
           <pre class="prettyprint linenums">
-&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
+&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
   {{_i}}simple collapsible{{/i}}
 &lt;/button&gt;