title: Bootstrap4 make card headers the same height
body: <p>Using Bootstrap 4's pricing template as an example, suppose I have card headers of different text length such that under some screen resolution the height of the card headers become different. I want to ensure that they are always of the same height.</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 href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
    &lt;div class="card-deck mb-3 text-center"&gt;
      &lt;div class="card mb-4 box-shadow"&gt;
        &lt;div class="card-header"&gt;
          &lt;h4 class="my-0 font-weight-normal"&gt;This is a really long header that is going to cause problem.&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;h1 class="card-title pricing-card-title"&gt;$0 &lt;small class="text-muted"&gt;/ mo&lt;/small&gt;&lt;/h1&gt;
          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
            &lt;li&gt;10 users included&lt;/li&gt;
            &lt;li&gt;2 GB of storage&lt;/li&gt;
            &lt;li&gt;Email support&lt;/li&gt;
            &lt;li&gt;Help center access&lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="button" class="btn btn-lg btn-block btn-outline-primary"&gt;Sign up for free&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mb-4 box-shadow"&gt;
        &lt;div class="card-header"&gt;
          &lt;h4 class="my-0 font-weight-normal"&gt;Pro&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;h1 class="card-title pricing-card-title"&gt;$15 &lt;small class="text-muted"&gt;/ mo&lt;/small&gt;&lt;/h1&gt;
          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
            &lt;li&gt;20 users included&lt;/li&gt;
            &lt;li&gt;10 GB of storage&lt;/li&gt;
            &lt;li&gt;Priority email support&lt;/li&gt;
            &lt;li&gt;Help center access&lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Get started&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mb-4 box-shadow"&gt;
        &lt;div class="card-header"&gt;
          &lt;h4 class="my-0 font-weight-normal"&gt;Enterprise&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;h1 class="card-title pricing-card-title"&gt;$29 &lt;small class="text-muted"&gt;/ mo&lt;/small&gt;&lt;/h1&gt;
          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
            &lt;li&gt;30 users included&lt;/li&gt;
            &lt;li&gt;15 GB of storage&lt;/li&gt;
            &lt;li&gt;Phone and email support&lt;/li&gt;
            &lt;li&gt;Help center access&lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Contact us&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only way I can make this work is to do something like</p>
  
  <pre><code>.card-header{height: 50px;}
  </code></pre>
  
  <p>In CSS but this does not allow dynamic resizing. Any help is greatly appreciated. Here's the <a href="https://codepen.io/wshinigamic/pen/Jvedjq" rel="noreferrer">Codepen</a>.</p>