Twitter bootstrap: keep constant spacing between blocs

Question

When adding a series of bloc divisions with different heights, the space between those blocs is not kept constant. In some cases this variation is quite unsightly.

Is there a way to force keeping the same space between every blocs (red space on the picture below) ?

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
 
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.css" ></link>
    
</head>

  
<div class="container">

    <div class="col-sm-12 " style="padding-right:0px; padding-left:0px; background-color:#f5f5f5;border:1px solid #e3e3e3">

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit.Cras scelerisque enim sem, venenatis aliquet neque aliquet nec. Pellentesque odio nisl, dapibus ac efficitur a, molestie a lorem.</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
        
        <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt.</p>
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    
    </div>

</div>

Possible duplicate of [Bootstrap: how to stack divs of different heights?](http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights) — George, Jan 18 '16 at 10:14
Hello, this is a common issue when dealing with BS. What i usually do is setting min and max height with css for every responsive breakpoint. — Enrico, Jan 18 '16 at 11:35
@George, could be yes. But in my case the number of blocs is not fixed and depend on the numer of posts. I have difficulties to adapt the "clearfix visible" method suggested there. — michltm, Jan 18 '16 at 11:59
There is not a single go-to solution to this 'problem'. The grid system in Bootstrap isn't designed to stack columns one underneath the other; it expects them to be the same height. The simplest work-around (which may or may not be a solution for you) is, as mentioned by @Enrico setting a min height. — George, Jan 18 '16 at 12:02

Twitter bootstrap: keep constant spacing between blocs

0 Answers0