Bootstrap
In this tutorial we will learn about thumbnails in Bootstrap.
By default, in Bootstrap the thumbnails are designed to make linked images. To create a thumbnail in Bootstrap we use the .thumbnail class.
.thumbnail
Add the .thumbnail class to the anchor tag enclosing the image.
<div class="row"> <div class="col-xs-12 col-sm-2"> <a href="#" class="thumbnail"> <img src="/path/to/image.png" alt="profile-image"> </a> </div> </div>
Output:
We can even add the .thumbnail class to an image to give it a thick border and make it a thumbnail.
<div class="row"> <div class="col-xs-4 col-sm-4"> <img class="thumbnail" src="/path/to/image.png" alt="profile-image"> </div> <div class="col-xs-4 col-sm-4"> <img class="thumbnail" src="/path/to/image.png" alt="profile-image"> </div> <div class="col-xs-4 col-sm-4"> <img class="thumbnail" src="/path/to/image.png" alt="profile-image"> </div> </div>
We can even use .thumbnail class to create custom card like thumbnails.
<div class="row"> <div class="col-xs-4 col-sm-2"> <div class="thumbnail"> <img src="/path/to/image.png" alt="profile-image"> <div class="caption"> <h3>Heading</h3> <p>Paragraph ... ... ... ... ... ... ... ...</p> <p> <a href="#" class="btn btn-primary" role="button">Edit</a> <a href="#" class="btn btn-default" role="button">Detail</a> </p> </div> </div> </div> </div>