Hello Readers!

Bootstrap is the most amazing HTML and CSS framework by far. Also, the grid system is near to perfect.

It has columns and rows to keep our content just in place perfectly. But everything has its weak point.

Bootstrap has its own when the amount of content in different columns varies. Developers can often be seen struggling to match the height of their columns in order to maintain responsiveness.

Things like these were easy to cope with table. But with the commencement of div, they have turned annoying.

Let us look at the solutions for this.

NEGATIVE MARGINS AND OVERFLOW:HIDDEN

This approach is probably the best solution in my opinion. It would work on all columns irrespective of their size and height. In this approach, you add 99999px to the column height via padding and then -99999px of negative margin to seem as if it is not there. Finally, giving overflow:hidden to the row hides the overflowing content.

Here's how you do it.

.row {
  overflow: hidden; 
}

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

TABLE, YET AGAIN

table comes to rescue. We do know, div's and its elements can be made to behave like a table.

We wil take this approach because the table columns have matched height by default. Simply, make the row behave like a table.

.row {
  display: table;
}

[class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: top;
}

FLEXBOX

Flexbox is a boon for front-end developers.

It does everything you can ask for. It provides equal heights and is responsive. All this make it the ultimate tool for layouts.

Internet Explorer 9 and below do not support this property.

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Keep Coding!