multiple panels inside tab breaks tabs

Question

I am trying to use bootstrap panels with bootstrap tabs. It works fine when one panel is in a tab, but as soon as I stick another panel in the tab, the tab functionality breaks:

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#contact" role="tab" data-toggle="tab">Contact Information</a></li>
  <li><a href="#lead" role="tab" data-toggle="tab">Lead History</a></li>
  <li><a href="#client" role="tab" data-toggle="tab">Client History</a></li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
  <div class="tab-pane active" id="contact">
    <div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">Contact Information</div>
        <div class="panel-body">
          <div class="well">

          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Open Tasks</div>
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">

  </div>
</div>
  </div>
  <div class="tab-pane" id="lead">
    <h1>Hello World</h1>
  </div>
  <div class="tab-pane" id="client">
        <h1>Hello World Again</h1>

  </div>
</div>

Here is the demo showing how the tabs break:

http://www.bootply.com/oCwV3bLFQl

As soon as you remove the second panel-default in col-md-4 class, then the tabs work again. How can I have multiple panels within a tab and have the tab continue to work?

EdwardM EdwardM · Accepted Answer · 2014-10-06T18:53:34

Your last two .tab-pane divs were outside of the .tab-content div. Edited fork: http://www.bootply.com/WI7OzQ0nqu

multiple panels inside tab breaks tabs

1 Answers