Bootstrap nav pills- first nav pill data still there when 2nd nav pill active

Question

I am using Bootstrap pills for toggling on the same page. There are two nav-pills and two divs corresponding to each of them.I have constructed the first div correctly and is working fine. But when I am trying to construct the second div, the contents of the first div are hindering in the construction of the second div. For ex: the col-* classes not working properly. In short the data of the first div, although invisible, is still there when I am on the second page.

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="container-fluid tab-content fade in active" id = "homeTab">
 ....    
</div>

<div class="container-fluid tab-content fade" id = "metaTab">
 ....    
</div>

Answer 1

You are misusing tab-content class. It should be wrapped around all tabs, and tabs should have tab-pane class instead, like this:

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
    ...tab 1 content...
    </div>

    <div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
    ...tab 2 content...    
    </div>
</div>

Here is more about tabs in bootstrap: http://getbootstrap.com/javascript/#tabs