<div class="container">
  <div class="row">
    <h2>Cards</h2>
    <p class="lead">
      <a href="https://v4-alpha.getbootstrap.com/">Bootstrap 4</a> has replaced the <code>.panel</code> and <code>.well</code> with <code>.card</code>. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The
      <a href="">Bootstrap 4 Cards</a> can be singular, grouped together (as shown) or <a href="">equal height</a>. There are many different layout and content options here is a small example that can be easily altered to fit your needs.
    </p>
    <div class="card-group">
      <!-- card -->
      <div class="card card_1">
        <img class="card-img-top img-fluid" img src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Consise</h4>
          <p class="card-text">Cards are a good way to display content composed of different types of objects. They’re well-suited for presenting similar objects whose size or supported actions vary, like headings and photos with captions.</p>
        </div>
      </div>
      <!-- card -->
      <div class="card card_2">
        <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Grouped</h4>
          <p class="card-text">Use card groups to render equal height cards without gutters between the cards. Use <code>.card-deck</code> for cards that aren’t attached to each another.</p>
        </div>
      </div>
      <!-- card -->
      <div class="card card_3">
        <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Same Height</h4>
          <p class="card-text">A frequent problem occurs when you have multiple items in a row with content of varying height. Thanks to flexbox (and display:table) we now have equal height cards!</p>

        </div>
      </div>
    </div>
  </div>
</div>