How to Make Bootstrap 4 Columns All The Same Height

How can I make Bootstrap 4 columns all the same height?

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

but with bootstrap 4 this comes natively.

check this link --http://getbootstrap.com.vn/examples/equal-height-columns/

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 bootstrap make all cols in row same height

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">  <div class="row">
    <div class="col-6">      <div class="card mb-4 box-shadow h-100">        <div class="card-body">          <p>box 1 data here  </p>         </div>       </div>    </div> 
    <div class="col-6">      <div class="card mb-4 box-shadow h-100">        <div class="card-body">          <p>box 1 data here  </p>           <p>box 2 data here  </p>           <p>box 2 data here  </p>         </div>       </div>    </div>
  </div>
</div>

How to get equal height columns childs in Bootstrap 4?

To make i.a. Safari behave, instead of height, use Flexbox all the way.

Add d-flex to the col-4 element and col to the inner.

d-flex adds display: flex and make the inner, based on align-items defaults to stretch, fill its parent, col adds flex: 1 and make it fill the width.

Stack snippet

h3 {  margin-top: 30px;}.col-4 {  margin-bottom: 30px;}.inner {  background: #ddd;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">  <h3>This is how it should work - <strike>fails on Safari (Mac)</strike></h3>  <div class="row">    <div class="col-4 d-flex">      <div class="inner col">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>    </div>    <div class="col-4 d-flex">      <div class="inner col">Inner</div>    </div>    <div class="col-4 d-flex">      <div class="inner col">Inner</div>    </div>    <div class="col-4 d-flex">      <div class="inner col">Inner</div>    </div>    <div class="col-4 d-flex">      <div class="inner col">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>    </div>  </div></div>

Equal height content within columns bootstrap 4

The easiest way to do it is adding flexbox to the .col elements. And then tell your .cli to grow using flex:

.col-sm-12 {
  display: flex;
}

and

.cli {
  flex: 1;
}

Working example:
https://codepen.io/sergiofruto/pen/KKzebEY

Equal height of columns in Bootstrap 4

You can use flexbox for this.

Update

And another way:

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class^=col]:last-of-type div {
  margin: 10px;
}

.row-eq-height > [class^=col]:last-of-type div:first-of-type {
  margin-top: 0;
}

.row-eq-height > [class^=col]:last-of-type div:last-of-type {
  margin-bottom: 0;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

Update

A better way with more specific classes:

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type {
  display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

.blue p {
  margin: 0;
}

Original way:

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] {
  display: flex;
  flex-direction: column;
}

[class^=col] div {
  flex-grow: 1
}

---

Related Topics