stack bootstrap column vertically

Question

i am trying to make a responsive website, a blog but i have a problem that am experiencing, the bootstrap grid i have col-lg-4 per blog but they vary in height and it follows a pattern by maintaining the same line of column, but i would like to remove the extra spaces. hope anyone around could help.

<div class="container">
   <div class="row">
      <div class="col-lg-4" style="height: 200px"> i am a div of height 
      200px</div>
      <div class="col-lg-4" style="height: 400px"> i am a div of height 
      400px</div>
      <div class="col-lg-4" style="height: 300px"> i am a div of height 
      300px</div>
      <div class="col-lg-4" style="height: 500px"> i am a div of height 
      500px</div>
   </div>
</div>


row{ display: flex; flex-wrap: nowrap}

My current blog structure

The way i want it to be

which bootstrap version are you using? – DavidDomain Dec 16 '17 at 18:56 — DavidDomain, Dec 16 '17 at 18:56

score 4 · Answer 1 · answered Dec 16 '17 at 19:06

I am assuming you are using the latest BS version. If so, you should take a look at:

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Here is the example from the docs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <div class="row">
    
<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img img-fluid" src="https://dummyimage.com/300" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
    
  </div>
  
  
</div>

thanks for replying, using your answer gives me what i want, but i have found a plugin for that — Fillipo Sniper, Dec 18 '17 at 22:00

score 2 · Answer 2 · answered Dec 16 '17 at 17:07

Looking at the UI design you are looking for

     <div class="row">
        <div class="col-md-4">
          <div class="row">
              BLOG 1
          </div>
          <div class="row">
             BLOG 4
          </div>
        </div>
        <div class="col-md-4">
            BLOG 2
        </div>
        <div class="col-md-4">
            BLOG 3
        </div>
     </div>

Fillipo Sniper · Answer 3 · 2017-12-18T21:56:01.047

i have found the way out, maybe try this plugin https://masonry.desandro.com/

<div class="row grid">
<div class="col-lg-4 grid-item">...</div>
<div class="col-lg-4 grid-item">...</div>
<div class="col-lg-4 grid-item">...</div>
...
</div>

Using the masonry plugin with jquery

$('.grid').masonry({
 // options
 itemSelector: '.grid-item',
});

using the masonry plugin with plain js

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
});

that's all you need to do

stack bootstrap column vertically

3 Answers3