Bootstrap tab - active class not working on page loading

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

It seems that having a combination of "fade" with the "active" class on the tab content seems to be conflicting on my particular usage of the tab panels. It still didn't load the content on the initial page load.

Once I removed "fade" then things seemed to work.

<div class="tab-pane active" id="sales" role="tabpanel">

<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>