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

Question

Denial of responsibility. This question has been asked many times before. But as time passed, and now we are close to releasing Bootstrap 4 with full flexbox support, it is time for new answers to the same question.

I want to create an equal column height using Bootstrap 4. Here is a diagram of the intended result:

I want a solution that works in all browsers that are supported by Bootstrap 4. Better if JS is not involved. Some of the existing solutions are based on Bootstrap 3, some of which do not work on Safari on MacOS.

Update. I seem to have done the wrong research. Bootstrap 4 has equal height by default. I included an updated image with illustration. You do not need to do anything, it already exists.

Answer 1

You just need to use class="row-eq-height" with your class="row" to get the same height columns for previous boot versions.

but with bootstrap 4 this happens initially.

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

Answer 2

An equal-height column is the default behavior for Bootstrap 4 grids.

 .col { background: red; } .col:nth-child(odd) { background: yellow; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 1 of 3 <br> Line 2 <br> Line 3 </div> <div class="col"> 1 of 3 </div> </div> </div> 

Answer 3

You can use the new Bootstrap maps:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="card-group"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> </div> 

Link: Click here.

Yours faithfully,

Answer 4

Since it automatically arranges heights with dynamic content without css.

To use this plugin, you only need to call the following method:

 $('.yourelements').equalHeights(); 

And you can even items in the folder you need

Docu: https://github.com/mattbanks/jQuery.equalHeights

Example: https://codepen.io/micahgodbolt/pen/FgqLc