How to generate thumbnails and customize using bootstrap ?
Last Updated :
25 Jul, 2024
Bootstrap helps web developers to create thumbnails that are used to show linked images in grids with the pre-defined classes which help to reduce codes length. Thumbnails are created to provide a quick preview of images with small images.
Thumbnail Image: A thumbnail is a small image that represents a larger image. Bootstrap has an easy way to do this with thumbnails. Bootstrap's .thumbnail class is used to show linked images in grids (grid system), a thumbnail is created using class .thumbnail within the element <a>. The class .col-sm-* and .col-md-* (where * represent number ), it is used to create grids of the images.
Step-by-step guide for the implementation:
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Step 2: Add <div> tag in the HTML body with class row. In that <div> create four div sections to create four images.
Step 3: Add "col-sm-6" and "col-md-3" to four div sections which creates webpage responsive.
Step 4: Add <a> tag with class value thumbnail to define the link of the image in the next line.
<a href="#" class="thumbnail">
Example 1: The following example shows the creation of thumbnails images.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thumbnail images</title>
<link rel="stylesheet"
href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<h3 style="color: green">Bootstrap thumbnails</h3>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png"
style="height: 100px; width: 100px" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#"
class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/machineLearning3.png"
style="height: 100px; width: 100px" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#"
class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210202223017/Competitive-Programming-%E2%80%93-A-Complete-Guide.png"
style="height: 100px; width: 100px" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java-768x256.png"
style="height: 100px; width: 100px" />
</a>
</div>
</div>
</body>
</html>
Output: As in the below output image we can see thumbnail images. These are also responsive to different screen sizes.
responsive thumbnailsAdding captions and buttons to the thumbnails :
Step 1: We created div with class value as thumbnail and inserted image, after that add div with class .caption to define the description of the images <p>.
Step 2: Create buttons using <a> tag with class . btn .btn-success.
Example: The following example demonstrates adding of caption and button to the thumbnails.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<h3 style="color: green">
<b>Bootstrap Thumbnails with Captions and Button</b>
</h3>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png"
style="height: 100px; width: 100px" />
</a>
<div class="caption">
<h3 style="color: green">GfG Web-Development</h3>
<p>
Web development refers to the building,
creating, maintaining of
websites.
</p>
<p>
<a href="#" class="btn btn-success">
Learn More
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/machineLearning3.png"
style="height: 100px; width: 100px" />
</a>
<div class="caption">
<h3 style="color: green">GfG Machine Learning</h3>
<p>
Machine Learning is the study to
learn without being explicitly
programmed.
</p>
<p>
<a href="#" class="btn btn-success">
Learn More
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210202223017/Competitive-Programming-%E2%80%93-A-Complete-Guide.png"
style="height: 100px; width: 100px" />
</a>
<div class="caption">
<h3 style="color: green">GfG Programming</h3>
<p>
Competitive Programming enables you
to code a given problem under
provided constraints.
</p>
<p>
<a href="#" class="btn btn-success">
Learn More
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java-768x256.png"
style="height: 100px; width: 100px" />
</a>
<div class="caption">
<h3 style="color: green">GfG Java</h3>
<p>
Java is one of the most popular
and widely used programming
language.
</p>
<p>
<a href="#" class="btn btn-success">
Learn More
</a>
</p>
</div>
</div>
</div>
</body>
</html>
Output: As in the below output image, we can see that images with captions and buttons. These are also responsive to different screen sizes.
Supported Browser:
- Google Chrome
- Firefox
- Safari
- Opera
Similar Reads
How to create Jumbotron using Bootstrap 5 ? Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor's attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value. Uses of Jumbotron: Image showcaseHighlightin
2 min read
How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
How To Customize Bootstrap With Sass? Bootstrap is one of the most popular CSS frameworks used to develop responsive websites quickly. However, using the default Bootstrap design can result in many websites looking the same. This is where Sass (Syntactically Awesome Style Sheets) comes in handy. By customizing Bootstrap with Sass, you c
4 min read
How to create a Simple Footer using Bootstrap 5 ? Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bo
4 min read
How to create a bootstrap tooltip using jQuery ? Tooltip is like a balloon or also a small screen tip that displays text descriptions to any object in a webpage. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applicati
4 min read
How to Customize Bootstrap jQuery Plugins ? Bootstrap is a popular HTML, CSS, and JavaScript framework for building responsive, mobile-first web applications. It includes a library of jQuery plugins that provide various UI components and behaviors, such as modals, tabs, and carousels. While these plugins are useful out of the box, you may nee
4 min read