title: How do I make Bootstrap grids work as expected inside a tab pane?
body: <p>I've seen a few questions similar to this, but not hitting the exact same problem that I have seen.</p>
  
  <p>I already know how to make grids (more or less) work inside a tab pane. However, they don't seem to be working as I expect. What I expect is to see is a set of tabs, each using their own personal space to display grid-contained data. What I see, instead, is sets of tabs with data that is attempting to share the same grid space, and therefore the rows of data are stacking so that they are pushed down the page. The entire tab area will be twice as high as necessary, with the data on Tab2 being located on the bottom half of the tab pane, while the top half is empty (or would be holding data from Tab1).</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-body"&gt;
  
        &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div id="tab-content"&gt;
          &lt;div id="tab1" class="tab-pane fade in active"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
               ...tab1, col1 information...
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
               ...tab1, col2 information...
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="tab2" class="tab-pane fade in active"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
               ...tab2, col1 information...
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
               ...tab2, col2 information...
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to figure out is if I'm coding something wrong or if Bootstrap simply does not support what I'm trying to accomplish. I have already tested the idea of removing the .row divs, with no success. (The data stacks unevenly, rather than staying in separate rows.) It appears as if .col*-* classes are unable to share the same space, even while hidden.</p>
  
  <p>Any ideas?</p>