<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>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>
<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 <ahref="./javascript.html#tabs">on the javascript docs page</a>.</p>
<p><aclass="btn"href="./javascript.html#tabs">Get the javascript →</a></p>
</div>
</div>
<divclass="span4">
<divclass="span8">
<h3>Tabbable example</h3>
<h3>Tabbable example</h3>
<p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p>
<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>
<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>
<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>
<p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
<p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
<hr>
<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>
<hr>
<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 <ahref="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
<p><aclass="btn"href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p>
</div>
</div>
<divclass="span4">
<divclass="span8">
<h3>{{_i}}Tabbable example{{/i}}</h3>
<h3>{{_i}}Tabbable example{{/i}}</h3>
<p>{{_i}}To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.{{/i}}</p>
<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>
<p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
<p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
</div>
</div>
</div>
</div>
</div><!-- /tabbable -->
</div><!-- /tabbable -->
</div>
<p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p>
<divclass="span4">
<h3>{{_i}}Custom jQuery plugin{{/i}}</h3>
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p>
<p><aclass="btn"href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p>
</div>
</div>
<h3>{{_i}}Straightforward markup{{/i}}</h3>
<h3>{{_i}}Straightforward markup{{/i}}</h3>
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="tabbable">
<div class="tabbable"><-- Only required for left/right tabs -->
