Bootstrap Thumbnails

Bootstrap provides .thumbnail class which is used for creating grid of images, text and more gives thumbnail like styles to images. We require grid of images or videos for creating the good user experience in the web. They are used to show linked images in grids with minimum required markup. Thumbnails are implemented on web pages as smaller copies of the original image and the main purpose of a thumbnail image on a web page is to reduce bandwidth and download time. Bootstrap provides the following ways for creating thumbnails:

Default Thumbnail
Thumbnails with Custom Content

also read:

Bootstrap Setup

Bootstrap Typography

The below examples shows the various techniques used for implementing the thumbnails in Bootstrap. If you have any questions about bootstrap thumbnails, please write it in the comments section.

Bootstrap Default Thumbnail

The following example demonstrates a default thumbnail:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Thumbnails</h2>
<div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" alt="amazing">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg"  alt="my_image2">
      </a>
      </div>
</div>
</body>
</html>

Run Bootstrap Default Thumbnail Example Demo

Bootstrap Thumbnails with Custom Content

We can insert custom content such as heading, paragraph, buttons or any other kind of HTML content to default thumbnails as shown in the following example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Adding Content to Thumbnails</h2>
<div class="row">
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
          alt="amazing">
      </div>
      <div class="caption">
         <h3>First Image</h3>
         <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
         <p><a href="#" class="btn btn-primary" role="button">View</a>
         <a href="#" class="btn btn-success" role="button">Download</a></p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg"
            alt="my_image1">
      </div>
      <div class="caption">
	  <h3>Second Image</h3>
	  <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
	  <p><a href="#" class="btn btn-primary" role="button">View</a>
	  <a href="#" class="btn btn-success" role="button">Download</a
</p>
      </div>
  </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2">
      </div>
      <div class="caption">
	  <h3>Third Image</h3>
	  <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
	  <p><a href="#" class="btn btn-primary" role="button">View</a>
	  <a href="#" class="btn btn-success" role="button">Download</a></p>
      </div>
   </div>
</div>
</div>
</body>
</html>

Above script demonstrates how to add content to the thumbnails in the document. In the default thumbnail section, we have used .thumbnail class within the anchor element. To add content, we use this class within the div element as specified in the script. To give caption for a thumbnail, use caption class along with the div element. We can add content within the div element to describe about thumbnail on the web page.

Run Bootstrap Custom Content Example Demo

Bootstrap Default Thumbnail

Bootstrap Thumbnails with Custom Content

About Krishna Srinivasan