Disclaimer. This question was asked many times before. But since time has passed and now we are close to Bootstrap 4 release with full flexbox support, it is time for new answers for the same question.
I want to create equal column height with Bootstrap 4. Here is demo of intended result:
I want a solution, that works in all browsers, that are supported by Bootstrap 4. Better if no JS involved. Some of existing solution are based on Bootstrap 3, some aren't working in Safari on MacOS.
Update. Seems I did wrong research. Bootstrap 4 ships with equal height by default. I have included an updated image with illustration. You don't need to do anything, it is already there.
This question is related to
html
css
twitter-bootstrap
The answer is
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/
Equal height columns is the default behaviour for Bootstrap 4 grids.
_x000D_
_x000D_
_x000D_
_x000D_
.col { background: red; }_x000D_
.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">_x000D_
_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col">_x000D_
1 of 3_x000D_
</div>_x000D_
<div class="col">_x000D_
1 of 3_x000D_
<br>_x000D_
Line 2_x000D_
<br>_x000D_
Line 3_x000D_
</div>_x000D_
<div class="col">_x000D_
1 of 3_x000D_
</div>_x000D_
</div>_x000D_
</div>You can use the new Bootstrap cards:
_x000D_
_x000D_
_x000D_
_x000D_
<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">_x000D_
<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>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>_x000D_
_x000D_
<div class="card-group">_x000D_
<div class="card">_x000D_
<img class="card-img-top" src="..." alt="Card image cap">_x000D_
<div class="card-block">_x000D_
<h4 class="card-title">Card title</h4>_x000D_
<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>_x000D_
</div>_x000D_
<div class="card-footer">_x000D_
<small class="text-muted">Last updated 3 mins ago</small>_x000D_
</div>_x000D_
</div>_x000D_
<div class="card">_x000D_
<img class="card-img-top" src="..." alt="Card image cap">_x000D_
<div class="card-block">_x000D_
<h4 class="card-title">Card title</h4>_x000D_
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>_x000D_
</div>_x000D_
<div class="card-footer">_x000D_
<small class="text-muted">Last updated 3 mins ago</small>_x000D_
</div>_x000D_
</div>_x000D_
<div class="card">_x000D_
<img class="card-img-top" src="..." alt="Card image cap">_x000D_
<div class="card-block">_x000D_
<h4 class="card-title">Card title</h4>_x000D_
<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>_x000D_
</div>_x000D_
<div class="card-footer">_x000D_
<small class="text-muted">Last updated 3 mins ago</small>_x000D_
</div>_x000D_
</div>_x000D_
</div>Link: Click here
regards,
Source: Stackoverflow.com