Want to use Bootstrap tabs instead of jquery


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


Asked by:- pika
1
: 4082 At:- 5/18/2017 2:59:25 PM
CSS Bootstrap jquery







2 Answers
profileImage 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.

2
At:- 5/18/2017 3:23:49 PM
Ok, thank you, it is working 0
By : pika - at :- 5/18/2017 4:47:01 PM


profileImage 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

0
At:- 10/27/2017 3:14:08 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use