Default example

By default, Bootstrap’s thumbnails are designed to showcase linked images with minimal required markup.

Generic placeholder thumbnail 
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="/assets/320x240-928bb3668819da0b2c0ff7add0d4acf9a330bdfe7f03260df45d58992ffc2fc2.png" alt="Generic placeholder thumbnail"/>
    </a>
  </div>
</div>

Custom Content

With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Generic placeholder thumbnail

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.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="/assets/640x480-92d157b0927471629180b96fcf06e1877a845cd834977027ff3bb43ae899b032.png" 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>