title: Tab panes in Bootstrap
body: <p>I am using Bootstrap tabs and the the content for the third tab is not showing up in the third tab pane, instead it is showing under the content for the 1st and 2nd panes. I don't know if I have not properly nested my html, or if there is an issue with my navigation bar. I am new to Bootstrap. Any help is appreciated.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;body role = "document"&gt;
  
  &lt;div class="container" &gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;h2&gt;Presidential Trivia&lt;/h2&gt; &lt;/hr&gt;
              &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li role="presentation" class="active"&gt;&lt;a href="#tab1" aria-controls="home" data-toggle="tab"&gt;Quiz 1&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#tab2" aria-controls="profile" data-toggle="tab"&gt;Quiz 2&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#tab3" aria-controls="quiz3"   data-toggle="tab"&gt;Quiz 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;!-- tab sections --&gt;
  
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="tab1"&gt; 
              &lt;div class="row" style="height:100px"&gt;
              &lt;/div&gt;  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-4"&gt;&lt;/div&gt;    
                      &lt;div class="col-md-4"&gt;
                          &lt;div id='main'  class="panel panel-info"&gt;
                          &lt;div id='question1' class="panel-body"&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="progress"&gt;
                              &lt;div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%"&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div id='buttons'&gt;
                                  &lt;button id='prev' class='btn'&gt;Back&lt;/button&gt;                             
                                  &lt;button id='next' class='btn pull-right'&gt;Next&lt;/button&gt;&lt;br&gt;&lt;br&gt;
                                  &lt;button id='restart' class='btn'&gt;Start Over?&lt;/button&gt;                               
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;&lt;/div&gt;    
              &lt;/div&gt;
          &lt;/div&gt;      
          &lt;div class="tab-pane" id="tab2"&gt;
              &lt;div class="row" style="height:100px"&gt;
              &lt;/div&gt;  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;&lt;/div&gt;    
                          &lt;div class="col-md-4"&gt;
                              &lt;div id='main2' class="panel panel-info"&gt;
                              &lt;div id='question2' class="panel-body"&gt;
                              &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="progress"&gt;
                                  &lt;div id="progressBar2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;                          
                              &lt;div id='buttons'&gt;
                                      &lt;button id='prev2' class='btn'&gt;Back&lt;/button&gt;                                
                                      &lt;button id='next2' class='btn pull-right'&gt;Next&lt;/button&gt;&lt;br&gt;&lt;br&gt;
                                      &lt;button id='restart2' class='btn'&gt;Start Over?&lt;/button&gt;                              
                              &lt;/div&gt;                          
                          &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;&lt;/div&gt;    
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab3"&gt;        
              &lt;div class="row" style="height:100px"&gt;
              &lt;/div&gt;  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;&lt;/div&gt;    
                          &lt;div class="col-md-4"&gt;
  
                              &lt;div id='main3' class="panel panel-info"&gt;
                              &lt;div id='question3' class="panel-body"&gt;
                              &lt;/div&gt;
                              &lt;/div&gt;                          
                              &lt;div class="progress"&gt;
                                  &lt;div id="progressBar3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;                          
                              &lt;div id='buttons'&gt;
                                      &lt;button id='prev3' class='btn'&gt;Back&lt;/button&gt;                                
                                      &lt;button id='next3' class='btn pull-right'&gt;Next&lt;/button&gt;&lt;br&gt;&lt;br&gt;
                                      &lt;button id='restart3' class='btn'&gt;Start Over?&lt;/button&gt;                              
                              &lt;/div&gt;                          
                          &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;&lt;/div&gt;    
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="Assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the page: <a href="http://jakeratliff.com/quiz.html" rel="nofollow">http://jakeratliff.com/quiz.html</a></p>