How do I make Bootstrap grids work as expected inside a tab pane?

Question

I've seen a few questions similar to this, but not hitting the exact same problem that I have seen.

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

Example:

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
      </ul>

      <div id="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

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.

Any ideas?

Solution 1

You're missing .tab-content class on the container with tabs, which applies display:none to the hidden ones. Also, both of your tabs have active class, which makes both of them to show up at the beginning.

Here is the markup:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a>
        </li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a>
        </li>
      </ul>

      <div id="tab-content" class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
              ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade">
          <div class="row">
            <div class="col-sm-6">
              ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Solution 2

Working example

#tabby h3 {
  color: white;
  background-color: #428bca;
  padding: 5px 15px;
  margin-bottom: 0;
}
.colorBlue {
  color: white;
  background-color: #266080;
  padding: 15px;
  margin: 0;
}
.colorRed {
  color: white;
  background-color: #f00;
  padding: 15px;
}
.colorYellow {
  color: white;
  background-color: #E4EC45;
  padding: 15px;
}
.colorGrey {
  color: white;
  background-color: #343537;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Panels and Grids</h2>

</div>
<div id="tabby" class="container">
  <ul class="nav nav-tabs">
    <li class="active"> <a href="#1" data-toggle="tab">Uno</a>

    </li>
    <li><a href="#2" data-toggle="tab">Dos</a>

    </li>
    <li><a href="#3" data-toggle="tab">Tres</a>

    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="1">
      <h3>Tab One</h3>

      <div class="col-md-6 colorBlue">This is my first 6.</div>
      <div class="col-md-6 colorRed">This is my second 6.</div>
    </div>
    <!--/row-->
    <div class="tab-pane" id="2">
      <h3>Tab Two</h3>

      <div class="col-md-4 colorBlue">This is my first 3.</div>
      <div class="col-md-4 colorRed">This is my second 3.</div>
      <div class="col-md-4 colorYellow">This is my second 3.</div>
    </div>
    <div class="tab-pane" id="3">
      <h3>Tab Three</h3>

      <div class="col-md-3 colorBlue">This is my first 4.</div>
      <div class="col-md-3 colorRed">This is my second 4.</div>
      <div class="col-md-3 colorYellow">This is my second 4.</div>
      <div class="col-md-3 colorGrey">This is my second 4.</div>
    </div>
  </div>
</div>