Menu
I'm using Bootstrap. How can I make three columns all the same height?
Here is a screenshot of the problem. I would like the blue and red columns to be the same height as the yellow column.
Here is the code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div>
512
You should be using a custom selector for one and two the tables styles should not be applied to [class*='col-'] that have defined widths. This method should ONLY be used if you want equal height AND equal width columns. It is not meant for any other layouts and is NOT responsive.
If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout. More on CSS Grid on MDN or css-tricks. It's clean, readable, maintainable, flexible and also that simple to use!
To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.
To horizontally align columns, we can use the justify-content classes. justify-content-start left align the columns. justify-content-center center aligns the columns. justify-content-end right align the columns.
Solution 4 using Bootstrap 4 or 5
Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.
Demo
<div class="container"> <div class="row "> <div class="col-md-4" style="background-color: red"> some content </div> <div class="col-md-4" style="background-color: yellow"> catz <img width="100" height="100" src="https://placekitten.com/100/100/"> </div> <div class="col-md-4" style="background-color: green"> some more content </div> </div> </div> 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 added August 2015. Comments posted before this don't apply to this solution.
Demo
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
