How to Make Three Columns The Same Height

Place the three columns with the same height

If you are using Bootstrap4 then you can easily achieve by BS4 predefined classes like h-100 and also your html structure is not correct way so follow as per bootstrap instructions.

Predefined classes for width & height follow: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-2"> <div class="row"> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Ut enim ad minim veniam, quis nostrud exercitation ullamco. </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Laboris nisi ut aliquip ex ea </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div> </div> </div> </div></div>

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

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;
}

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {  display: grid;  grid-auto-flow: column;  gap: 5%;}
.col { border: solid;}
<div class="row">  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>

Bootstrap with 3 column having same height for all row

You can add these style to your code:
I checked this in responsive mode.

<style>
.col-4{
min-height: 100px;
text-align: center;
}
.col-4 span{
display:block
}
.col-4 i{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>

How to make 3 li columns with variable height content the same height

For IE7?

And Pure CSS?

And All Row 1 (Div "one") Equal Height?

And all Columns Equal Height?

The answer is... Not possible.

Three columns with equal height corresponding rows in each column

I would consider option 1 for the following reasons:

  • Your markup is semantically correct (3 columns, each with some rows) and clean
  • Your column styles can easily be applied
  • Looping through all rows just to calculate the maximum height isn't that cumbersome especially if you only have a few rows.

A solution with vanilla JavaScript could look like the following. You can wrap the code into a function and call it, whenever your filter is applied:

var rows = document.querySelectorAll(".col:nth-child(1) > .row").length, nfor (n = 1; n <= rows; ++n) {  var cells = document.querySelectorAll('.row:nth-child(' + n + ')')  var maxHeight = 0, i  for (i = 0; i < cells.length; ++i) {    maxHeight = (cells[i].clientHeight > maxHeight) ? cells[i].clientHeight : maxHeight  }  cells.forEach(function(cell){    cell.style.height = Number(maxHeight-10) + 'px'  })}
.col {  display: inline-block;  width: calc(33% - 41px);  margin: 10px 10px;  padding: 10px;  border-radius: 15px;  box-shadow: 0 0 20px #aaa;  vertical-align: top;}.row {  border-top: 3px solid black;  margin: 5px 0;  padding: 5px;}
<div class="container">  <div class="col">    <div class="row">row 1 Compare text 1</div>    <div class="row">row 2</div>    <div class="row">row 3</div>  </div>  <div class="col">    <div class="row">row 1 Compare text 1 this text is longer</div>    <div class="row">row 2</div>    <div class="row">row 3 with a little more text</div>  </div>  <div class="col">    <div class="row">row 1 Compare text 1 this text is even much much longer</div>    <div class="row">row 2</div>    <div class="row">row 3</div>  </div></div>

Flex-box: 3 columns of same height with page scroll

Change height:100% to min-height:100% of .container, also add height:100% to body, html

.container {
display: flex;
justify-content: center;
min-height: 100%;
}

body, html {
background-color: seashell;
margin: 0;
height: 100%
}


Related Topics



Leave a reply



Submit