RubyGems - twigg-app - Versions diffs - 0.0.1 → 0.0.2 - Mend

twigg-app 0.0.1 → 0.0.2

Files changed (208) hide show

data/public/vendor/bootstrap/css.html CHANGED Viewed

@@ -15,7 +15,7 @@ base_url: "../"
     </div>
     <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
-    <h3 id="overview-doctype">HTML5 doctype required</h3>
+    <h3 id="overview-doctype">HTML5 doctype</h3>
     <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
 {% highlight html %}
 <!DOCTYPE html>
@@ -29,6 +29,10 @@ base_url: "../"
     <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
 {% highlight html %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% endhighlight %}
+    <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 {% endhighlight %}
     <h3 id="overview-responsive-images">Responsive images</h3>
@@ -47,10 +51,10 @@ base_url: "../"
     </ul>
     <p>These styles can be found within <code>scaffolding.less</code>.</p>
-    <h3 id="overview-normalize">Normalize reset</h3>
+    <h3 id="overview-normalize">Normalize</h3>
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
-    <h3 id="overview-container">Centering with container</h3>
+    <h3 id="overview-container">Containers</h3>
     <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
 {% highlight html %}
 <div class="container">
@@ -61,27 +65,13 @@ base_url: "../"
-  <!-- Glyphicons icon font
-  ================================================== -->
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="glyphicons">Glyphicons</h1>
-    </div>
-    <p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
-    <p class="lead">
-      <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-lg">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
-    </p>
-  </div>
   <!-- Grid system
   ================================================== -->
   <div class="bs-docs-section">
     <div class="page-header">
       <h1 id="grid">Grid system</h1>
     </div>
-    <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
+    <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
     <h3 id="grid-media-queries">Media queries</h3>
     <p>We use the following media queries to create the key breakpoints in our grid system.</p>
@@ -92,7 +82,7 @@ base_url: "../"
 /* Small devices (tablets, 768px and up) */
 @media (min-width: @screen-tablet) { ... }
-/* Medium devices (tablets, 992px and up) */
+/* Medium devices (desktops, 992px and up) */
 @media (min-width: @screen-desktop) { ... }
 /* Large devices (large desktops, 1200px and up) */
@@ -108,8 +98,8 @@ base_url: "../"
     <h3 id="grid-options">Grid options</h3>
     <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
-    <div class="bs-table-scrollable">
-      <table class="table table-bordered table-striped bs-table">
+    <div class="table-responsive">
+      <table class="table table-bordered table-striped">
         <thead>
           <tr>
             <th></th>
@@ -119,15 +109,15 @@ base_url: "../"
             </th>
             <th>
               Small devices
-              <small>Tablets (&gt;768px)</small>
+              <small>Tablets (&ge;768px)</small>
             </th>
             <th>
               Medium devices
-              <small>Desktops (&gt;992px)</small>
+              <small>Desktops (&ge;992px)</small>
             </th>
             <th>
               Large devices
-              <small>Desktops (&gt;1200px)</small>
+              <small>Desktops (&ge;1200px)</small>
             </th>
           </tr>
         </thead>
@@ -140,13 +130,13 @@ base_url: "../"
           <tr>
             <th>Max container width</th>
             <td>None (auto)</td>
-            <td>720px</td>
-            <td>940px</td>
-            <td>1140px</td>
+            <td>750px</td>
+            <td>970px</td>
+            <td>1170px</td>
           </tr>
           <tr>
             <th>Class prefix</th>
-            <td><code>.col-xs</code></td>
+            <td><code>.col-xs-</code></td>
             <td><code>.col-sm-</code></td>
             <td><code>.col-md-</code></td>
             <td><code>.col-lg-</code></td>
@@ -188,166 +178,184 @@ base_url: "../"
     <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-8">8</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-6">6</div>
-        <div class="col-md-6">6</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-6">.col-md-6</div>
       </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
 </div>
 <div class="row">
-  <div class="col-md-8">8</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-8">.col-md-8</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-6">6</div>
-  <div class="col-md-6">6</div>
+  <div class="col-md-6">.col-md-6</div>
+  <div class="col-md-6">.col-md-6</div>
 </div>
 {% endhighlight %}
-    <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
+    <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
     <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-xs-12 col-md-8">8</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-6">6</div>
-        <div class="col-xs-6 col-md-6">6</div>
+        <div class="col-xs-6">.col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
       </div>
     </div>
 {% highlight html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col-xs-12 col-md-8">8</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-6">6</div>
-  <div class="col-xs-6 col-md-6">6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
 </div>
 {% endhighlight %}
-    <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
+    <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
     <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
-        <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+        <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
         <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
         <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+        <!-- Optional: clear the XS cols if their content doesn't match in height -->
+        <div class="clearfix visible-xs"></div>
         <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
       </div>
-      <div class="row show-grid">
-        <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
-        <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
-      </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
-  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
 </div>
 <div class="row">
   <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
   <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+  <!-- Optional: clear the XS cols if their content doesn't match in height -->
+  <div class="clearfix visible-xs"></div>
   <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
 </div>
+{% endhighlight %}
+    <h3 id="grid-responsive-resets">Responsive column resets</h3>
+    <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="../css#responsive-utilities">responsive utility classes</a>.</p>
+{% highlight html %}
 <div class="row">
-  <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
-  <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <!-- Add the extra clearfix for only the required viewport -->
+  <div class="clearfix visible-xs"></div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+</div>
+{% endhighlight %}
+    <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.</p>
+{% highlight html %}
+<div class="row">
+  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+</div>
+<div class="row">
+  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
+  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
 </div>
 {% endhighlight %}
-    <div class="bs-callout bs-callout-danger">
-      <h4>Need more examples?</h4>
-      <p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
-      <p><a class="btn btn-danger" target="_blank" href="http://examples.getbootstrap.com/grid/">More grid examples</a></p>
-    </div>
     <h3 id="grid-offsetting">Offsetting columns</h3>
     <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4 col-md-offset-4">4 offset 4</div>
-      </div><!-- /row -->
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-6 col-md-offset-3">6 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+      </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-4">...</div>
-  <div class="col-md-4 col-md-offset-4">...</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
 </div>
 <div class="row">
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 </div>
 <div class="row">
-  <div class="col-md-6 col-md-offset-3">...</div>
+  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
 </div>
 {% endhighlight %}
@@ -356,13 +364,13 @@ base_url: "../"
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
       <div class="col-md-9">
-        Level 1: 9 columns
+        Level 1: .col-md-9
         <div class="row show-grid">
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
         </div>
       </div>
@@ -370,13 +378,13 @@ base_url: "../"
 {% highlight html %}
 <div class="row">
   <div class="col-md-9">
-    Level 1: 9 columns
+    Level 1: .col-md-9
     <div class="row">
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
     </div>
   </div>
@@ -386,14 +394,14 @@ base_url: "../"
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col-md-9 col-md-push-3">9</div>
-      <div class="col-md-3 col-md-pull-9">3</div>
+      <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+      <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9 col-md-push-3">9</div>
-  <div class="col-md-3 col-md-pull-9">3</div>
+  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
 </div>
 {% endhighlight %}
@@ -585,27 +593,27 @@ base_url: "../"
       <table class="table">
         <tbody>
           <tr>
-            <td><h1>Bootstrap heading</h1></td>
-            <td>Semibold 38px</td>
+            <td><h1>h1. Bootstrap heading</h1></td>
+            <td>Semibold 36px</td>
           </tr>
           <tr>
-            <td><h2>Bootstrap heading</h2></td>
-            <td>Semibold 32px</td>
+            <td><h2>h2. Bootstrap heading</h2></td>
+            <td>Semibold 30px</td>
           </tr>
           <tr>
-            <td><h3>Bootstrap heading</h3></td>
+            <td><h3>h3. Bootstrap heading</h3></td>
             <td>Semibold 24px</td>
           </tr>
           <tr>
-            <td><h4>Bootstrap heading</h4></td>
+            <td><h4>h4. Bootstrap heading</h4></td>
             <td>Semibold 18px</td>
           </tr>
           <tr>
-            <td><h5>Bootstrap heading</h5></td>
+            <td><h5>h5. Bootstrap heading</h5></td>
             <td>Semibold 14px</td>
           </tr>
           <tr>
-            <td><h6>Bootstrap heading</h6></td>
+            <td><h6>h6. Bootstrap heading</h6></td>
             <td>Semibold 12px</td>
           </tr>
         </tbody>
@@ -702,18 +710,18 @@ base_url: "../"
     <div class="bs-example">
       <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
       <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
       <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
       <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
     </div>
 {% highlight html %}
 <p class="text-muted">...</p>
 <p class="text-primary">...</p>
-<p class="text-warning">...</p>
-<p class="text-danger">...</p>
 <p class="text-success">...</p>
 <p class="text-info">...</p>
+<p class="text-warning">...</p>
+<p class="text-danger">...</p>
 {% endhighlight %}
@@ -898,7 +906,7 @@ base_url: "../"
 {% endhighlight %}
     <h3>Inline</h3>
-    <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
+    <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
     <div class="bs-example">
       <ul class="list-inline">
         <li>Lorem ipsum</li>
@@ -1039,10 +1047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h2>Optional classes</h2>
-    <p>Add any of the following classes to the <code>.table</code> base class.</p>
-    <h3 id="tables-striped">Striped</h3>
+    <h2 id="tables-striped">Striped rows</h2>
     <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
@@ -1086,7 +1091,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
-    <h3 id="tables-bordered">Bordered</h3>
+    <h2 id="tables-bordered">Bordered table</h2>
     <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
     <div class="bs-example">
       <table class="table table-bordered">
@@ -1130,7 +1136,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
-    <h3 id="tables-hover-rows">Hover rows</h3>
+    <h2 id="tables-hover-rows">Hover rows</h2>
     <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
     <div class="bs-example">
       <table class="table table-hover">
@@ -1170,7 +1177,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h3 id="tables-condensed">Condensed</h3>
+    <h2 id="tables-condensed">Condensed table</h2>
     <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
     <div class="bs-example">
       <table class="table table-condensed">
@@ -1210,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h2 id="tables-row-classes">Contextual table classes</h2>
+    <h2 id="tables-contextual-classes">Contextual classes</h2>
     <p>Use contextual classes to color table rows or individual cells.</p>
-    <div class="bs-table-scrollable">
-      <table class="table table-bordered table-striped bs-table">
+    <div class="table-responsive">
+      <table class="table table-bordered table-striped">
         <colgroup>
           <col class="col-lg-1">
           <col class="col-lg-7">
@@ -1228,15 +1234,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <tbody>
           <tr>
             <td>
-              <code>.success</code>
+              <code>.active</code>
             </td>
-            <td>Indicates a successful or positive action</td>
+            <td>Applies the hover color to a particular row or cell</td>
           </tr>
           <tr>
             <td>
-              <code>.danger</code>
+              <code>.success</code>
             </td>
-            <td>Indicates a dangerous or potentially negative action</td>
+            <td>Indicates a successful or positive action</td>
           </tr>
           <tr>
             <td>
@@ -1246,9 +1252,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </tr>
           <tr>
             <td>
-              <code>.active</code>
+              <code>.danger</code>
             </td>
-            <td>Applies the hover color to a particular row or cell</td>
+            <td>Indicates a dangerous or potentially negative action</td>
           </tr>
         </tbody>
       </table>
@@ -1264,7 +1270,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </tr>
         </thead>
         <tbody>
-          <tr class="success">
+          <tr class="active">
             <td>1</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1276,7 +1282,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="danger">
+          <tr class="success">
             <td>3</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1300,7 +1306,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="active">
+          <tr class="danger">
             <td>7</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1310,14 +1316,123 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </table>
     </div><!-- /example -->
 {% highlight html %}
-<tr class="success">
-  <td>1</td>
-  <td>Column content</td>
-  <td>Column content</td>
-  <td>Column content</td>
+<!-- On rows -->
+<tr class="active">...</tr>
+<tr class="success">...</tr>
+<tr class="warning">...</tr>
+<tr class="danger">...</tr>
+<!-- On cells (`td` or `th`) -->
+<tr>
+  <td class="active">...</td>
+  <td class="success">...</td>
+  <td class="warning">...</td>
+  <td class="danger">...</td>
 </tr>
 {% endhighlight %}
+    <h2 id="tables-responsive">Responsive tables</h2>
+    <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+    <div class="bs-example">
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+          </tbody>
+        </table>
+      </div><!-- /.table-responsive -->
+      <div class="table-responsive">
+        <table class="table table-bordered">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+              <th>Table heading</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+              <td>Table cell</td>
+            </tr>
+          </tbody>
+        </table>
+      </div><!-- /.table-responsive -->
+    </div><!-- /example -->
+{% highlight html %}
+<div class="table-responsive">
+  <table class="table">
+    ...
+  </table>
+</div>
+{% endhighlight %}
   </div>
@@ -1332,58 +1447,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h2 id="forms-example">Basic example</h2>
     <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
     <form class="bs-example" role="form">
-      <fieldset>
-        <legend>Legend</legend>
-        <div class="form-group">
-          <label for="exampleInputEmail1">Email address</label>
-          <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-        </div>
-        <div class="form-group">
-          <label for="exampleInputPassword1">Password</label>
-          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-        </div>
-        <div class="form-group">
-          <label for="exampleInputFile">File input</label>
-          <input type="file" id="exampleInputFile">
-          <p class="help-block">Example block-level help text here.</p>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox"> Check me out
-          </label>
-        </div>
-        <button type="submit" class="btn btn-default">Submit</button>
-      </fieldset>
+      <div class="form-group">
+        <label for="exampleInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputFile">File input</label>
+        <input type="file" id="exampleInputFile">
+        <p class="help-block">Example block-level help text here.</p>
+      </div>
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Check me out
+        </label>
+      </div>
+      <button type="submit" class="btn btn-default">Submit</button>
     </form><!-- /example -->
 {% highlight html %}
 <form role="form">
-  <fieldset>
-    <legend>Legend</legend>
-    <div class="form-group">
-      <label for="exampleInputEmail1">Email address</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-    </div>
-    <div class="form-group">
-      <label for="exampleInputPassword1">Password</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-    </div>
-    <div class="form-group">
-      <label for="exampleInputFile">File input</label>
-      <input type="file" id="exampleInputFile">
-      <p class="help-block">Example block-level help text here.</p>
-    </div>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Check me out
-      </label>
-    </div>
-    <button type="submit" class="btn btn-default">Submit</button>
-  </fieldset>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input type="file" id="exampleInputFile">
+    <p class="help-block">Example block-level help text here.</p>
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-default">Submit</button>
 </form>
 {% endhighlight %}
-    <h3 id="forms-inline">Inline form</h3>
+    <h2 id="forms-inline">Inline form</h2>
     <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Requires custom widths</h4>
@@ -1396,7 +1505,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-example form-inline" role="form">
       <div class="form-group">
         <label class="sr-only" for="exampleInputEmail2">Email address</label>
-        <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
       </div>
       <div class="form-group">
         <label class="sr-only" for="exampleInputPassword2">Password</label>
@@ -1413,7 +1522,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form class="form-inline" role="form">
   <div class="form-group">
     <label class="sr-only" for="exampleInputEmail2">Email address</label>
-    <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
   </div>
   <div class="form-group">
     <label class="sr-only" for="exampleInputPassword2">Password</label>
@@ -1428,13 +1537,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
     <form class="bs-example form-horizontal">
       <div class="form-group">
         <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
         <div class="col-lg-10">
-          <input type="text" class="form-control" id="inputEmail1" placeholder="Email">
+          <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
         </div>
       </div>
       <div class="form-group">
@@ -1463,7 +1573,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="form-group">
     <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
-      <input type="text" class="form-control" id="inputEmail1" placeholder="Email">
+      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
     </div>
   </div>
   <div class="form-group">
@@ -1490,7 +1600,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h2 id="forms-controls">Supported form controls</h2>
+    <h2 id="forms-controls">Supported controls</h2>
     <p>Examples of standard form controls supported in an example form layout.</p>
     <h3>Inputs</h3>
@@ -1624,8 +1734,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h2 id="forms-controls-static">Static text in horizontal forms</h2>
-    <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+    <h2 id="forms-controls-static">Static control</h2>
+    <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
     <form class="bs-example form-horizontal">
       <div class="form-group">
         <label class="col-lg-2 control-label">Email</label>
@@ -1658,7 +1768,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
-    <h2 id="forms-control-states">Form control states</h2>
+    <h2 id="forms-control-states">Form states</h2>
     <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
     <h3 id="forms-input-focus">Input focus</h3>
@@ -1739,6 +1849,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
     <form class="bs-example">
+      <div class="form-group has-success">
+        <label class="control-label" for="inputSuccess">Input with success</label>
+        <input type="text" class="form-control" id="inputSuccess">
+      </div>
       <div class="form-group has-warning">
         <label class="control-label" for="inputWarning">Input with warning</label>
         <input type="text" class="form-control" id="inputWarning">
@@ -1747,12 +1861,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <label class="control-label" for="inputError">Input with error</label>
         <input type="text" class="form-control" id="inputError">
       </div>
-      <div class="form-group has-success">
-        <label class="control-label" for="inputSuccess">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess">
-      </div>
     </form>
 {% highlight html %}
+<div class="form-group has-success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <input type="text" class="form-control" id="inputSuccess">
+</div>
 <div class="form-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
   <input type="text" class="form-control" id="inputWarning">
@@ -1761,10 +1875,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <label class="control-label" for="inputError">Input with error</label>
   <input type="text" class="form-control" id="inputError">
 </div>
-<div class="form-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess">
-</div>
 {% endhighlight %}
@@ -1850,7 +1960,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1 id="buttons">Buttons</h1>
     </div>
-    <h2 id="buttons-options">Button options</h2>
+    <h2 id="buttons-options">Options</h2>
     <p>Use any of the available button classes to quickly create a styled button.</p>
     <div class="bs-example">
       <button type="button" class="btn btn-default">Default</button>
@@ -1884,7 +1994,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
-    <h2 id="buttons-sizes">Button sizes</h2>
+    <h2 id="buttons-sizes">Sizes</h2>
     <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
     <div class="bs-example">
       <p>
@@ -1974,7 +2084,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
-    <h2 id="buttons-tags">Using multiple tags</h2>
+    <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="#">Link</a>
@@ -2047,29 +2157,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
     <h3>.pull-left</h3>
-    <p>Float an element left</p>
+    <p>Float an element left with a class. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="pull-left">...</div>
 {% endhighlight %}
 {% highlight css %}
 .pull-left {
-  float: left;
+  float: left !important;
 }
 {% endhighlight %}
     <h3>.pull-right</h3>
-    <p>Float an element right</p>
+    <p>Float an element right with a class. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="pull-right">...</div>
 {% endhighlight %}
 {% highlight css %}
 .pull-right {
-  float: right;
+  float: right !important;
 }
 {% endhighlight %}
     <h3>.clearfix</h3>
-    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="clearfix">...</div>
 {% endhighlight %}
@@ -2106,9 +2216,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1>Responsive utilities</h1>
     </div>
     <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+    <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
-    <h3>Responsive classes</h3>
-    <div class="bs-table-scrollable">
+    <h2 id="responsive-utilities-classes">Available classes</h2>
+    <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
+    <div class="table-responsive">
       <table class="table table-bordered table-striped responsive-utilities">
         <thead>
           <tr>
@@ -2119,27 +2232,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </th>
             <th>
               Small devices
-              <small>Tablets (&gt;768px)</small>
+              <small>Tablets (&ge;768px)</small>
             </th>
             <th>
               Medium devices
-              <small>Desktops (&gt;992px)</small>
+              <small>Desktops (&ge;992px)</small>
             </th>
             <th>
               Large devices
-              <small>Desktops (&gt;1200px)</small>
+              <small>Desktops (&ge;1200px)</small>
             </th>
           </tr>
         </thead>
-<!--         <thead>
-          <tr>
-            <th>Class</th>
-            <th>Small devices <small>Up to 768px</small></th>
-            <th>Medium devices <small>768px to 991px</small></th>
-            <th>Large devices <small>992px and up</small></th>
-          </tr>
-        </thead>
- -->        <tbody>
+        <tbody>
           <tr>
             <th><code>.visible-xs</code></th>
             <td class="is-visible">Visible</td>
@@ -2202,8 +2307,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </table>
     </div>
-    <h3>Print classes</h3>
-    <div class="bs-table-scrollable">
+    <h2 id="responsive-utilities-print">Print classes</h2>
+    <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
+    <div class="table-responsive">
       <table class="table table-bordered table-striped responsive-utilities">
         <thead>
           <tr>
@@ -2227,12 +2334,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </table>
     </div>
-    <h3>When to use</h3>
-    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
-    <h3>Test case</h3>
+    <h2 id="responsive-utilities-tests">Test cases</h2>
     <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
-    <h4>Visible on...</h4>
+    <h3>Visible on...</h3>
     <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
     <div class="row responsive-utilities-test visible-on">
       <div class="col-xs-6 col-sm-3">
@@ -2243,6 +2349,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="hidden-sm">Small</span>
         <span class="visible-sm">&#10004; Visible on small</span>
       </div>
+      <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-3">
         <span class="hidden-md">Medium</span>
         <span class="visible-md">&#10004; Visible on medium</span>
@@ -2252,7 +2359,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="visible-lg">&#10004; Visible on large</span>
       </div>
     </div>
-    <h4>Hidden on...</h4>
+    <div class="row responsive-utilities-test visible-on">
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-sm">Extra small and small</span>
+        <span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-md hidden-lg">Medium and large</span>
+        <span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-md">Extra small and medium</span>
+        <span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-sm hidden-lg">Small and large</span>
+        <span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-lg">Extra small and large</span>
+        <span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-sm hidden-md">Small and medium</span>
+        <span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
+      </div>
+    </div>
+    <h3>Hidden on...</h3>
     <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
     <div class="row responsive-utilities-test hidden-on">
       <div class="col-xs-6 col-sm-3">
@@ -2263,6 +2399,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="visible-sm">Small</span>
         <span class="hidden-sm">&#10004; Hidden on small</span>
       </div>
+      <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-3">
         <span class="visible-md">Medium</span>
         <span class="hidden-md">&#10004; Hidden on medium</span>
@@ -2272,5 +2409,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="hidden-lg">&#10004; Hidden on large</span>
       </div>
     </div>
+    <div class="row responsive-utilities-test hidden-on">
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-sm">Extra small and small</span>
+        <span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-md visible-lg">Medium and large</span>
+        <span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-md">Extra small and medium</span>
+        <span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-sm visible-lg">Small and large</span>
+        <span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-lg">Extra small and large</span>
+        <span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-sm visible-md">Small and medium</span>
+        <span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
+      </div>
+    </div>
   </div>