[twitter-bootstrap-3] bootstrap 3 tabs not working properly

I almost copied the code from their website. The tab is initiated perfectly, and when I click on tabs, new panels are activated. However, the "active" class is not applied to the activated tab. This is the code:

<ul class="nav nav-tabs">
 <li data-toggle="tab"  data-target="#a" class="active"><a href="#">a</a></li>
  <li data-toggle="tab"  data-target="#b" ><a href="#">b</a></li>
  <li data-toggle="tab"  data-target="#c"  ><a href="#">c</a></li>
</ul>

 <div class="tab-content">
  <div class="tab-pane fade in active" id="a"> in tab a </div>
  <div class="tab-pane fade" id="b">in tab b</div>
  <div class="tab-pane fade" id="c">in tab c</div>
</div>

Use this for your code

<ul class="nav nav-tabs" style="margin-top:10em;">
  <li class="active" data-toggle="tab"><a href="#">Assign</a></li>
<li data-toggle="tab"><a href="#">Two</a></li>
<li data-toggle="tab"><a href="#">Three</a></li>

My problem was with extra </div> tag inside the first tab.

For anyone struggling with this issue using bootstrap3 use the below classlist. If you've copy pasted from the DOC, It won't surely work. Becasue of the .show in new version.

<div class="tab-pane fade in active" >

<div class="tab-pane fade in" >

for some weird reason bootstrap tabs were not working for me until i was using href like:-

<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>

but it started working as soon as i replaced href with data-target like:-

<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>

This will work

$(".nav-tabs a").click(function(){
     $(this).tab('show');
 });

In my case we were setting the div id as a number and setting the href="#123", this did not work.. adding a prefix to the id helped.

Example: This did not work-

<li> <a data-toggle="tab" href="#@i"> <li/>
...
<div class="tab-pane" id="#@i">

This worked:

<li><a data-toggle="tab" href="#prefix@i"><li/>
...
<div class="tab-pane" id="#prefix@i">

In my case, I have two elements with the same id. I could not notice the cause of problem for a long time, because the first such element was hidden.

When I moved the following lines from the head section to the end of the body section it worked.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

My problem was that I sillily concluded bootstrap documentation is the latest one.
If you are using Bootstrap 4, the necessary working tab markub is: http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior

<ul>
  <li class="nav-item"><a class="active" href="#a" data-toggle="tab">a</a></li>
  <li class="nav-item"><a                href="#b" data-toggle="tab">b</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="a">a</div>
  <div class="tab-pane"        id="b">b</div>
</div>

One more thing to check for this issue is html tag attribute id. You should check any other html tags in that page have the same id as nav tab id.

Make sure your jquery is inserted BEFORE bootstrap js file:

<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>

When I removed the smooth scroll script (https://github.com/cferdinandi/smooth-scroll), it worked.

In my case (dynamically generating the sections): the issue was a missing "#" in href="#...".