Bootstrap 3 Thumbnails

Add thumbnail images or videos with Bootstrap 3's thumbnail component.

Bootstrap 3 provides classes that are specifically used to style thumbnail images. Used in conjunction with the grid system, thumbnails can present images, videos, text, etc in grids.

Default Thumbnails

For a basic set of thumbnails, use the .thumbnail class and insert the images into a grid.

<div class="row">

<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/pix/samples/15s.jpg" alt="Boats at Phi Phi, Thailand">
</a>
</div>

<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/pix/samples/14s.jpg" alt="Resort at Boracay, Philippines">
</a>
</div>

<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/pix/samples/3s.jpg" alt="Rob Roy Glacier near Wanaka, New Zealand">
</a>
</div>

<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/pix/samples/2s.jpg" alt="Views near Rob Roy Glacier">
</a>
</div>

</div>

Captions

You can add captions and other custom content by using the .caption class inside a <div>.

<div class="row">

<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="/pix/samples/15s.jpg" alt="Boats at Phi Phi, Thailand">
<div class="caption">
<p>Etizzle shiznit fo shizzle sizzle augue hendrerizzle accumsizzle. Gizzle izzle est. Vivamizzle hizzle dolor, sure vitae, yippiyo id, ultrices izzle, sheezy.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="/pix/samples/14s.jpg" alt="Resort at Boracay, Philippines">
<div class="caption">
<p>Vestibulum ante pimpin' primizzle in shut the shizzle up orci luctizzle gangsta yo mamma posuere cubilia Break yo neck, yall; Mammasay mammasa mamma oo sa dolor.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="/pix/samples/3s.jpg" alt="Rob Roy Glacier near Wanaka, New Zealand">
<div class="caption">
<p>Integizzle faucibus. Pot pharetra blandit quizzle. Fizzle rutrizzle aliquizzle orci. Go to hizzle facilisis.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="/pix/samples/2s.jpg" alt="Views near Rob Roy Glacier">
<div class="caption">
<p>Lorizzle ipsizzle dolor sizzle amizzle, ma nizzle adipiscing pot. Izzle sapien velit, fizzle get down get down, suscipit quis, crackalackin vizzle, gangsta.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>

</div>