Hello, i was using this code to create Jquery tabs, but i don't want to use it now, i want to use bootstrap code instead of current one
my current code is
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab 1</a></li>
<li><a href="#tabs-2">tab 2</a></li>
</ul>
<div id="tabs-1">
tab-1 data
</div>
<div id="tabs-2">
tab2 data
</div>
</div>
and jquery with it is as per details Jquery-tabs
I don't want to use jquery, i want to do it with CSS only
Answered by:- vikas_jk
Hello, thank you for asking question
Yes you can do it easily with bootstrap, there is no need to use jquery if you don't want to, here is the example code
<!--This code creates tabs-->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#tab1">Tab 1</a></li>
<li><a data-toggle="pill" href="#tab2">Tab 2</a></li>
<li><a data-toggle="pill" href="#tab3">tab 3</a></li>
</ul>
<!--This code creates tab content-->
<div class="tab-content">
<!--.in .active helps to show this page when page is loaded-->
<div id="tab1" class="tab-pane fade in active">
tab1 text here
</div>
<div id="tab2" class="tab-pane fade">
tab 2 text here
</div>
<div id="tab3" class="tab-pane fade">
tab 3 text here
</div>
</div>I hope this helps.
Answered by:- neena
You can use Bootstrap tabs by including bootstrap.min.js in yout code, with the demo code as below
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
Home tab
</div>
<div id="menu1" class="tab-pane fade">
Menu 1 tab
</div>
<div id="menu2" class="tab-pane fade">
Menu 2 tab
</div>
<div id="menu3" class="tab-pane fade">
Menu 3 Tab content
</div>
</div>Working Example
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly
Buy us a coffee
Become a Patron