How to generate thumbnails and customize using bootstrap ?
Last Updated :
09 Sep, 2021
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 =
< script src =
</ script >
< script src =
</ 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 =
style = "height: 100px; width: 100px"
/>
</ a >
</ div >
< div class = "col-sm-6 col-md-3" >
< a href = "#" class = "thumbnail" >
< img
src =
style = "height: 100px; width: 100px"
/>
</ a >
</ div >
< div class = "col-sm-6 col-md-3" >
< a href = "#" class = "thumbnail" >
< img
src =
style = "height: 100px; width: 100px"
/>
</ a >
</ div >
< div class = "col-sm-6 col-md-3" >
< a href = "#" class = "thumbnail" >
< img
src =
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 thumbnails
Adding 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 =
< script src =
</ script >
< script src =
</ 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 =
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 =
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 =
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 =
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
- Internet Explorer
- Safari
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...