Today, We want to share with you bootstrap 3 tabs.In this post we will show you Dynamic Tabs Responsive Example, hear for How to build simple tabs with jQuery? we will give you demo and example for implement.In this post, we will learn about Dynamically Set Active Tab In Jquery with an example.
Bootstrap Tabs and Pills
tabs bootstrap 3
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Bootstrap 3 – Interactive Tabs
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
HTML Code
<html>
<head>
<title>Sample Tabs - www.pakainfo.com</title>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Full TamilRokers Movie Download for tab 1.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Full TamilRokers Movie Download for tab 2.</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Full TamilRokers Movie Download for tab 3.</p>
</div>
</div>
</div>
</body>
</html>
I hope you get an idea about bootstrap tabs responsive.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.