Bootstrap4 get cards in columns to stretch and fill parent container horizontally and vertically

Question

I'm using Bootstrap 4. I created a row with 3 columns each with a size of 4 on medium and larger displays. Content in each card might be of different sizes but I still want each card to be of equivalent length.

I am not using card groups/decks because they are not responsive and I want the cards to take up all 12 rows on small/xs displays.

Below is a snippet of code that relates to the cards. I also have the project on Plunker for a live view: http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info. If you open up the project on a large display, the cards are not of equivalent size.

Bootstrap 4 says that if no width is provided, cards by default stretch to fill the entire width of its container. Am I wrong in assuming its filling the entire width of the parent container in which the card is contained (i.e. in below case the div of col-md-4)?

If I am wrong, how do I go about making the 3 cards stretch horizontally to fill the entire width of the column in which its placed as well as stretch vertically to be the same size? I tried to add flex-column flex-grow but that only sized them horizontally but not vertically. What would be the best way to handle this?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
      </div>

    </div>
  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Edit:

I got this to work by adding a class to each card div and setting the width to 100%. I'm still not sure if this is the correct approach as I was under the assumption a card would do that automatically.

Answer 1

Your columns have a width of 100% on the mobile device. But the cards inside these columns still have a width of auto.

So you can add the w-100 class to each card.

Please check the result. Is it what you want to achieve?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

---

UPDATE

To manage the properties of all the cards at once, you can assign your own class to a row that contains all these cards. Bootstrap does not prohibit the use of your own CSS.

.row-whith-wide-cards .card {
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row row-whith-wide-cards">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>