<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main class="container"> <section class="movies" id="movies"> <h2>Featured Movies</h2> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="//placehold.it/300x250" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250" alt="Movie" title="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> </div> </section> </main>

.title-header {padding: .75rem 1.25rem; background-color: #f5f5f5; border-bottom: 1px solid transparent;} .title-header h3 {font-size: 0.80rem; margin: 0;} .movies {margin-top: 2rem;} .img-card {width: 100%; margin-bottom: .40rem;} .movies {margin-bottom: .60rem;} .series {margin-bottom: .60rem;}