<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="section-medium"> <div class="row"> <div class="columns large-12 text-center"> <h2>Featured</h2> </div> </div> <div class="row small-up-1 medium-up-3"> <div class="column column-block"> <img src="http://www.placehold.it/800x600/b5bbbd/e2e6e7/&text=img" alt="" class="img-responsive"> <h3>Featured Image</h3> <p>Modi, sunt vero necessitatibus sint voluptatibus quod</p> </div> <div class="column column-block"> <img src="http://www.placehold.it/800x600/b5bbbd/e2e6e7/&text=img" alt="" class="img-responsive"> <h3>Featured Image</h3> <p>Modi, sunt vero necessitatibus sint voluptatibus quod</p> </div> <div class="column column-block"> <img src="http://www.placehold.it/800x600/b5bbbd/e2e6e7/&text=img" alt="" class="img-responsive"> <h3>Featured Image</h3> <p>Modi, sunt vero necessitatibus sint voluptatibus quod</p> </div> </div> </section>

body { color: #6d7679; font-family: arial; font-weight: normal; line-height: 1.5; } .section-medium { background-color: #edf0f1; padding: 3rem 0; } h3 { font-size: 1.5rem; } h3 { font-size: 1.3125rem; line-height: 1.2; margin-bottom: 1rem; margin-top: 1rem; } section .column, section .columns { margin-bottom: 1rem; }