<div class="bs-docs-section"> <h1 id="thumbnails" class="page-header">Thumbnails</h1> <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p> <p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p> <h2 id="thumbnails-default">Default example</h2> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <div class="bs-example" data-example-id="simple-thumbnails"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> </div> </div><!-- /.bs-example --> {% highlight html %} <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> ... </div> {% endhighlight %} <h2 id="thumbnails-custom-content">Custom content</h2> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <div class="bs-example" data-example-id="thumbnails-with-custom-content"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </div><!-- /.bs-example --> {% highlight html %} <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> {% endhighlight %} </div>