remove tabbable tabs on left, right, and bottom; instead, from here out use stacked pills or tabs

5 files changed, 2 insertions, 387 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e9be20564..c0b6ef395 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3612,12 +3612,6 @@ input[type="button"].btn-block {
   overflow: auto;
 }
 
-.tabs-below > .nav-tabs,
-.tabs-right > .nav-tabs,
-.tabs-left > .nav-tabs {
-  border-bottom: 0;
-}
-
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
@@ -3628,81 +3622,6 @@ input[type="button"].btn-block {
   display: block;
 }
 
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-
-.tabs-below > .nav-tabs > li > a {
-  border-radius: 0 0 4px 4px;
-}
-
-.tabs-below > .nav-tabs > li > a:hover {
-  border-top-color: #ddd;
-  border-bottom-color: transparent;
-}
-
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-.tabs-left > .nav-tabs > li,
-.tabs-right > .nav-tabs > li {
-  float: none;
-}
-
-.tabs-left > .nav-tabs > li > a,
-.tabs-right > .nav-tabs > li > a {
-  min-width: 74px;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-.tabs-left > .nav-tabs {
-  float: left;
-  margin-right: 19px;
-  border-right: 1px solid #ddd;
-}
-
-.tabs-left > .nav-tabs > li > a {
-  margin-right: -1px;
-  border-radius: 4px 0 0 4px;
-}
-
-.tabs-left > .nav-tabs > li > a:hover {
-  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
-}
-
-.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
-  border-color: #ddd transparent #ddd #ddd;
-}
-
-.tabs-right > .nav-tabs {
-  float: right;
-  margin-left: 19px;
-  border-left: 1px solid #ddd;
-}
-
-.tabs-right > .nav-tabs > li > a {
-  margin-left: -1px;
-  border-radius: 0 4px 4px 0;
-}
-
-.tabs-right > .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
-}
-
-.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
-  border-color: #ddd #ddd #ddd transparent;
-}
-
 .nav > .disabled > a {
   color: #999999;
 }
diff --git a/docs/components.html b/docs/components.html
index 7808d0477..87bef8db2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -860,159 +860,6 @@
 </ul>
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Tabbable nav</h2>
-          <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>
-
-          <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="bs-docs-example">
-            <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 -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="tab1"&gt;
-      &lt;p&gt;I'm in Section 1.&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="tab-pane" id="tab2"&gt;
-      &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>Fade in tabs</h4>
-          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
-
-          <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>
-
-          <h3>Tabbable in any direction</h3>
-
-          <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="bs-docs-example">
-            <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 -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-below"&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &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="bs-docs-example">
-            <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>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-left"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &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="bs-docs-example">
-            <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>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-right"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>
 
 
diff --git a/docs/javascript.html b/docs/javascript.html
index 03d670132..241ea9cd0 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -691,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</pre>
+          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
 
           <h3>Methods</h3>
           <h4>$().tab</h4>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2ea87c16f..c6a6776d0 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -791,159 +791,6 @@
 &lt;/ul&gt;
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>{{_i}}Tabbable nav{{/i}}</h2>
-          <p>{{_i}}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.{{/i}}</p>
-
-          <h3>{{_i}}Tabbable example{{/i}}</h3>
-          <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable" style="margin-bottom: 18px;">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</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}}I'm in Section 1.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="tab2">
-                  <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="tab3">
-                  <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="tab1"&gt;
-      &lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="tab-pane" id="tab2"&gt;
-      &lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Fade in tabs{{/i}}</h4>
-          <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
-
-          <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
-          <p>{{_i}}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>.{{/i}}</p>
-
-          <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
-
-          <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
-          <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-below">
-              <div class="tab-content">
-                <div class="tab-pane active" id="A">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="B">
-                  <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="C">
-                  <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
-                </div>
-              </div>
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-below"&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Tabs on the left{{/i}}</h4>
-          <p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-left">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="lA">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="lB">
-                  <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="lC">
-                  <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-left"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Tabs on the right{{/i}}</h4>
-          <p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-right">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="rA">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="rB">
-                  <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="rC">
-                  <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-right"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>
 
 
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 6b7821f10..e3a5e5ced 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -623,6 +623,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
 
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tab</h4>