Bootstrap Tabs do not work when clicked

Question

I am using bootstrap for a website and using the tab functionality that it brings. I looked at the documentation and I believe that I am doing everything right.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section id="works" class="ptb-80 bb-1"> <div class="container"> <div class="text-center"> <h2>How It Works?</h2> <div class="seperator"></div> </div> <div class="tabbable full-width-tabs"> <div class="tab-content"> <div class="tab-pane active" id="tab-one"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Build Your Own</span><br>Application Pool</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-two"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Search for</span><br>Uploaded Files</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-three"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Keep The Files</span><br>Safe and Secure</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-four"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Share with</span><br>Your Own Friends</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> </div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab-one" data-toggle="tab" class="primary-bg"> <i>1</i> <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5> </a> </li> <li> <a href="#tab-two" data-toggle="tab" class="secondary-bg"> <i>2</i> <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5> </a> </li> <li> <a href="#tab-three" data-toggle="tab" class="primary-bg"> <i>3</i> <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5> </a> </li> <li> <a href="#tab-four" data-toggle="tab" class="secondary-bg"> <i>4</i> <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5> </a> </li> </ul> </div> <!-- /tabbable --> </div> <!-- End Container --> </section> <!-- End Section --> 

I have been unable to find what is wrong with the tabs, I have not changed anything in the javascript files so it should work. I am not sure how I include bootstrap in to the code snippet thing so I am using bootstrap v3.3.6.

From other posts I have looked at I do not see anything that is out of place.

Answer 1

you are missing the bootstrap.js file, add it and it works. See below demo of your code

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <section id="works" class="ptb-80 bb-1"> <div class="container"> <div class="text-center"> <h2>How It Works?</h2> <div class="seperator"></div> </div> <div class="tabbable full-width-tabs"> <div class="tab-content"> <div class="tab-pane active" id="tab-one"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Build Your Own</span><br>Application Pool</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-two"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Search for</span><br>Uploaded Files</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-three"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Keep The Files</span><br>Safe and Secure</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-four"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Share with</span><br>Your Own Friends</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> </div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab-one" data-toggle="tab" class="primary-bg"> <i>1</i> <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5> </a> </li> <li> <a href="#tab-two" data-toggle="tab" class="secondary-bg"> <i>2</i> <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5> </a> </li> <li> <a href="#tab-three" data-toggle="tab" class="primary-bg"> <i>3</i> <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5> </a> </li> <li> <a href="#tab-four" data-toggle="tab" class="secondary-bg"> <i>4</i> <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5> </a> </li> </ul> </div> <!-- /tabbable --> </div> <!-- End Container --> </section> <!-- End Section --> 

Answer 2

In the documentation all the tab examples i see assign a role to the anchor tag in the tab list: https://getbootstrap.com/docs/3.3/javascript/#tabs

 <div> <!-- Nav tabs --> <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> <!-- Tab panes --> <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> 

Maybe try adding roles? I think the role effect how the item is supposed to act, so instead of acting like an anchor link, it should act like a tab.