1. Home
  2. Bootstrap
  3. Tab

Tab in Twitter Bootstrap

This article will guide you to create tab using twitter bootstrap. You need to include bootstrap.css and bootstrap.js file in your page where you want to display the Tab. Click here to learn detail about bootstrap and download the required files.

HTML Tab Code:

<div class="bs-example bs-example-tabs">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a data-toggle="tab" href="#dropdown1">Vision</a></li>
<li class=""><a data-toggle="tab" href="#dropdown2">Mission</a></li>
</ul>
</li>
<li class=""><a data-toggle="tab" href="#services">Services</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="home" class="tab-pane fade active in">
<p> ...</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<p>...</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<p>...</p>
</div>
<div id="services" class="tab-pane fade ">
<p>...</p>
</div>
</div>
</div>

Output:

Home Data: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mauris in tortor semper bibendum eget nec nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper placerat nisi ut scelerisque. Nulla vestibulum ornare massa, sit amet tristique enim tristique non. Sed pharetra diam magna, sed hendrerit erat consequat id. Cras lacinia nunc scelerisque odio hendrerit sagittis. Vestibulum porttitor congue nunc, et consectetur dui rhoncus et. Nunc et cursus est, quis molestie eros. Cras viverra purus ut elit fringilla volutpat. Donec sit amet massa erat. Sed tincidunt velit dolor, vel sollicitudin lectus cursus ac.

Services Data: Vestibulum at vulputate lorem. Vestibulum feugiat, dolor et varius malesuada, sapien massa dignissim risus, a tristique erat tellus a neque. Donec sodales purus consequat, rutrum velit ut, rhoncus dolor. Nullam ac arcu eget nulla tempor dignissim volutpat sit amet odio. Nunc rutrum semper ipsum non congue. Morbi blandit lectus leo, ac ultricies enim laoreet in. Ut eleifend eros lorem, a aliquet mauris commodo in. Nunc aliquet arcu eget risus faucibus tempor. Ut vel diam vel felis fringilla ornare. Curabitur blandit gravida libero vitae hendrerit. Duis vel scelerisque nunc, at scelerisque nibh. Suspendisse venenatis libero eros. Vivamus elementum odio non arcu laoreet hendrerit. Curabitur porttitor felis id porttitor egestas. Fusce arcu tortor, condimentum vitae eros a, semper accumsan mauris. Vestibulum libero felis, placerat nec auctor in, iaculis in nisi.

Maecenas orci diam, lobortis eget dignissim id, sollicitudin accumsan est. In consectetur lorem sit amet feugiat placerat. Vivamus quis vulputate augue, in tempor orci. Nullam vitae elit eu enim elementum accumsan a ac ante. Cras egestas tellus eget sem venenatis, et dictum lacus tempus. Duis hendrerit purus interdum est placerat, nec ultrices risus ultricies. Fusce ornare enim non tempor scelerisque. Pellentesque auctor posuere dictum. Ut tortor nulla, ultricies mollis magna vestibulum, rhoncus vestibulum massa. Nam tempus, ipsum ut imperdiet tincidunt, risus elit pretium lacus, vitae lobortis sapien arcu quis sem. Suspendisse viverra, purus id ultricies scelerisque, magna elit volutpat neque, non dictum eros libero sed ligula. Duis mattis turpis vel aliquet elementum. Aenean quis tempus lorem.


Enable tabs via JavaScript

$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

Different ways to activate individual tabs

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)


Download File

Total Downloads: 2753

Bootstrap Design Elements

Subscribe

© Copyright 2024 | A2Z Webhelp

Top