twitter-bootstrappanelgutter

No gutter between 2 bootstrap 3.x panel

I need to have 2 panel in Bootstrap 3.x horizontally. I added the normal codes like this:

<div class="panel panel-default col-md-6">
    <div class="panel-heading">Heading</div>
    <div class="panel-body">
        Something ...
    </div>
</div>
<div class="panel panel-default col-md-6">
    <div class="panel-heading">Heading</div>
    <div class="panel-body">
        Something ...
    </div>
</div>

But there is no gutter between these 2 panel and they appear like this:

Captured image How can I solve this problem?

Solution

  • What about making the panels children on the bootstrap columns?
    https://codepen.io/panchroma/pen/MVomeX 

    <div class="col-md-6">
 <div class="panel panel-default">
    <div class="panel-heading">Heading</div>
    <div class="panel-body">
        Something ...
    </div>
  </div>
</div>
<div class="col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading">Heading</div>
    <div class="panel-body">
        Something ...
    </div>
  </div>
</div>