Bootstrap Side Tabs

Bootstrap Side Tabs

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css">
<div class="tab-pane" id="tabs-side">
							<h3>Side Tabs</h3>
							<div class="tabbable tabs-left">
							  <ul class="nav nav-tabs span2">
							    <li class="active"><a href="#tabs2-pane1" data-toggle="tab">Tab 1</a></li>
							    <li><a href="#tabs2-pane2" data-toggle="tab">Tab 2</a></li>
							    <li><a href="#tabs2-pane3" data-toggle="tab">Tab 3</a></li>
							    <li><a href="#tabs2-pane4" data-toggle="tab">Tab 4</a></li>
							  </ul>
							  <div class="tab-content span5">
							    <div id="tabs2-pane1" class="tab-pane active">
							      <h4>The Markup</h4>
							      <pre>&lt;div class=&quot;tabbable <strong>tabs-left</strong>&quot;&gt;
  &lt;ul class=&quot;nav nav-tabs&quot;&gt;
    //and so on ...</pre>
							    </div>
							    <div id="tabs2-pane2" class="tab-pane">
							    <h4>Pane 2 Content</h4>
							      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas.</p>
							    </div>
							    <div id="tabs2-pane3" class="tab-pane">
							      <h4>Pane 3 Content</h4>
							      <p>Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
							    </div>
                                    <div id="tabs2-pane4" class="tab-pane">
							      <h4>Pane 4 Content</h4>
							      <p>bla bla porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
							    </div>