title: Bootstrap4 get cards in columns to stretch and fill parent container horizontally and vertically
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Below is a snippet of code that relates to the cards. I also have the project on Plunker for a live view: <a href="http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info" rel="noreferrer">http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info</a>. If you open up the project on a large display, the cards are not of equivalent size.</p>
  
  <p>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)? </p>
  
  <p>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 <strong>as well as</strong> stretch vertically to be the same size? I tried to add <code>flex-column flex-grow</code> but that only sized them horizontally but not vertically. What would be the best way to handle this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&gt;
  
  &lt;main&gt;
    &lt;div id="content-container" class="container"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h2 class="display-5 text-center text-white text-uppercase"&gt;Portfolio&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-md-4 d-flex align-items-stretch"&gt;
          &lt;div class="card "&gt;
            &lt;img class="card-img-top" src=".../100px200/" alt="Card image cap"&gt;
            &lt;div class="card-footer"&gt;Featured&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-4 d-flex align-items-stretch"&gt;
          &lt;div class="card "&gt;
            &lt;img class="card-img-top" src=".../100px200/" alt="Card image cap"&gt;
            &lt;div class="card-footer"&gt;Footer&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-4 d-flex align-items-stretch"&gt;
          &lt;div class="card "&gt;
            &lt;img class="card-img-top" src=".../100px200/" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;p class="card-text"&gt;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.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Edit:</h2>
  
  <p>I got this to work by adding a class to each <code>card</code> 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. </p>