Bootstrap grid: vertical placement of multiple divs in a row?

Question

In a Bootstrap .row, I have an arbitrary number of divs (with classes col-xs-12 col-sm-6 col-md-4 col-lg-3) which each have their own height.

The result (on a large screen) is like this picture (.row in red, .cols in black):

bad grid

I would like every div to be as high as it can, right below the div above it, as in the picture below. Is that possible with Bootstrap, without having to manually sort my divs into columns?

good grid

Here's my code:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  ...
</div>

OK, editing my question but it's just one row with a lot of divs. — foucdeg, Feb 28 '16 at 21:19
This is called a Masonry layout. There is no current pure CSS way to achieve this and you'd have to use JavaScript to do it. — Aziz, Feb 28 '16 at 21:19

score 0 · Answer 1 · answered Dec 20 '17 at 22:08

Bill Reinhardt created a nice layout for you to start from.

This should help you: https://codepen.io/billreinhardt/pen/ZGVNJL

HTML:

<div class="container">
    <h1>Masonry CSS with Bootstrap</h1>
    <div class="row">
<div class="item">
  <div class="well"> 
    1 blah blah blah
  </div>
</div>
<div class="item">
    <div class="well"> 
    2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    3 blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah 
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>

CSS:

.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}

Bootstrap grid: vertical placement of multiple divs in a row?

1 Answers1