<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <hr> <div class="container"> <div class="row"> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x350/EEE"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> </div> </div> </div> </div><!--/row--> </div><!--/container -->

.thumbnail { padding:0; } .thumbnail:hover { cursor: pointer; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1); }