Is it possible to stagger columns using bootstrap?

Question

I've coded the following to be col-sm-6 boxes using Bootstrap with content that vary in length, however upon wrapping the boxes align with each other instead of relative to the bottom of the one above it. Is there any way to fix this issue?

How it's supposed to be:

How it is:

I think [this question](http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights) might help you? — Dana, Jan 18 '17 at 05:09

score 2 · Answer 1 · answered Jan 18 '17 at 05:02

If you don't want to use flexbox, you could use CSS columns:

.container    { column-count: 2; }
p             { border: 1px solid gray; background-color: lightgray; }
p:first-child { margin-top: 0; }

<div class="container">
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
</div>

In your particular case, columns might actually be better than flexbox, since the columns will automatically balance.

Michael Coker · Answer 2 · 2017-01-18T05:12:11.727

You can "fake" that layout if you define 2 columns - one on the left, and one on the right, then put your articles in those columns.

But a better way to do it is using a plugin like masonry. Masonry is great for layouts like this.

p {
  background: #eee;
  }

<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-lg-6">
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
    </div>
      <div class="col-lg-6">
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
    </div>
</div> 
</div>

Your approach is going to require determining in advance what items should go in what columns. — , Jan 18 '17 at 05:00

score 0 · Answer 3 · answered Jan 18 '17 at 05:34

0

use

<div class="clearfix"></div>

after 2nd and 4th div. if you have more divs then use this class after 6th div.

answered Jan 18 '17 at 05:34

bahubali

11

Is it possible to stagger columns using bootstrap?

3 Answers3