• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Thumbnails

June 26, 2014 //  by Krishna Srinivasan//  Leave a Comment

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:

  1. Default Thumbnail
  2. 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 Default Thumbnail Example

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 Custom Content Example

Category: BootstrapTag: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Alerts
Next Post: Java LinkedList Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact