Fill remaining height of column

Question

I'm using bootstrap .row with 3 .col-md-4 inside. If one of them is longer than the others, free space appears. I want them to fill remaining height. Can you tell me, what should I do? I don't want to use absolute positioning and fixed size. I want it to be as responsive as possible.
Example image

score 0 · Accepted Answer · edited May 23 '17 at 12:08

As suggested in this question, you can use negative margins:

.row {
  overflow: hidden; 
}

[class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Live demo before using negative margins.

Live demo after using negative margins.

Using this method will preserve the responsiveness.

Edit: This question is a possible duplicate of How can I make Bootstrap columns all the same height?

Fill remaining height of column

1 Answers1