Bootstrap - Thumbnails

In this tutorial we will learn about thumbnails in Bootstrap.

By default, in Bootstrap the thumbnails are designed to make linked images. To create a thumbnail in Bootstrap we use the .thumbnail class.

Link thumbnail

Add the .thumbnail class to the anchor tag enclosing the image.

<div class="row">
  <div class="col-xs-12 col-sm-2">
    <a href="#" class="thumbnail">
      <img src="/path/to/image.png"
           alt="profile-image">
    </a>
  </div>
</div>

Output:

Image thumbnail

We can even add the .thumbnail class to an image to give it a thick border and make it a thumbnail.

<div class="row">
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
</div>

Output:

Custom thumbnail content

We can even use .thumbnail class to create custom card like thumbnails.

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <div class="thumbnail">
      <img src="/path/to/image.png"
           alt="profile-image">
      <div class="caption">
        <h3>Heading</h3>
        <p>Paragraph ... ... ... ... ... ... ... ...</p>
        <p>
          <a href="#" 
             class="btn btn-primary" 
             role="button">Edit</a>
          <a href="#" 
             class="btn btn-default"
             role="button">Detail</a>
        </p>
      </div>
    </div>
  </div>
</div>

Output: