diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index e12545eccf..87d20a132a 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -15,6 +15,10 @@
 
 <!-- Bootstrap core CSS -->
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+  <!-- Optional Bootstrap Theme -->
+  <link href="" data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
 
 <!-- Documentation extras -->
 <link href="../assets/css/docs.min.css" rel="stylesheet">
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index ec05d83cea..5a65f46a2a 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -50,6 +50,11 @@
           </div>
         </div>
       </div>
+      {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+        <div>
+          <button id="bs-theme-btn" type="button" class="btn btn-default">Activate Theme</button>
+        </div>
+      {% endif %}
 
     </div>
 
diff --git a/docs/assets/css/_src/docs.css b/docs/assets/css/_src/docs.css
index bbc3ff6690..7f1f65a4d7 100644
--- a/docs/assets/css/_src/docs.css
+++ b/docs/assets/css/_src/docs.css
@@ -1452,3 +1452,9 @@ h1[id] {
   -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
           box-shadow: 0 0 8px rgba(82,168,236,.6);
 }
+
+#bs-theme-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
diff --git a/docs/assets/js/_src/application.js b/docs/assets/js/_src/application.js
index 08ca5f9077..655f146124 100644
--- a/docs/assets/js/_src/application.js
+++ b/docs/assets/js/_src/application.js
@@ -53,6 +53,22 @@
       $('.bs-top').affix()
     }, 100)
 
+    // theme toggler
+    ;(function () {
+      var stylesheetLink = $('#bs-theme-stylesheet')
+      var themeBtn = $('#bs-theme-btn')
+      themeBtn.click(function () {
+        if (stylesheetLink.attr('href')) {
+          stylesheetLink.attr('href', '')
+          themeBtn.text('Activate Theme')
+        }
+        else {
+          stylesheetLink.attr('href', stylesheetLink.attr('data-href'))
+          themeBtn.text('Deactivate Theme')
+        }
+      })
+    })();
+
     // tooltip demo
     $('.tooltip-demo').tooltip({
       selector: '[data-toggle="tooltip"]',