Bootstrap tab - active class not working on page loading

Question

My code is below. Notice the tab 'one' is active. But the problem is when i open the page, the tab really shows active, BUT the tab content does not show ; it only shows when i click on the tab manually. How to fix this ?

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a>
  </li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a>
  </li>
</ul>

<div class="tab-content">

  <div class="tab-pane fade in" id="one">
    <p>Tab one content</p>
  </div>

  <div class="tab-pane fade in" id="two">
    <p>Tab two content</p>
  </div>

</div>

Answer 1

<div class="tab-pane fade in" id="one"> <p>Tab one content</p> </div> 

Change this to

<div class="tab-pane active in" id="one"> <p>Tab one content</p> </div> 

Answer 2

Add class active also on the selected tab content

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a></li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a></li>
</ul>

<div class="tab-content">

  <!-- Show this tab by adding `active` class -->
  <div class="tab-pane fade in active" id="one">
    <p>Tab one content</p>
  </div>

  <!-- I removed `in` class here so it will have a fade in effect when showed -->
  <div class="tab-pane fade" id="two">
    <p>Tab two content</p>
  </div>

</div>

Have a look at this: Fiddle