<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p>
<hr>
<div class="row">
<aside class="col-sm-4">
<p>Card with image</p>
<div class="card">
<img class="card-img-top" src="http://bootstrap-ecommerce.com/main/images/posts/post3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</aside>
<aside class="col-sm-4">
<p>Card with bottom image</p>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider supporting text Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod supporting text Lorem ipsum </p>
</div>
<img class="card-img-bottom" src="http://bootstrap-ecommerce.com/main/images/posts/post3.jpg" alt="Card image cap">
</div>
