<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> <!------ Include the above in your HEAD tag ----------> <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> <!-- card.// --> </aside> <!-- col.// --> <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> <!-- card.// --> </aside> <!-- col.// --> <aside class="col-sm-4"> <p>Card with list group</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"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> </ul> </div><!-- card.// --> </aside> <!-- col.// --> </div> <!-- row.// --> </div> <!--container end.//--> <br><br> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h4 class="text-white">HTML UI KIT <br> Ready to use Bootstrap 4 components and templates </h4> <p class="h5 text-white"> for Ecommerce, marketplace, booking websites and product landing pages</p> <br> <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br> </article>