Bootstrap4 make card headers the same height

Question

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.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">This is a really long header that is going to cause problem.</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

The only way I can make this work is to do something like

.card-header{height: 50px;}

In CSS but this does not allow dynamic resizing. Any help is greatly appreciated. Here's the Codepen.

Answer 1

In Bootstrap-4, use these classes for the cards' header.

1. d-flex - to change its display to flex
2. align-items-center - center its content vertically
3. justify-content-center - center its content horizontally
4. h-100 - to make its height 100%

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

I recommend you use the latest version of bootstrap and check this codepen

---

Update

If one of the cards has less content in its body, its header has more height. Add these classes to all the card bodies to fix the issue.

1. flex-column - to change its flex-direction to column
2. h-100 - to make its height 100%

<div class="card-body flex-column h-100">

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
            <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

Check this codepen