Bootstrap white break in grid system

Question

My bootstrap panel gives a white break when I add content to my right sidebar. I tried to change the col-mds and adding a clearfix, but that didn't worked.

Picture: https://i.snag.gy/54SNqw.jpg

Code:

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.custom-header-panel {
  background-color: #004b8e !important;
  border-color: #004b8e !important;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
        This doesn't work. tste
        <br>test
        <br>test
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

Any idea's to fix this?

Not sure what you mean "white break". Do you mean the spacing (padding) between the columns? http://www.codeply.com/go/Aal8awp4pz — Carol Skelly, Jan 04 '17 at 23:29
Are you talking about the gap caused because the sidebar is taller than the first panel? If so this question has been answered on SO before: http://stackoverflow.com/questions/19572753/bootstrap-3-fluid-grid-layout-issues/19573033 Also, you don't need to keep using a new `row` tag. — Carol Skelly, Jan 04 '17 at 23:53
I am talking about that white block part between the first panel and the second panel: https://i.snag.gy/4xiu5p.jpg — Teun Strik, Jan 05 '17 at 09:29
It's because of the height of the columns and has aleady been answered on SO. See http://stackoverflow.com/questions/24718039/bootstrap-gap-between-columns, http://stackoverflow.com/questions/19572753/bootstrap-3-fluid-grid-layout-issues/19573033 and http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights Your options are to make panels the same hieght, use CSS3 columns or masonry plugin. — Carol Skelly, Jan 05 '17 at 12:55

Banzay · Answer 1 · 2017-01-05T05:59:51.003

First you need to add outer div - container-fluid, after this you need add div with class row which is wrapping panel.

Breaks appear because all classes col-*-* (as well as container-fluid) have default left and right paddings equal 15px. Class row compensates these paddings with its negative left and right margins equal -15px.

Actually, you can just add class row to the <div class="panel">, but it's not very right solution.

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.custom-header-panel {
  background-color: #004b8e !important;
  border-color: #004b8e !important;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
        This doesn't work. tste
        <br>test
        <br>test
      </div>
    </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
</div>

Bootstrap white break in grid system

1 Answers1