diff --git a/docs/alerts.html b/docs/alerts.html
index 2ab927618..6b0e985f6 100644
--- a/docs/alerts.html
+++ b/docs/alerts.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="alerts">Alerts</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="alerts">Alerts</h2>
 <p>Create an alert by applying the <code>alert</code> class to an element such as a <code>&lt;div&gt;</code>.</p>
 <pre><code class="lang-html">&lt;div class=&quot;alert&quot;&gt;This is an alert&lt;/div&gt;
 </code></pre>
@@ -73,7 +77,8 @@
 <div class="alert alert-light">Light</div>
 <div class="alert alert-dark">Dark</div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/attribution.html b/docs/attribution.html
index 253339abc..ef11f8ccd 100644
--- a/docs/attribution.html
+++ b/docs/attribution.html
@@ -24,41 +24,46 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="attribution">Attribution</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="attribution">Attribution</h2>
 <p>Special thanks to the following individuals and organizations for their contributions to Shoelace.css.</p>
 <ul>
 <li><a href="https://twitter.com/claviska">Cory LaViska</a> – for creating this project.</li>
 <li><a href="https://twitter.com/adamkolson">Adam K Olson</a> – for designing the logo with a single shoelaces.</li>
-<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration.</li>
+<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration and an amazing grid system.</li>
 <li><a href="https://keycdn.com/">KeyCDN</a> – for providing an awesome CDN service.</li>
 <li><a href="https://github.com/">GitHub</a> – for hosting this and many other open source projects.</li>
 <li><a href="https://www.surrealcms.com/">Surreal CMS</a> – for sponsoring development.</li>
 </ul>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/badges.html b/docs/badges.html
index 8de989d14..8eae21845 100644
--- a/docs/badges.html
+++ b/docs/badges.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="badges">Badges</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="badges">Badges</h2>
 <p>Create a badge by applying the <code>badge</code> class to an element such as a <code>&lt;span&gt;</code>.</p>
 <pre><code class="lang-html">&lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;
 </code></pre>
@@ -102,7 +106,8 @@
 <a href="#" class="badge badge-light">Light</a>
 <a href="#" class="badge badge-dark">Dark</a></p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/browser-support.html b/docs/browser-support.html
index 93213415a..f9b59038d 100644
--- a/docs/browser-support.html
+++ b/docs/browser-support.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="browser-support">Browser Support</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="browser-support">Browser Support</h2>
 <p>You can use Shoelace <em>today</em> in just about every browser. If you’re using the <a href="installing.html#cdn">CDN version</a> for prototyping, you’re good. If you’re <a href="installing.html#building-from-source">building from source</a>, you’re good.</p>
 <div class="browsers">
   <img src="../source/img/chrome.svg" alt="Chrome">
@@ -63,7 +67,8 @@
 <p>I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the <em>future syntax</em>.</p>
 <p>Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/buttons.html b/docs/buttons.html
index 83edfab51..72e2087da 100644
--- a/docs/buttons.html
+++ b/docs/buttons.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="buttons">Buttons</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="buttons">Buttons</h2>
 <p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to an <code>&lt;a&gt;</code>.</p>
 <pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
 </code></pre>
@@ -171,7 +175,8 @@
   <label class="button">Select File <input type="file"></label>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/content.html b/docs/content.html
index a3ee2886b..64e1cd61c 100644
--- a/docs/content.html
+++ b/docs/content.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="content">Content</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="content">Content</h2>
 <p>Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.</p>
 <p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units. Shoelace also sets <code>box-sizing: border-box</code> globally to make it easier to properly size elements.</p>
 <h3 id="headings-h1-h6-">Headings <code>&lt;h1&gt; – &lt;h6&gt;</code></h3>
@@ -186,7 +190,8 @@ PRINT &quot;SHOELACE IS AWESOME&quot;
   </tbody>
 </table>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/customizing.html b/docs/customizing.html
index 6fdcb8fdf..247fe3a90 100644
--- a/docs/customizing.html
+++ b/docs/customizing.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="customizing">Customizing</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="customizing">Customizing</h2>
 <p>If you’re using the source version of Shoelace (i.e. not the CDN or <code>/dist</code> version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>.</p>
 <p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
 <pre><code class="lang-css">:root {
@@ -99,7 +103,8 @@
 <p><strong>Provide source and dist versions.</strong> Many people use Shoelace as a tool for prototyping. If you’re open sourcing your component, it’s best to provide both source and dist versions. The dist version is just a minified version of the source after it’s been processed by cssnext.</p>
 <p><strong>Semantic markup is strongly encouraged.</strong> Custom components should use the most appropriate elements and the minimal amount of markup required.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/dropdowns.html b/docs/dropdowns.html
index 4054a5bad..9019cdd91 100644
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="dropdowns">Dropdowns</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="dropdowns">Dropdowns</h2>
 <p>Dropdowns can be created using the markup below. You can use a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code>&lt;a&gt;</code> elements. Dividers are simply <code>&lt;hr&gt;</code> elements.</p>
 <p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
 <p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead. When a dropdown is activated, it will receive the <code>active</code> class and the menu will show.</p>
@@ -173,7 +177,8 @@
   });
 </code></pre>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/forms.html b/docs/forms.html
index acbd7b93f..4ab687090 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="forms">Forms</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="forms">Forms</h2>
 <p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
 <h3 id="form-controls">Form Controls</h3>
 <p>Form controls are styled at 100% of the width of their parent element.</p>
@@ -151,8 +155,8 @@
 &lt;select class=&quot;input-lg&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
 &lt;select class=&quot;input-xl&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
 </code></pre>
-<div class="two-column">
-  <div class="column">
+<div class="row">
+  <div class="col-sm-6">
     <div class="input-field">
       <input type="text" class="input-xs" placeholder="XS">
     </div>
@@ -169,8 +173,7 @@
       <input type="text" class="input-xl" placeholder="XL">
     </div>
   </div>
-
-  <div class="column">
+  <div class="col-sm-6">
     <div class="input-field">
       <select class="input-xs"><option>XS</option></select>
     </div>
@@ -393,23 +396,22 @@
   &lt;input type=&quot;text&quot;&gt;
 &lt;/div&gt;
 </code></pre>
-<div class="two-column">
-  <div class="column">
+<div class="row">
+  <div class="col-sm-6">
     <div class="input-field input-valid">
       <label>Valid</label>
       <input type="text">
     </div>
   </div>
-
-  <div class="column">
+  <div class="col-sm-6">
     <div class="input-field input-invalid">
-      <label>Invalid</label>
-      <input type="text">
-    </div>
+    <label>Invalid</label>
+    <input type="text">
   </div>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/icons.html b/docs/icons.html
index abdc517f0..2e2b9881c 100644
--- a/docs/icons.html
+++ b/docs/icons.html
@@ -25,30 +25,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="icons">Icons</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="icons">Icons</h2>
 <p>Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.</p>
 <p>This keeps Shoelace light and makes it more customizable.</p>
 <h3 id="font-awesome">Font Awesome</h3>
@@ -80,7 +84,8 @@
 
 <p>For your convenience, <a href="http://fontawesome.io/icons/">here’s a full list</a> of icons available in Font Awesome.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/installing.html b/docs/installing.html
index 9b6af09c1..27e639522 100644
--- a/docs/installing.html
+++ b/docs/installing.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="installing">Installing</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="installing">Installing</h2>
 <p>There are two ways to use Shoelace. If you want to get things up and running quickly, use the <code>dist/</code> version or the <a href="#cdn">CDN version</a>. This version isn’t customizable, nor can you use future CSS features with it. It’s primarily intended for prototyping.</p>
 <p>If you’re developing a production app, you should <a href="#building-from-source">build Shoelace from source</a>. This version is completely customizable, modular, and let’s you use future CSS features <em>today</em>.</p>
 <p><strong>Note:</strong> To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> before <code>shoelace.js</code>.</p>
@@ -67,7 +71,8 @@
 </code></pre>
 <p>The main source file is <code>source/css/shoelace.css</code>. This sets core variables and imports all of Shoelace’s components. If you don’t need everything, you’re encouraged to create your own and import only the ones you’re going to use.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/loaders.html b/docs/loaders.html
index e1c07666d..73b1520f7 100644
--- a/docs/loaders.html
+++ b/docs/loaders.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="loaders">Loaders</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="loaders">Loaders</h2>
 <p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code>&lt;span&gt;</code> element. You can use the <code>loader-xs|sm|lg|xl</code> modifiers to change the size.</p>
 <pre><code class="lang-html">&lt;span class=&quot;loader loader-xs&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;loader loader-sm&quot;&gt;&lt;/span&gt;
@@ -116,7 +120,8 @@
   <div class="loader-bg loader-bg-dark"></div>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/progress-bars.html b/docs/progress-bars.html
index 2cbb2ad08..8fad3a368 100644
--- a/docs/progress-bars.html
+++ b/docs/progress-bars.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="progress-bars">Progress Bars</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="progress-bars">Progress Bars</h2>
 <p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
 <p>Create a progress bar with the following markup. Use the <code>progress-[xs|sm|lg|xl]</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
 <p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
@@ -158,7 +162,8 @@
   <div class="progress-bar w-50">50%</div>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/switches.html b/docs/switches.html
index c38080443..07aec2abf 100644
--- a/docs/switches.html
+++ b/docs/switches.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="switches">Switches</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="switches">Switches</h2>
 <p>Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.</p>
 <p>Because this is a pure CSS solution, there are a couple important things to remember:</p>
 <ul>
@@ -184,7 +188,8 @@
   <label for="variation-dark">Dark</label>
 </span></p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/tables.html b/docs/tables.html
index 31960c2d8..1f5a48401 100644
--- a/docs/tables.html
+++ b/docs/tables.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="tables">Tables</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="tables">Tables</h2>
 <p>Tables are styled for you automatically — no special classes required.</p>
 <pre><code class="lang-html">&lt;table&gt;
   &lt;thead&gt;
@@ -127,7 +131,8 @@
   </tbody>
 </table>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/tabs.html b/docs/tabs.html
index 41fb1a116..2e6217217 100644
--- a/docs/tabs.html
+++ b/docs/tabs.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="tabs">Tabs</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="tabs">Tabs</h2>
 <p>Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.</p>
 <p>Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s <code>id</code>.</p>
 <p>To disable a tab, add <code>disabled</code> to the appropriate tab nav.</p>
@@ -109,54 +113,62 @@
 </div>
 
 <h3 id="vertical-tabs">Vertical Tabs</h3>
-<p>Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.</p>
-<p>Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.</p>
-<pre><code class="lang-css">.tabs-vertical-example {
-  display: grid;
-  grid-template-columns: 30% 70%;
-}
+<p>Tabs can be made vertical when used along with the <a href="grid-system.html">grid system</a>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
+  &lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-4&quot;&gt;
+      &lt;nav class=&quot;tabs-nav&quot;&gt;
+        &lt;a href=&quot;#tab-1-example-2&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
+        &lt;a href=&quot;#tab-2-example-2&quot;&gt;Tab 2&lt;/a&gt;
+        &lt;a href=&quot;#tab-3-example-2&quot;&gt;Tab 3&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+      &lt;/nav&gt;
+    &lt;/div&gt;
 
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
-}
-
-.tabs-vertical-example .tabs-nav a {
-  display: block;
-}
+    &lt;div class=&quot;col-8&quot;&gt;
+      &lt;div class=&quot;tabs-pane active&quot; id=&quot;tab-1-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-2-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-3-example-2&quot;&gt;...&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
 </code></pre>
 <div class="tabs tabs-vertical-example">
-  <nav class="tabs-nav tabs-nav-block">
-    <a href="#tab-1-example-2" class="active">Tab 1</a>
-    <a href="#tab-2-example-2">Tab 2</a>
-    <a href="#tab-3-example-2">Tab 3</a>
-    <a href="#" class="disabled">Disabled</a>
-  </nav>
-
-  <div class="tabs-pane active" id="tab-1-example-2">
-    <h3>Tab 1</h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
-      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
-      officiis, laudantium debitis! Excepturi, quis!
-    </p>
-  </div>
-
-  <div class="tabs-pane" id="tab-2-example-2">
-    <h3>Tab 2</h3>
-    <p>
-      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
-      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
-      pariatur labore iste vel, velit odit.
-    </p>
-  </div>
-
-  <div class="tabs-pane" id="tab-3-example-2">
-    <h3>Tab 3</h3>
-    <p>
-      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
-      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
-      quae necessitatibus, aut dignissimos totam non! Quod.
-    </p>
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">
+        <h3>Tab 1</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+          assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+          officiis, laudantium debitis! Excepturi, quis!
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-2-example-2">
+        <h3>Tab 2</h3>
+        <p>
+          Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+          aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+          pariatur labore iste vel, velit odit.
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-3-example-2">
+        <h3>Tab 3</h3>
+        <p>
+          Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+          laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+          quae necessitatibus, aut dignissimos totam non! Quod.
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -177,7 +189,8 @@
   });
 </code></pre>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/docs/utilities.html b/docs/utilities.html
index 6e52afd8b..4be0bbaed 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -24,30 +24,34 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="utilities">Utilities</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="utilities">Utilities</h2>
 <p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
 <h3 id="text-utilities">Text Utilities</h3>
 <p>Text utility classes can be applied to change an element’s text.</p>
@@ -204,7 +208,8 @@ mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
 </code></pre>
 <p>You can also use <code>mar-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
diff --git a/index.html b/index.html
index e278e5b44..63db32cb9 100644
--- a/index.html
+++ b/index.html
@@ -21,22 +21,23 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <div id="content">
-      <p>
-        Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with
-        helpful components. Bootstrap users will find it familiar, yet refreshing.
-      </p>
+  <main class="container">
+    <div class="row">
+      <div class="col-lg-8 offset-lg-2">
+        <p>
+          Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with
+          helpful components. Bootstrap users will find it familiar, yet refreshing.
+        </p>
 
-      <p>
-        You can use Shoelace with just about every browser. The CDN version is great for
-        prototyping, but to take advantage of all its features you should
-        <a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
-      </p>
+        <p>
+          You can use Shoelace with just about every browser. The CDN version is great for
+          prototyping, but to take advantage of all its features you should
+          <a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
+        </p>
 
-      <p>
-        Here is the CSS you <em>could</em> be writing:
-      </p>
+        <p>
+          Here is the CSS you <em>could</em> be writing:
+        </p>
 
 <pre><code class="language-css">:root {
   /* Use CSS variables */
@@ -58,33 +59,34 @@
 }
 </code></pre>
 
-      <p>
-        <a href="http://cssnext.io/features/">CSS has a really bright future</a>, and you can use
-        most of its upcoming features <em>today</em> with Shoelace + cssnext. You no longer need
-        Less or Sass to do amazing things with CSS.
-      </p>
+        <p>
+          <a href="http://cssnext.io/features/">CSS has a really bright future</a>, and you can use
+          most of its upcoming features <em>today</em> with Shoelace + cssnext. You no longer need
+          Less or Sass to do amazing things with CSS.
+        </p>
 
-      <p>
-        Shoelace was created by <a href="https://twitter.com/claviska">@claviska</a> for
-        <a href="https://www.surrealcms.com/">Surreal CMS</a>. You can use it for free under the
-        terms of the MIT license.
-      </p>
+        <p>
+          Shoelace was created by <a href="https://twitter.com/claviska">@claviska</a> for
+          <a href="https://www.surrealcms.com/">Surreal CMS</a>. You can use it for free under the
+          terms of the MIT license.
+        </p>
 
-      <div class="mar-y-md text-center">
-        <a href="docs/installing.html" class="button button-xl">Documentation &rarr;</a>
+        <div class="mar-y-md text-center">
+          <a href="docs/installing.html" class="button button-xl">Documentation &rarr;</a>
+        </div>
+
+        <p class="text-center">
+          <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+          <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+          <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+          <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+        </p>
+
+        <p class="text-center text-small text-secondary">
+          <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+          &copy; A Beautiful Site, LLC
+        </p>
       </div>
-
-      <p class="text-center">
-        <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
-        <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
-        <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
-        <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
-      </p>
-
-      <p class="text-center text-small text-secondary">
-        <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
-        &copy; A Beautiful Site, LLC
-      </p>
     </div>
   </main>
 
diff --git a/source/docs/forms.md b/source/docs/forms.md
index 75fb33def..b713aae1c 100644
--- a/source/docs/forms.md
+++ b/source/docs/forms.md
@@ -115,8 +115,8 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
 <select class="input-xl"><option>Item</option></select>
 ```
 
-<div class="two-column">
-  <div class="column">
+<div class="row">
+  <div class="col-sm-6">
     <div class="input-field">
       <input type="text" class="input-xs" placeholder="XS">
     </div>
@@ -133,8 +133,7 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
       <input type="text" class="input-xl" placeholder="XL">
     </div>
   </div>
-
-  <div class="column">
+  <div class="col-sm-6">
     <div class="input-field">
       <select class="input-xs"><option>XS</option></select>
     </div>
@@ -379,18 +378,16 @@ Form controls can be made valid or invalid using the `input-valid` and `input-in
 </div>
 ```
 
-<div class="two-column">
-  <div class="column">
+<div class="row">
+  <div class="col-sm-6">
     <div class="input-field input-valid">
       <label>Valid</label>
       <input type="text">
     </div>
   </div>
-
-  <div class="column">
+  <div class="col-sm-6">
     <div class="input-field input-invalid">
-      <label>Invalid</label>
-      <input type="text">
-    </div>
+    <label>Invalid</label>
+    <input type="text">
   </div>
 </div>
diff --git a/source/docs/tabs.md b/source/docs/tabs.md
index 08676eeb4..3406a1046 100644
--- a/source/docs/tabs.md
+++ b/source/docs/tabs.md
@@ -73,58 +73,65 @@ To disable a tab, add `disabled` to the appropriate tab nav.
 
 ### Vertical Tabs
 
-Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.
+Tabs can be made vertical when used along with the [grid system](grid-system.html).
 
-Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.
+```html
+<div class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
 
-```css
-.tabs-vertical-example {
-  display: grid;
-  grid-template-columns: 30% 70%;
-}
-
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
-}
-
-.tabs-vertical-example .tabs-nav a {
-  display: block;
-}
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">...</div>
+      <div class="tabs-pane" id="tab-2-example-2">...</div>
+      <div class="tabs-pane" id="tab-3-example-2">...</div>
+    </div>
+  </div>
+</div>
 ```
 
 <div class="tabs tabs-vertical-example">
-  <nav class="tabs-nav tabs-nav-block">
-    <a href="#tab-1-example-2" class="active">Tab 1</a>
-    <a href="#tab-2-example-2">Tab 2</a>
-    <a href="#tab-3-example-2">Tab 3</a>
-    <a href="#" class="disabled">Disabled</a>
-  </nav>
-
-  <div class="tabs-pane active" id="tab-1-example-2">
-    <h3>Tab 1</h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
-      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
-      officiis, laudantium debitis! Excepturi, quis!
-    </p>
-  </div>
-
-  <div class="tabs-pane" id="tab-2-example-2">
-    <h3>Tab 2</h3>
-    <p>
-      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
-      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
-      pariatur labore iste vel, velit odit.
-    </p>
-  </div>
-
-  <div class="tabs-pane" id="tab-3-example-2">
-    <h3>Tab 3</h3>
-    <p>
-      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
-      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
-      quae necessitatibus, aut dignissimos totam non! Quod.
-    </p>
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">
+        <h3>Tab 1</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+          assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+          officiis, laudantium debitis! Excepturi, quis!
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-2-example-2">
+        <h3>Tab 2</h3>
+        <p>
+          Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+          aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+          pariatur labore iste vel, velit odit.
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-3-example-2">
+        <h3>Tab 3</h3>
+        <p>
+          Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+          laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+          quae necessitatibus, aut dignissimos totam non! Quod.
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 
diff --git a/source/layouts/default.html b/source/layouts/default.html
index 6288760f7..15858d8d1 100644
--- a/source/layouts/default.html
+++ b/source/layouts/default.html
@@ -27,31 +27,36 @@
     </p>
   </header>
 
-  <main id="wrap">
-    <nav id="nav">
-      <a href="installing.html">Installing</a>
-      <a href="customizing.html">Customizing</a>
-      <a href="content.html">Content</a>
-      <a href="alerts.html">Alerts</a>
-      <a href="badges.html">Badges</a>
-      <a href="buttons.html">Buttons</a>
-      <a href="dropdowns.html">Dropdowns</a>
-      <a href="forms.html">Forms</a>
-      <a href="loaders.html">Loaders</a>
-      <a href="progress-bars.html">Progress Bars</a>
-      <a href="switches.html">Switches</a>
-      <a href="tabs.html">Tabs</a>
-      <a href="tables.html">Tables</a>
-      <a href="utilities.html">Utilities</a>
-      <a href="grid-system.html">Grid System</a>
-      <a href="icons.html">Icons</a>
-      <a href="browser-support.html">Browser Support</a>
-      <a href="attribution.html">Attribution</a>
-    </nav>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      {{{contents}}}
-    </div>
+      <div class="col-md-9">
+        <div id="content">
+          {{{contents}}}
+        </div>
+      </div>
   </main>
 
   <footer id="foot">