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

Question

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.

@AndrewLyndem I can't find any solution, which is based on B4. I have found a few based on B3. Since the question is pretty popular, I think someone more experienced already have a good tested solution already. — dandaka, Mar 02 '17 at 09:17
This works for B3, for example https://codepen.io/bootstrapped/details/RrabNe/ — dandaka, Mar 02 '17 at 09:17
@ZimSystem It doesn't work in Safari. But maybe because it is a bug in Safari, we could forget about this. — dandaka, Mar 02 '17 at 12:02
Yes, and the answer is still the *same as in the dup*. Flexbox is native to Bootstrap 4 so equal heights will work natively. — Carol Skelly, Mar 02 '17 at 12:06
@ZimSystem You're right, I have already included this info in updated post. — dandaka, Mar 02 '17 at 12:10

score 38 · Accepted Answer · answered Mar 02 '17 at 09:18

38

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/

answered Mar 02 '17 at 09:18

neophyte

6,540
2
28
43

1

I can't see class 'row-eq-height' in B4 alpha, is it there? If not, do you have any working example? Your link is based on B3, not B4. – dandaka Mar 02 '17 at 09:23
2

no I mentioned that equal height column is a native property of b4..the link is for b3 – neophyte Mar 02 '17 at 09:34
24

Also, the `row-eq-height` class was never released in Bootstrap 3. The `row-eq-height` was part of a [3rd party Vietnamese fork of Bootstrap](http://getbootstrap.com.vn/), and [was temporarily an experiment](https://github.com/twbs/bootstrap/pull/13203) but was not included in BS 3. – Carol Skelly Mar 02 '17 at 12:25
7

This is the correct answer (h-100 class): https://stackoverflow.com/questions/49437032/why-arent-my-bootstrap-4-columns-the-same-height – AKOP Oct 14 '18 at 20:30

score 16 · Answer 2 · answered Mar 02 '17 at 09:17

16

Equal height columns is the default behaviour 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>

answered Mar 02 '17 at 09:17

Quentin

914,110
126
1,211
1,335

1

Do you have a solution to create default (30px) gaps between columns and still have equal height columns? – max Nov 26 '17 at 22:13
@max gutters are still in place by default as well... – jmotes Oct 16 '18 at 17:28

score 6 · Answer 3 · answered Mar 02 '17 at 09:20

You can use the new Bootstrap cards:

<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

regards,

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

3 Answers3

Linked

Related