Vertical tabs component for bootstrap

 The tabs component which comes with twitter bootstrap only allows us to create horizontal tabs.In order to create vertical tabs, additional css is required which can be download form the github link provided below.

https://github.com/dbtek/bootstrap-vertical-tabs

How to use:

1.Download the css file from the link given above.

2.Include the file in the html page.

 ex:

 <link rel="stylesheet" href="bootstrap.vertical-tabs.css">

3. Create the html markup.

   We are going to create a tabs on the left side and the main content area on the right side.

   So the html markup will be like below:

 <div class="col-xs-3"> 

    <!-- Nav tabs -->

    <ul class="nav nav-tabs tabs-left">

      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>

      <li><a href="#profile" data-toggle="tab">Profile</a></li>

      <li><a href="#messages" data-toggle="tab">Messages</a></li>

      <li><a href="#settings" data-toggle="tab">Settings</a></li>

    </ul>

</div>

<div class="col-xs-9">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Tab.</div>
      <div class="tab-pane" id="profile">Profile Tab.</div>
      <div class="tab-pane" id="messages">Messages Tab.</div>
      <div class="tab-pane" id="settings">Settings Tab.</div>
    </div>
</div>

The whole structure is divided into two columns one is of 3 columns space and the other one is 9 column space and the classes "nav" and "nav-tabs" are defined in bootstrap css.

The tabs menu is created with <ul> tag with an anchor tag inside each of the <li> items.The anchors has the href attribute set to the Id of the specific div which is to be shown when the class "active " is on the <li>

Which ever list item is clicked the class "active" gets added to only that item and the div with the specific id which is provided on the anchor tag as target also has the class "active" attached to it and at the same time this class is removed from all of its siblings.