Create panel with two columns

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

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

Answer 2

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