.btn-default to .btn-secondary

12 files changed, 148 insertions, 148 deletions

diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html
index d70e97c32..0b67620bc 100644
--- a/docs/_includes/components/button-dropdowns.html
+++ b/docs/_includes/components/button-dropdowns.html
@@ -12,7 +12,7 @@
   <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
   <div class="bs-example">
     <div class="btn-group">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
+      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Default</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -75,7 +75,7 @@
 {% highlight html %}
 <!-- Single button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
     Action
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -92,8 +92,8 @@
   <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
   <div class="bs-example">
     <div class="btn-group">
-      <button type="button" class="btn btn-default">Default</button>
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      <button type="button" class="btn btn-secondary">Default</button>
+      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -192,7 +192,7 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
           Large button
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -206,7 +206,7 @@
     </div><!-- /btn-toolbar -->
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
           Small button
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -220,7 +220,7 @@
     </div><!-- /btn-toolbar -->
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
           Extra small button
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -236,7 +236,7 @@
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
     Large button
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -246,7 +246,7 @@
 
 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
     Small button
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -256,7 +256,7 @@
 
 <!-- Extra small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
     Extra small button
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -270,8 +270,8 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group dropup">
-        <button type="button" class="btn btn-default">Dropup</button>
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button type="button" class="btn btn-secondary">Dropup</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           <span class="sr-only">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -299,8 +299,8 @@
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-default">Dropup</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-secondary">Dropup</button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu" role="menu">
diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html
index 652d21b03..027d3b728 100644
--- a/docs/_includes/components/button-groups.html
+++ b/docs/_includes/components/button-groups.html
@@ -12,16 +12,16 @@
   <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
   <div class="bs-example">
     <div class="btn-group" style="margin: 9px 0 5px;">
-      <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>
+      <button type="button" class="btn btn-secondary">Left</button>
+      <button type="button" class="btn btn-secondary">Middle</button>
+      <button type="button" class="btn btn-secondary">Right</button>
     </div>
   </div>
 {% highlight html %}
 <div class="btn-group">
-  <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>
+  <button type="button" class="btn btn-secondary">Left</button>
+  <button type="button" class="btn btn-secondary">Middle</button>
+  <button type="button" class="btn btn-secondary">Right</button>
 </div>
 {% endhighlight %}
 
@@ -30,18 +30,18 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar" style="margin: 0;">
       <div class="btn-group">
-        <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>
+        <button type="button" class="btn btn-secondary">1</button>
+        <button type="button" class="btn btn-secondary">2</button>
+        <button type="button" class="btn btn-secondary">3</button>
+        <button type="button" class="btn btn-secondary">4</button>
       </div>
       <div class="btn-group">
-        <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>
+        <button type="button" class="btn btn-secondary">5</button>
+        <button type="button" class="btn btn-secondary">6</button>
+        <button type="button" class="btn btn-secondary">7</button>
       </div>
       <div class="btn-group">
-        <button type="button" class="btn btn-default">8</button>
+        <button type="button" class="btn btn-secondary">8</button>
       </div>
     </div>
   </div>
@@ -58,30 +58,30 @@
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group btn-group-lg">
-        <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>
+        <button type="button" class="btn btn-secondary">Left</button>
+        <button type="button" class="btn btn-secondary">Middle</button>
+        <button type="button" class="btn btn-secondary">Right</button>
       </div>
     </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <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>
+        <button type="button" class="btn btn-secondary">Left</button>
+        <button type="button" class="btn btn-secondary">Middle</button>
+        <button type="button" class="btn btn-secondary">Right</button>
       </div>
     </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group btn-group-sm">
-        <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>
+        <button type="button" class="btn btn-secondary">Left</button>
+        <button type="button" class="btn btn-secondary">Middle</button>
+        <button type="button" class="btn btn-secondary">Right</button>
       </div>
     </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group btn-group-xs">
-        <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>
+        <button type="button" class="btn btn-secondary">Left</button>
+        <button type="button" class="btn btn-secondary">Middle</button>
+        <button type="button" class="btn btn-secondary">Right</button>
       </div>
     </div>
   </div>
@@ -96,11 +96,11 @@
   <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
   <div class="bs-example">
     <div class="btn-group">
-      <button type="button" class="btn btn-default">1</button>
-      <button type="button" class="btn btn-default">2</button>
+      <button type="button" class="btn btn-secondary">1</button>
+      <button type="button" class="btn btn-secondary">2</button>
 
       <div class="btn-group">
-        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
@@ -112,11 +112,11 @@
   </div>
 {% highlight html %}
 <div class="btn-group">
-  <button type="button" class="btn btn-default">1</button>
-  <button type="button" class="btn btn-default">2</button>
+  <button type="button" class="btn btn-secondary">1</button>
+  <button type="button" class="btn btn-secondary">2</button>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
       Dropdown
     </button>
     <ul class="dropdown-menu" role="menu">
@@ -131,10 +131,10 @@
   <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
   <div class="bs-example">
     <div class="btn-group-vertical">
-      <button type="button" class="btn btn-default">Button</button>
-      <button type="button" class="btn btn-default">Button</button>
+      <button type="button" class="btn btn-secondary">Button</button>
+      <button type="button" class="btn btn-secondary">Button</button>
       <div class="btn-group">
-        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
@@ -142,10 +142,10 @@
           <li><a href="#">Dropdown link</a></li>
         </ul>
       </div>
-      <button type="button" class="btn btn-default">Button</button>
-      <button type="button" class="btn btn-default">Button</button>
+      <button type="button" class="btn btn-secondary">Button</button>
+      <button type="button" class="btn btn-secondary">Button</button>
       <div class="btn-group">
-        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
@@ -154,7 +154,7 @@
         </ul>
       </div>
       <div class="btn-group">
-        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
@@ -163,7 +163,7 @@
         </ul>
       </div>
       <div class="btn-group">
-        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
@@ -196,16 +196,16 @@
   <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
   <div class="bs-example">
     <div class="btn-group btn-group-justified">
-      <a class="btn btn-default" role="button">Left</a>
-      <a class="btn btn-default" role="button">Middle</a>
-      <a class="btn btn-default" role="button">Right</a>
+      <a class="btn btn-secondary" role="button">Left</a>
+      <a class="btn btn-secondary" role="button">Middle</a>
+      <a class="btn btn-secondary" role="button">Right</a>
     </div>
     <br>
     <div class="btn-group btn-group-justified">
-      <a class="btn btn-default" role="button">Left</a>
-      <a class="btn btn-default" role="button">Middle</a>
+      <a class="btn btn-secondary" role="button">Left</a>
+      <a class="btn btn-secondary" role="button">Middle</a>
       <div class="btn-group">
-        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           Dropdown
         </a>
         <ul class="dropdown-menu" role="menu">
@@ -229,26 +229,26 @@
   <div class="bs-example">
     <div class="btn-group btn-group-justified">
       <div class="btn-group">
-        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-secondary">Left</button>
       </div>
       <div class="btn-group">
-        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-secondary">Middle</button>
       </div>
       <div class="btn-group">
-        <button type="button" class="btn btn-default">Right</button>
+        <button type="button" class="btn btn-secondary">Right</button>
       </div>
     </div>
   </div>
 {% highlight html %}
 <div class="btn-group btn-group-justified">
   <div class="btn-group">
-    <button type="button" class="btn btn-default">Left</button>
+    <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-default">Middle</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-default">Right</button>
+    <button type="button" class="btn btn-secondary">Right</button>
   </div>
 </div>
 {% endhighlight %}
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html
index 6edd98607..4462900ef 100644
--- a/docs/_includes/components/dropdowns.html
+++ b/docs/_includes/components/dropdowns.html
@@ -7,7 +7,7 @@
   <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -21,7 +21,7 @@
   </div><!-- /example -->
 {% highlight html %}
 <div class="dropdown">
-  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
     Dropdown
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -54,7 +54,7 @@
   <p>Add a header to label sections of actions in any dropdown menu.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
@@ -82,7 +82,7 @@
   <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index 148cb957c..ae0ce4613 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -143,7 +143,7 @@
       <div class="col-lg-6">
         <div class="input-group">
           <span class="input-group-btn">
-            <button class="btn btn-default" type="button">Go!</button>
+            <button class="btn btn-secondary" type="button">Go!</button>
           </span>
           <input type="text" class="form-control">
         </div><!-- /input-group -->
@@ -152,7 +152,7 @@
         <div class="input-group">
           <input type="text" class="form-control">
           <span class="input-group-btn">
-            <button class="btn btn-default" type="button">Go!</button>
+            <button class="btn btn-secondary" type="button">Go!</button>
           </span>
         </div><!-- /input-group -->
       </div><!-- /.col-lg-6 -->
@@ -163,7 +163,7 @@
   <div class="col-lg-6">
     <div class="input-group">
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button">Go!</button>
+        <button class="btn btn-secondary" type="button">Go!</button>
       </span>
       <input type="text" class="form-control">
     </div><!-- /input-group -->
@@ -172,7 +172,7 @@
     <div class="input-group">
       <input type="text" class="form-control">
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button">Go!</button>
+        <button class="btn btn-secondary" type="button">Go!</button>
       </span>
     </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
@@ -186,7 +186,7 @@
       <div class="col-lg-6">
         <div class="input-group">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -202,7 +202,7 @@
         <div class="input-group">
           <input type="text" class="form-control">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -220,7 +220,7 @@
   <div class="col-lg-6">
     <div class="input-group">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -236,7 +236,7 @@
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -256,8 +256,8 @@
       <div class="col-lg-6">
         <div class="input-group">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu" role="menu">
@@ -275,8 +275,8 @@
         <div class="input-group">
           <input type="text" class="form-control">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">
diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html
index 81097b0b0..7e6a9c89f 100644
--- a/docs/_includes/components/navbar.html
+++ b/docs/_includes/components/navbar.html
@@ -58,7 +58,7 @@
             <div class="form-group">
               <input type="text" class="form-control" placeholder="Search">
             </div>
-            <button type="submit" class="btn btn-default">Submit</button>
+            <button type="submit" class="btn btn-secondary">Submit</button>
           </form>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Link</a></li>
@@ -113,7 +113,7 @@
         <div class="form-group">
           <input type="text" class="form-control" placeholder="Search">
         </div>
-        <button type="submit" class="btn btn-default">Submit</button>
+        <button type="submit" class="btn btn-secondary">Submit</button>
       </form>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Link</a></li>
@@ -190,7 +190,7 @@
             <div class="form-group">
               <input type="text" class="form-control" placeholder="Search">
             </div>
-            <button type="submit" class="btn btn-default">Submit</button>
+            <button type="submit" class="btn btn-secondary">Submit</button>
           </form>
         </div>
       </div>
@@ -201,7 +201,7 @@
   <div class="form-group">
     <input type="text" class="form-control" placeholder="Search">
   </div>
-  <button type="submit" class="btn btn-default">Submit</button>
+  <button type="submit" class="btn btn-secondary">Submit</button>
 </form>
 {% endhighlight %}
 
@@ -231,13 +231,13 @@
           <a class="navbar-brand" href="#">Brand</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
-          <button type="button" class="btn btn-default navbar-btn">Sign in</button>
+          <button type="button" class="btn btn-secondary navbar-btn">Sign in</button>
         </div>
       </div>
     </nav>
   </div>
 {% highlight html %}
-<button type="button" class="btn btn-default navbar-btn">Sign in</button>
+<button type="button" class="btn btn-secondary navbar-btn">Sign in</button>
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-warning">
diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html
index 5fa879c33..dbfc35610 100644
--- a/docs/_includes/css/buttons.html
+++ b/docs/_includes/css/buttons.html
@@ -36,37 +36,37 @@
   <div class="bs-example">
     <p>
       <button type="button" class="btn btn-primary btn-lg">Large button</button>
-      <button type="button" class="btn btn-default btn-lg">Large button</button>
+      <button type="button" class="btn btn-secondary btn-lg">Large button</button>
     </p>
     <p>
       <button type="button" class="btn btn-primary">Default button</button>
-      <button type="button" class="btn btn-default">Default button</button>
+      <button type="button" class="btn btn-secondary">Default button</button>
     </p>
     <p>
       <button type="button" class="btn btn-primary btn-sm">Small button</button>
-      <button type="button" class="btn btn-default btn-sm">Small button</button>
+      <button type="button" class="btn btn-secondary btn-sm">Small button</button>
     </p>
     <p>
       <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
-      <button type="button" class="btn btn-default btn-xs">Extra small button</button>
+      <button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
     </p>
   </div>
 {% highlight html %}
 <p>
   <button type="button" class="btn btn-primary btn-lg">Large button</button>
-  <button type="button" class="btn btn-default btn-lg">Large button</button>
+  <button type="button" class="btn btn-secondary btn-lg">Large button</button>
 </p>
 <p>
   <button type="button" class="btn btn-primary">Default button</button>
-  <button type="button" class="btn btn-default">Default button</button>
+  <button type="button" class="btn btn-secondary">Default button</button>
 </p>
 <p>
   <button type="button" class="btn btn-primary btn-sm">Small button</button>
-  <button type="button" class="btn btn-default btn-sm">Small button</button>
+  <button type="button" class="btn btn-secondary btn-sm">Small button</button>
 </p>
 <p>
   <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
-  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
+  <button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
 </p>
 {% endhighlight %}
 
@@ -74,12 +74,12 @@
   <div class="bs-example">
     <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
       <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
-      <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
+      <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
     </div>
   </div>
 {% highlight html %}
 <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
-<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
 {% endhighlight %}
 
 
@@ -90,22 +90,22 @@
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
   <p class="bs-example">
     <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
-    <button type="button" class="btn btn-default btn-lg active">Button</button>
+    <button type="button" class="btn btn-secondary btn-lg active">Button</button>
   </p>
 {% highlight html %}
 <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
-<button type="button" class="btn btn-default btn-lg active">Button</button>
+<button type="button" class="btn btn-secondary btn-lg active">Button</button>
 {% endhighlight %}
 
   <h3>Anchor element</h3>
   <p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
   <p class="bs-example">
     <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
-    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
+    <a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
   </p>
 {% highlight html %}
 <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
-<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
+<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
 {% endhighlight %}
 
 
@@ -116,11 +116,11 @@
   <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
   <p class="bs-example">
     <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
-    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
+    <button type="button" class="btn btn-secondary btn-lg" disabled="disabled">Button</button>
   </p>
 {% highlight html %}
 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
+<button type="button" class="btn btn-secondary btn-lg" disabled="disabled">Button</button>
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-danger">
@@ -132,11 +132,11 @@
   <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
   <p class="bs-example">
     <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
-    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
+    <a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
   </p>
 {% highlight html %}
 <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
-<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
+<a href="#" class="btn btn-secondary btn-lg disabled" role="button">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.
@@ -154,16 +154,16 @@
   <h2 id="buttons-tags">Button 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-example">
-    <a class="btn btn-default" href="#" role="button">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">
+    <a class="btn btn-secondary" href="#" role="button">Link</a>
+    <button class="btn btn-secondary" type="submit">Button</button>
+    <input class="btn btn-secondary" type="button" value="Input">
+    <input class="btn btn-secondary" type="submit" value="Submit">
   </form>
 {% highlight html %}
-<a class="btn btn-default" href="#" role="button">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">
+<a class="btn btn-secondary" href="#" role="button">Link</a>
+<button class="btn btn-secondary" type="submit">Button</button>
+<input class="btn btn-secondary" type="button" value="Input">
+<input class="btn btn-secondary" type="submit" value="Submit">
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-warning">
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 08b3e77ae..6192c6d80 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -23,7 +23,7 @@
           <input type="checkbox"> Check me out
         </label>
       </div>
-      <button type="submit" class="btn btn-default">Submit</button>
+      <button type="submit" class="btn btn-secondary">Submit</button>
     </form>
   </div><!-- /example -->
 {% highlight html %}
@@ -46,7 +46,7 @@
       <input type="checkbox"> Check me out
     </label>
   </div>
-  <button type="submit" class="btn btn-default">Submit</button>
+  <button type="submit" class="btn btn-secondary">Submit</button>
 </form>
 {% endhighlight %}
   <div class="bs-callout bs-callout-warning">
@@ -86,7 +86,7 @@
           <input type="checkbox"> Remember me
         </label>
       </div>
-      <button type="submit" class="btn btn-default">Sign in</button>
+      <button type="submit" class="btn btn-secondary">Sign in</button>
     </form>
   </div><!-- /example -->
 {% highlight html %}
@@ -110,7 +110,7 @@
       <input type="checkbox"> Remember me
     </label>
   </div>
-  <button type="submit" class="btn btn-default">Sign in</button>
+  <button type="submit" class="btn btn-secondary">Sign in</button>
 </form>
 {% endhighlight %}
 
@@ -142,7 +142,7 @@
       </div>
       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
-          <button type="submit" class="btn btn-default">Sign in</button>
+          <button type="submit" class="btn btn-secondary">Sign in</button>
         </div>
       </div>
     </form>
@@ -172,7 +172,7 @@
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-default">Sign in</button>
+      <button type="submit" class="btn btn-secondary">Sign in</button>
     </div>
   </div>
 </form>
diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html
index 64f536b94..700472a4b 100644
--- a/docs/_includes/customizer-variables.html
+++ b/docs/_includes/customizer-variables.html
@@ -297,16 +297,16 @@
     <input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
-    <label for="input-@btn-default-color">@btn-default-color</label>
-    <input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control"/>
+    <label for="input-@btn-secondary-color">@btn-secondary-color</label>
+    <input id="input-@btn-secondary-color" type="text" value="#333" data-var="@btn-secondary-color" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
-    <label for="input-@btn-default-bg">@btn-default-bg</label>
-    <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/>
+    <label for="input-@btn-secondary-bg">@btn-secondary-bg</label>
+    <input id="input-@btn-secondary-bg" type="text" value="#fff" data-var="@btn-secondary-bg" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
-    <label for="input-@btn-default-border">@btn-default-border</label>
-    <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/>
+    <label for="input-@btn-secondary-border">@btn-secondary-border</label>
+    <input id="input-@btn-secondary-border" type="text" value="#ccc" data-var="@btn-secondary-border" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@btn-primary-color">@btn-primary-color</label>
diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index 351301533..79c7c409a 100644
--- a/docs/_includes/js/alerts.html
+++ b/docs/_includes/js/alerts.html
@@ -17,7 +17,7 @@
       <p>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.</p>
       <p>
         <button type="button" class="btn btn-danger">Take this action</button>
-        <button type="button" class="btn btn-default">Or do this</button>
+        <button type="button" class="btn btn-secondary">Or do this</button>
       </p>
     </div>
   </div><!-- /example -->
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index d5b1aee84..18bfad78a 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -31,7 +31,7 @@
             <p>One fine body&hellip;</p>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary">Save changes</button>
           </div>
         </div><!-- /.modal-content -->
@@ -50,7 +50,7 @@
         <p>One fine body&hellip;</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div><!-- /.modal-content -->
@@ -74,7 +74,7 @@
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
           <h4>Popover in a modal</h4>
-          <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+          <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
 
           <h4>Tooltips in a modal</h4>
           <p><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.</p>
@@ -93,7 +93,7 @@
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
 
@@ -124,7 +124,7 @@
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index ef8e07941..c704f4062 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -75,35 +75,35 @@
   <h4>Four directions</h4>
   <div class="bs-example popover-demo">
     <div class="bs-example-popovers">
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on left
       </button>
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on top
       </button>
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on bottom
       </button>
-      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on right
       </button>
     </div>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on left
 </button>
 
-<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on top
 </button>
 
-<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
 sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on bottom
 </button>
 
-<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on right
 </button>
 {% endhighlight %}
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index fac4f6519..ca52a3e95 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -12,20 +12,20 @@
   <h3>Four directions</h3>
   <div class="bs-example tooltip-demo">
     <div class="bs-example-tooltips">
-      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
-      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
-      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
     </div>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
 
-<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
 
-<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
 
-<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-danger">