How can I make Bootstrap columns all the same height?
How can I make Bootstrap columns all the same height?
Solution 1 :using negative margins (doesn’t break responsiveness)
Demo
.row{ overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }
Solution 2 using table
Demo
.row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; }
Solution 3 using flex
Demo
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; }