<div class="container">
  <div class="card-group">
    <div class="card">
      <img class="card-img-top" src="https://unsplash.it/330/180?image=973" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</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>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://unsplash.it/330/180?image=908" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://unsplash.it/330/180?image=916" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</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>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>  
    <div class="card">
      <img class="card-img-top" src="https://unsplash.it/330/180?image=912" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a smaller card with supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>  
  </div>
</div>
body {
  padding-top: 20px;
}

.card-group {
  margin: 0 -15px;
}

.card-group .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-group .card {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-group .card {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.333333%;
  }
}

@media (min-width: 992px)
{
  .card-group .card {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.