How to add Next and Previous buttons to Twitter Bootstrap tabs

By rickvdbosch

- 1 minutes read - 125 words

Just a quickie today: when working with Twitter Bootstrap tabs, like I am in my ASP.NET MVC 4 project, you might want to add Next and Previous buttons on the tabs to create something of a Wizard. Here’sa step by step overview of how I did this:

Add an ID to all the ListItem elements that are used for the tab navigation. For instance:

<ul class="nav nav-tabs" id="myTab">
  <li><a href="#example" data-toggle="tab" id="xmpl">Example</a></li>
    ...
</ul>

Add a button you would like to use to activate the Example tab

In the onclick, call the ShowTab JavaScript function with the id of the ListItem for the Example tab (which is xmpl in this example)

The ShowTab function is simple:

function ShowTab(tabname){
    $('#' + tabname).tab('show');
}

Hope this helps