Create image thumbnail in HTML,PHP using Bootstrap classes

How to make and show small thumbnail of any image using its URL with bootstrap .img-thumbnail class.

Thumbnail is the smaller image of original image. Thumbnail is mostly used to show smaller multiple images of original images on a single webpage so website user can see multiple media files at a single time and after clicking on image thumbnail it will load the original full size image on screen. Thumbnail is also low in sizes so they can be load more fast then the real images. So in this tutorial we are using bootstrap’s .img-thumbnail class which will make our given image as thumbnail image. So here is the complete step by step tutorial for Create image thumbnail in HTML,PHP using Bootstrap classes.

How to Create image thumbnail in HTML,PHP using Bootstrap classes.

https://www.android-examples.com/demo/heading-tag.html
Code for media-thumbnail.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Thumbnail</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Image Thumbnail</h1>

<img src="https://www.android-examples.com/wp-content/uploads/2016/01/sample_round-image.png" class="img-thumbnail" alt="Image Thumbnail" width="150" height="150">
 
</div>

</body>
</html>

Screenshot:

Create image thumbnail in HTML,PHP using Bootstrap classes

Leave a Reply

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