bootstrap rows don't fill as expected

Question

I am new to bootstrap, and experience a problem arranging images in rows.

Essentially, what I would like is this:

IMG1  IMG2  IMG3  IMG4

IMG5  IMG6 

However, what I get is, for example, this:

IMG1  IMG2  IMG3  IMG4
                  IMG5 
IMG6 

IMG4 is less tall than the other ones, IMG4 and IMG5 get stacked above each other in the cell in which I would like to just have one image.

The code for this part looks like this:

<div class="row">

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

   ...
</div>

The change from 4 to 2 columns in narrow windows works as expected, but the distribution of images across rows does not.

Answer 1

You can fix it with simple CSS:

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed prevents breaking the functionality of the col-* classes.

You can also check this