Thumbnails and Media
Images
Add classes to an <img> element to easily style images in any project.
<img src="/..." class="img-rounded">
<img src="/..." class="img-circle">
<img src="/..." class="img-polaroid">
Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.
Thumbnails Grids of images, videos, text, and more
Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
-
Thumbnail label
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.
Action Action
-
Thumbnail label
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.
Action Action
-
Thumbnail label
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.
Action Action
Why use thumbnails
Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
Simple, flexible markup
Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
Lastly, the thumbnails component uses existing grid system classes—like .grid2 or .grid3—for control of thumbnail dimensions.
Markup
As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
<ul class="thumbnails block">
<li class="grid4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</a>
</li>
...
</ul>
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
<ul class="thumbnails">
<li class="grid4">
<div class="thumbnail block">
<img src="http://placehold.it/300x200" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
...
</ul>
More examples
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
Media object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
Default example
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</div>
Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
</ul>
