This post we will discuss about Thumbnail using Bootstrap. if you are working on a web development project where users can attract to your desighn then you must create a responsive website for your website. a lot of sites need a way to lay out images , videos , text in a grid and Bootstrap has an easy way to do this with thumbnails. using the bootstrap build in a classes you can easily style images such as making the round corner or circular images give them effect like thumbnail.
How to Create Thumbnail using Bootstrap
Getting Bootsrap
Bootstrap can be Download to your needs from their Getting Started page but i would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.
Adding Bootstrap Library
after download bootstrap we need to bootstrap library file in your page and in this step we going to add library file.
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script>
Creating Default Thumbnail using Bootstrap
in this step we are going to create thumbnail. add an </a> tag with the class of .thumbnail around an image.
<div class="row">
<h2 class="alert alert-success">Default Thumbnail</h2>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/th1.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/th2.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/th3.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/th4.jpg" alt="...">
</a>
</div>
</div>
Download more Source Code
- How To Create Sign up and Login Form using Bootstrap and Jquery
- How To Create Photo Gallery using Bootstrap
- How to Create Multi Step Form in PHP MySQL using Bootstrap
Creating Custom Thumbnail using Bootstrap
Next step is creating custom thumbnail using Bootstrap. now that we have default thumbnail it’s possible to add HTML content like heading, paragraphp and butons into thumbnail.
<div class="row">
<h2 class="alert alert-success">Custom Thumbnail</h2>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/th5.jpg" alt="5">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><a href="#" class="btn btn-success" role="button">Read More <span class="glyphicon glyphicon-plus"></span></a>
<a href="#" class="btn btn-danger" role="button">Share <span class="glyphicon glyphicon-share"></span></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/th6.jpg" alt="5">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><a href="#" class="btn btn-success" role="button">Read More <span class="glyphicon glyphicon-plus"></span></a>
<a href="#" class="btn btn-danger" role="button">Share <span class="glyphicon glyphicon-share"></span></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/th2.jpg" alt="5">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><a href="#" class="btn btn-success" role="button">Read More <span class="glyphicon glyphicon-plus"></span></a>
<a href="#" class="btn btn-danger" role="button">Share <span class="glyphicon glyphicon-share"></span></a></p>
</div>
</div>
</div>
</div>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.