button groups and dropdowns to single column

docs/components.html

@@ -101,11 +101,11 @@
       </li>
       <li><a href="#labels">Labels</a></li>
       <li><a href="#badges">Badges</a></li>
-      <li><a href="#typography">Typography</a></li>
+      <li><a href="#typography">Type</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
       <li><a href="#progress">Progress bars</a></li>
-      <li><a href="#misc">Miscellaneous</a></li>
+      <li><a href="#misc">Misc</a></li>
     </ul>
   </div>
 </header>
@@ -118,8 +118,7 @@
   <div class="page-header">
     <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
   </div>
-  <div class="row">
-    <div class="span4">
+
   <h3>Button groups</h3>
   <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
   <h3>Best practices</h3>
@@ -130,8 +129,7 @@
     <li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
   </ul>
   <p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
-    </div>
-    <div class="span4">
+
   <h3>Default example</h3>
   <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
   <div class="">
@@ -173,15 +171,11 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-    <div class="span4">
   <h3>Checkbox and radio flavors</h3>
   <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
   <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
   <h3>Dropdowns in button groups</h3>
   <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
-    </div>
-  </div>
 </section>
 
 
@@ -194,8 +188,7 @@
   </div>
 
   <h2>Button dropdowns</h2>
-  <div class="row">
-    <div class="span4">
+
   <h3>Overview and examples</h3>
   <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -272,8 +265,7 @@
       </ul>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
-    </div>
-    <div class="span8">
+
   <h3>Example markup</h3>
   <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
 <pre class="prettyprint linenums">
@@ -287,10 +279,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span4">
+
   <h3>Works with all button sizes</h3>
   <p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -325,18 +314,15 @@
       </ul>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
-    </div><!--/span-->
-    <div class="span4">
+
   <h3>Requires javascript</h3>
   <p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
   <p>In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
-    </div><!--/span-->
-  </div><!--/row-->
+
   <br>
 
   <h2>Split button dropdowns</h2>
-  <div class="row">
-    <div class="span4">
+
   <h3>Overview and examples</h3>
   <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -471,8 +457,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-    <div class="span8">
+
   <h3>Example markup</h3>
   <p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
 <pre class="prettyprint linenums">
@@ -524,8 +509,6 @@
 &lt;/div&gt;
 </pre>
 
-    </div>
-  </div>
 </section>
 
 

docs/templates/pages/components.mustache

@@ -23,11 +23,11 @@
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
       <li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
-      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
+      <li><a href="#typography">{{_i}}Type{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
-      <li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
+      <li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
     </ul>
   </div>
 </header>
@@ -40,8 +40,7 @@
   <div class="page-header">
     <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
   </div>
-  <div class="row">
-    <div class="span4">
+
   <h3>{{_i}}Button groups{{/i}}</h3>
   <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
   <h3>{{_i}}Best practices{{/i}}</h3>
@@ -52,8 +51,7 @@
     <li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
   </ul>
   <p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
-    </div>
-    <div class="span4">
+
   <h3>{{_i}}Default example{{/i}}</h3>
   <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
   <div class="">
@@ -95,15 +93,11 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-    <div class="span4">
   <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
   <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
   <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
   <h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
   <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
-    </div>
-  </div>
 </section>
 
 
@@ -116,8 +110,7 @@
   </div>
 
   <h2>{{_i}}Button dropdowns{{/i}}</h2>
-  <div class="row">
-    <div class="span4">
+
   <h3>{{_i}}Overview and examples{{/i}}</h3>
   <p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -194,8 +187,7 @@
       </ul>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
-    </div>
-    <div class="span8">
+
   <h3>{{_i}}Example markup{{/i}}</h3>
   <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -209,10 +201,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span4">
+
   <h3>{{_i}}Works with all button sizes{{/i}}</h3>
   <p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -247,18 +236,15 @@
       </ul>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
-    </div><!--/span-->
-    <div class="span4">
+
   <h3>{{_i}}Requires javascript{{/i}}</h3>
   <p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
   <p>{{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
-    </div><!--/span-->
-  </div><!--/row-->
+
   <br>
 
   <h2>{{_i}}Split button dropdowns{{/i}}</h2>
-  <div class="row">
-    <div class="span4">
+
   <h3>{{_i}}Overview and examples{{/i}}</h3>
   <p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
   <div class="btn-toolbar" style="margin-top: 18px;">
@@ -393,8 +379,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-    <div class="span8">
+
   <h3>{{_i}}Example markup{{/i}}</h3>
   <p>{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -446,8 +431,6 @@
 &lt;/div&gt;
 </pre>
 
-    </div>
-  </div>
 </section>