Thumbnails Grids of images, videos, text, and more
Highly customizable. Add any kind of HTML content like headings or paragraphs into thumbnails.
Thumbnails links default
More examples. Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
Code sample Thumbnails Grid
<div class="row-fluid"> <ul class="thumbnails"> <li class="span4"><a href="#" class="thumbnail"><img data-src="holder.js/100%x260" alt="100%x260" /></a></li> <li class="span3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> <li class="span3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> <li class="span2"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> <li class="span2"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> <li class="span3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> <li class="span3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x120" alt="100%x120" /></a></li> </ul> </div>
Code sample Thumbnails Custom HTML Widgets
<div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="100%x200 Image Holder" /> <div class="caption"> <h4>Thumbnail heading</h4> <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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-inverse">Action</a> </div> </div> </li> <li class="span3"> ... </li> <li class="span3"> ... </li> <li class="span3"> ... </li> </ul> </div>