navs tabs pills to single column

1 files changed, 211 insertions, 239 deletions

diff --git a/docs/components.html b/docs/components.html
index 1dccd2082..281cea964 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -521,23 +521,21 @@
   </div>
 
   <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
-  <div class="row">
-    <div class="span4">
-      <h3>Powerful base class</h3>
-      <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
-      <h3>When to use</h3>
-      <p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
-      <h3>Component alignment</h3>
-      <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-    </div>
-    <div class="span4">
-      <h3>Basic tabs</h3>
-      <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-      </ul>
+
+  <h3>Powerful base class</h3>
+  <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
+  <h3>When to use</h3>
+  <p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
+  <h3>Component alignment</h3>
+  <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+
+  <h3>Basic tabs</h3>
+  <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Profile</a></li>
+    <li><a href="#">Messages</a></li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
   &lt;li class="active"&gt;
@@ -547,15 +545,14 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-    <div class="span4">
-      <h3>Basic pills</h3>
-      <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
-      <ul class="nav nav-pills">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-      </ul>
+
+  <h3>Basic pills</h3>
+  <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
+  <ul class="nav nav-pills">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Profile</a></li>
+    <li><a href="#">Messages</a></li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="active"&gt;
@@ -565,66 +562,58 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
+
 
   <h2>Stackable <small>Make tabs or pills vertical</small></h2>
-  <div class="row">
-    <div class="span4">
-      <h3>How to stack 'em</h3>
-      <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
-    </div>
-    <div class="span4">
-      <h3>Stacked tabs</h3>
-      <ul class="nav nav-tabs nav-stacked">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-      </ul>
+
+  <h3>How to stack 'em</h3>
+  <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
+
+  <h3>Stacked tabs</h3>
+  <ul class="nav nav-tabs nav-stacked">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Profile</a></li>
+    <li><a href="#">Messages</a></li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs nav-stacked"&gt;
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-    <div class="span4">
-      <h3>Stacked pills</h3>
-      <ul class="nav nav-pills nav-stacked">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
-      </ul>
+
+  <h3>Stacked pills</h3>
+  <ul class="nav nav-pills nav-stacked">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Profile</a></li>
+    <li><a href="#">Messages</a></li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills nav-stacked"&gt;
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>Dropdowns <small>For advanced nav components</small></h2>
-  <div class="row">
-    <div class="span4">
-      <h3>Rich menus made easy</h3>
-      <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
-      <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
-    </div>
-    <div class="span4">
-      <h3>Tabs with dropdowns</h3>
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
+
+  <h3>Rich menus made easy</h3>
+  <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
+  <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
+
+  <h3>Tabs with dropdowns</h3>
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Help</a></li>
+    <li class="dropdown">
+      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Separated link</a></li>
       </ul>
+    </li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
   &lt;li class="dropdown"&gt;
@@ -640,23 +629,22 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-    <div class="span4">
-      <h3>Pills with dropdowns</h3>
-      <ul class="nav nav-pills">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
+
+  <h3>Pills with dropdowns</h3>
+  <ul class="nav nav-pills">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Help</a></li>
+    <li class="dropdown">
+      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Separated link</a></li>
       </ul>
+    </li>
+  </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="dropdown"&gt;
@@ -672,20 +660,17 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
-  <div class="row">
-    <div class="span4">
-      <h3>Application-style navigation</h3>
-      <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
-      <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
-      <hr>
-      <h4>With icons</h4>
-      <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
-      <h4>Horizontal dividers</h4>
-      <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
+
+  <h3>Application-style navigation</h3>
+  <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
+  <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+  <hr>
+  <h4>With icons</h4>
+  <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
+  <h4>Horizontal dividers</h4>
+  <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-list"&gt;
   ...
@@ -693,23 +678,22 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-    <div class="span4">
-      <h3>Example nav list</h3>
-      <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
-      <div class="well" style="padding: 8px 0;">
-        <ul class="nav nav-list">
-          <li class="nav-header">List header</li>
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Library</a></li>
-          <li><a href="#">Applications</a></li>
-          <li class="nav-header">Another list header</li>
-          <li><a href="#">Profile</a></li>
-          <li><a href="#">Settings</a></li>
-          <li class="divider"></li>
-          <li><a href="#">Help</a></li>
-        </ul>
-      </div> <!-- /well -->
+
+  <h3>Example nav list</h3>
+  <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
+  <div class="well" style="padding: 8px 0;">
+    <ul class="nav nav-list">
+      <li class="nav-header">List header</li>
+      <li class="active"><a href="#">Home</a></li>
+      <li><a href="#">Library</a></li>
+      <li><a href="#">Applications</a></li>
+      <li class="nav-header">Another list header</li>
+      <li><a href="#">Profile</a></li>
+      <li><a href="#">Settings</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Help</a></li>
+    </ul>
+  </div> <!-- /well -->
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-list"&gt;
   &lt;li class="nav-header"&gt;
@@ -724,23 +708,22 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-    <div class="span4">
-      <h3>Example with icons</h3>
-      <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
-      <div class="well" style="padding: 8px 0;">
-        <ul class="nav nav-list">
-          <li class="nav-header">List header</li>
-          <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
-          <li><a href="#"><i class="icon-book"></i> Library</a></li>
-          <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
-          <li class="nav-header">Another list header</li>
-          <li><a href="#"><i class="icon-user"></i> Profile</a></li>
-          <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
-          <li class="divider"></li>
-          <li><a href="#"><i class="icon-flag"></i> Help</a></li>
-        </ul>
-      </div> <!-- /well -->
+
+  <h3>Example with icons</h3>
+  <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
+  <div class="well" style="padding: 8px 0;">
+    <ul class="nav nav-list">
+      <li class="nav-header">List header</li>
+      <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
+      <li><a href="#"><i class="icon-book"></i> Library</a></li>
+      <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+      <li class="nav-header">Another list header</li>
+      <li><a href="#"><i class="icon-user"></i> Profile</a></li>
+      <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
+      <li class="divider"></li>
+      <li><a href="#"><i class="icon-flag"></i> Help</a></li>
+    </ul>
+  </div> <!-- /well -->
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-list"&gt;
   ...
@@ -753,49 +736,45 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
-  <div class="row">
-    <div class="span4">
-      <h3>What's included</h3>
-      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
-      <p>Changing between them is easy and only requires changing very little markup.</p>
-      <hr>
-      <h4>Fade in tabs</h4>
-      <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
-      <hr>
-      <h4>Requires jQuery plugin</h4>
-      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
-      <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
+
+  <h3>What's included</h3>
+  <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
+  <p>Changing between them is easy and only requires changing very little markup.</p>
+  <hr>
+  <h4>Fade in tabs</h4>
+  <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
+  <hr>
+  <h4>Requires jQuery plugin</h4>
+  <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
+  <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
+
+  <h3>Tabbable example</h3>
+  <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
+  <div class="tabbable" style="margin-bottom: 18px;">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+      <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
+    </ul>
+    <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+      <div class="tab-pane active" id="tab1">
+        <p>I'm in Section 1.</p>
+      </div>
+      <div class="tab-pane" id="tab2">
+        <p>Howdy, I'm in Section 2.</p>
+      </div>
+      <div class="tab-pane" id="tab3">
+        <p>What up girl, this is Section 3.</p>
+      </div>
     </div>
-    <div class="span8">
-      <h3>Tabbable example</h3>
-      <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
-      <div class="tabbable" style="margin-bottom: 18px;">
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
-          <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
-          <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
-        </ul>
-        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
-          <div class="tab-pane active" id="tab1">
-            <p>I'm in Section 1.</p>
-          </div>
-          <div class="tab-pane" id="tab2">
-            <p>Howdy, I'm in Section 2.</p>
-          </div>
-          <div class="tab-pane" id="tab3">
-            <p>What up girl, this is Section 3.</p>
-          </div>
-        </div>
-      </div> <!-- /tabbable -->
-      <p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p>
+  </div> <!-- /tabbable -->
+  <p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p>
 
-      <h3>Straightforward markup</h3>
-      <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
+  <h3>Straightforward markup</h3>
+  <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 <pre class="prettyprint linenums">
 &lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
   &lt;ul class="nav nav-tabs"&gt;
@@ -812,33 +791,30 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h3>Tabbable in any direction</h3>
-  <div class="row">
-    <div class="span4">
-      <h4>Tabs on the bottom</h4>
-      <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
-      <div class="tabbable tabs-below">
-        <div class="tab-content">
-          <div class="tab-pane active" id="A">
-            <p>I'm in Section A.</p>
-          </div>
-          <div class="tab-pane" id="B">
-            <p>Howdy, I'm in Section B.</p>
-          </div>
-          <div class="tab-pane" id="C">
-            <p>What up girl, this is Section C.</p>
-          </div>
-        </div>
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
-          <li><a href="#B" data-toggle="tab">Section 2</a></li>
-          <li><a href="#C" data-toggle="tab">Section 3</a></li>
-        </ul>
-      </div> <!-- /tabbable -->
+
+  <h4>Tabs on the bottom</h4>
+  <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
+  <div class="tabbable tabs-below">
+    <div class="tab-content">
+      <div class="tab-pane active" id="A">
+        <p>I'm in Section A.</p>
+      </div>
+      <div class="tab-pane" id="B">
+        <p>Howdy, I'm in Section B.</p>
+      </div>
+      <div class="tab-pane" id="C">
+        <p>What up girl, this is Section C.</p>
+      </div>
+    </div>
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
+      <li><a href="#B" data-toggle="tab">Section 2</a></li>
+      <li><a href="#C" data-toggle="tab">Section 3</a></li>
+    </ul>
+  </div> <!-- /tabbable -->
 <pre class="prettyprint linenums" style="margin-top: 11px;">
 &lt;div class="tabbable tabs-below"&gt;
   &lt;div class="tab-content"&gt;
@@ -849,28 +825,27 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+
+  <h4>Tabs on the left</h4>
+  <p>Swap the class to put tabs on the left.</p>
+  <div class="tabbable tabs-left">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
+      <li><a href="#lB" data-toggle="tab">Section 2</a></li>
+      <li><a href="#lC" data-toggle="tab">Section 3</a></li>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane active" id="lA">
+        <p>I'm in Section A.</p>
+      </div>
+      <div class="tab-pane" id="lB">
+        <p>Howdy, I'm in Section B.</p>
+      </div>
+      <div class="tab-pane" id="lC">
+        <p>What up girl, this is Section C.</p>
+      </div>
     </div>
-    <div class="span4">
-      <h4>Tabs on the left</h4>
-      <p>Swap the class to put tabs on the left.</p>
-      <div class="tabbable tabs-left">
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
-          <li><a href="#lB" data-toggle="tab">Section 2</a></li>
-          <li><a href="#lC" data-toggle="tab">Section 3</a></li>
-        </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="lA">
-            <p>I'm in Section A.</p>
-          </div>
-          <div class="tab-pane" id="lB">
-            <p>Howdy, I'm in Section B.</p>
-          </div>
-          <div class="tab-pane" id="lC">
-            <p>What up girl, this is Section C.</p>
-          </div>
-        </div>
-      </div> <!-- /tabbable -->
+  </div> <!-- /tabbable -->
 <pre class="prettyprint linenums">
 &lt;div class="tabbable tabs-left"&gt;
   &lt;ul class="nav nav-tabs"&gt;
@@ -881,28 +856,27 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+
+  <h4>Tabs on the right</h4>
+  <p>Swap the class to put tabs on the right.</p>
+  <div class="tabbable tabs-right">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
+      <li><a href="#rB" data-toggle="tab">Section 2</a></li>
+      <li><a href="#rC" data-toggle="tab">Section 3</a></li>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane active" id="rA">
+        <p>I'm in Section A.</p>
+      </div>
+      <div class="tab-pane" id="rB">
+        <p>Howdy, I'm in Section B.</p>
+      </div>
+      <div class="tab-pane" id="rC">
+        <p>What up girl, this is Section C.</p>
+      </div>
     </div>
-    <div class="span4">
-      <h4>Tabs on the right</h4>
-      <p>Swap the class to put tabs on the right.</p>
-      <div class="tabbable tabs-right">
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
-          <li><a href="#rB" data-toggle="tab">Section 2</a></li>
-          <li><a href="#rC" data-toggle="tab">Section 3</a></li>
-        </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="rA">
-            <p>I'm in Section A.</p>
-          </div>
-          <div class="tab-pane" id="rB">
-            <p>Howdy, I'm in Section B.</p>
-          </div>
-          <div class="tab-pane" id="rC">
-            <p>What up girl, this is Section C.</p>
-          </div>
-        </div>
-      </div> <!-- /tabbable -->
+  </div> <!-- /tabbable -->
 <pre class="prettyprint linenums">
 &lt;div class="tabbable tabs-right"&gt;
   &lt;ul class="nav nav-tabs"&gt;
@@ -913,8 +887,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 </section>