Make column height fill row bootstrap 4

Question

I have a row with some columns, on my page. These contain cards, which have a slight difference in the amount of content. But I want these to all be the same height.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
       download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
           download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
       download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
            download"></i>download</a>
      </div>
    </div>
  </div>
</div>

As you can see, I have tried content stretch and items-stretch. Neither of which worked.

And did you read the [docs](https://getbootstrap.com/docs/4.3/components/card/#card-layout) ? — Mike Doe, Jun 25 '19 at 07:57
Yep, i've also just tried align-self-stretch on the actual column, to no effect. — sam smith, Jun 25 '19 at 08:04

score 1 · Answer 1 · answered Jun 25 '19 at 08:19

column height fill row bootstrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
  <div class="card-group">
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <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>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <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>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
</div>
</div>

score 0 · Answer 2 · answered Jun 25 '19 at 08:21

Use the Bootstrap 4 h-100 class for height:100%;

<div class="card h-100">
  <img src="image1.jpg" class="img-fluid" alt="" />
  <div class="card-body overflow-hidden text-center">
    <h4 class="color-primary">card 1</h4>
    <p></p>
    <a href="" class="btn btn-info"><i class="zmdi zmdi- 
        download"></i>download</a>
  </div>
</div>

By doing this your cards will match your row height even if your content length is different.

score 0 · Answer 3 · edited Jun 25 '19 at 08:54

0

If you want all these contains will take same height than you need to use display flex property on inner column

.col-md-3{
  display: flex;
}

-> Also set the width of .card 100%.

.card{
  width: 100%;
}

edited Jun 25 '19 at 08:54

G-Cyrillus

101,410
14
105
129

answered Jun 25 '19 at 08:33

Mak0619

652
6
20

bootstrap 4 is based on the flex model , if a container is not a flex parent, then add the class `d-flex` if you need it . about the card width:100% , it can hurt IE11 https://stackoverflow.com/questions/56669644/how-can-i-fix-ie-image-and-column-flexbox-bug/56670012#56670012 – G-Cyrillus Jun 25 '19 at 08:57

Make column height fill row bootstrap 4

3 Answers3