Create panel with two columns - css

Question

I am trying to create a template that has two columns in a panel. I am using plainBootstrap v3.3.7. Below you can find what I tried:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-2">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-10">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, my panel look like the following on my screen:
As you can see, in my panel the two columns inside overlap.
Any suggestions why my table and the section overlap so much?
I appreciate your replies!

Answer 1

Because you are wrapping a table which is by default not responsive with .col-md-2 which is a responsive class.
So you have to wrap it with .table-responsive ( a bootstrap class for making tables responsive ), check the updated snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-2">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-10">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps :)

Answer 2

The problem is your columns, wrap both the table and the section in <div class="col-md-6">In the bootstrap grid system when you define <div class="col-md-12"></div>, This is a full grid (bootstrap maximum grid) so in order to get two equal columns out of this, you just define two columns with <div class="col-md-6"></div>. Reference
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">
Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">
Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Run the snippet as Full page