Cardsv4.x

<!-- Card -->
<div class="card w-50">
  <img src="http://unsplash.it/300/200" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List item</li>
    <li class="list-group-item"><a href="#" class="card-link">Linked item</a></li>
  </ul>
  <div class="card-footer text-muted">
    <small><em>Lorem Ipsum</em></small>
  </div>
</div>

<!-- Card Deck -->
<div class="card-deck">
  <div class="card">
    <div class="card-header">Header</div>
    <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 bg-light">
    <div class="card-header">Header</div>
    <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 bg-secondary text-white">
    <div class="card-header">Header</div>
    <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-white">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

<!-- Card Group -->
<div class="card-group">
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Card title</h5>
    </div>
    <div class="card-body">

      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad necessitatibus omnis animi?.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-header">
      <h5 class="card-title">Card title</h5>
    </div>
    <div class="card-body">

      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad necessitatibus omnis animi?</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card bg-secondary text-white">
    <div class="card-header">
      <h5 class="card-title">Card title</h5>
    </div>
    <div class="card-body">

      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad necessitatibus omnis animi?</p>
    </div>
    <div class="card-footer">
      <small class="text-white">Last updated 3 mins ago</small>
    </div>
  </div>
</div>