Monday, 28 May 2012

Tabs using Twitter Bootstrap


I had been trying to search out a real world example of how tabs worked in Twitter Bootstrap and found that, by far, most examples missed some crucial elements. Below, I have supplied some code to paste into your Twitter Bootstrap site which you can play with.

<div class="row">
<div class="span16">
 <div class="tabbable" id="usernav">
 <ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#jobs" data-toggle="tab">Jobs</a></li>
 </ul>
 <div class="tab-content">
<div class="tab-pane active" id="home">
This is my home content.
</div>
<div class="tab-pane" id="jobs">
This is the jobs section.
</div>
 </div>
</div>
</div>
</div>