Default example

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

Code:

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="/..." alt="...">
    </a>
  </div>
  ...
</div>

Image shapes

Add classes to an <img> element to easily style images in any project.

300x300
300x300
300x300

 

Code:

<img src="/..." alt="..." class="img-rounded">
<img src="/..." alt="..." class="img-circle">
<img src="/..." alt="..." class="img-thumbnail">

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.

300x300

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

300x300

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

300x300

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

Code:

<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>

JS Polls

Which is the best CMS?

loader
This poll is ended Sep 30 2020 at 12:30 AM
View all polls

Photos