"Thumbnail with caption & buttons"
Bootstrap 3.1.0 Snippet by sinasafaei

<div class="container" id="tourpackages-carousel"> <div class="row"> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <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> <p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <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> <p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <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> <p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <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> <p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p> </div> </div> </div> </div><!-- End row --> </div><!-- End container -->
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic); font-family: 'Open Sans', sans-serif; html { font-family: 'Open Sans', sans-serif; } body { min-height: 3000px; padding-top: 70px; font-family: 'Open Sans', sans-serif; } .thumbnail { position: relative; padding: 0px; margin-bottom: 20px; } .thumbnail img { width: 100%; }

Similar snippets: See More


Comments:

Robert Khayat 2014-05-03 00:59:50
    Why have col-sm-18? I thought it is a 12-grid system?
maxsurguy 2014-05-03 01:01:12
    That must be a mistake by the author...
Alan 2015-02-20 12:25:48
    Any way to force the height of each box to be the same regardless of how much text there is below the thumbnail image? Thanks
Dave 2015-04-01 03:26:51
    To Alan:
Yes, using simple CSS
He Who Asks 2016-01-16 17:53:20
    It is not noticeable in the example due to the placeholder image, BUT if you use an actual image -for example with white background- you will notice that the top border is NOT shown which breaks the tidyness of the appearance.

Commenting will be back soon.