Thumbnail image gallery using bootstrap
If you are looking for a thumbnail image gallery for your project you have come to the right place. In the image gallery, you put your activities easily. Before starting this tutorial first you have to make one folder and then put your selected images inside the folder images should be the same size. Here I am going to make a thumbnail image gallery using bootstrap.
A thumbnail image gallery is a web page element that displays a grid of small images, often with captions or other descriptive text. It’s a common way to showcase a collection of photos or other images on a website.
Bootstrap is a popular front-end framework for building responsive web pages, and it includes several built-in features for creating thumbnail image galleries. With Bootstrap, you can create a thumbnail gallery that automatically adjusts to different screen sizes and devices, making it easy to create a professional-looking photo gallery that works well on both desktop and mobile devices.
To create a thumbnail image gallery using Bootstrap, you can use the Bootstrap grid system and thumbnail classes to create a responsive layout, and customize the styles with CSS. The resulting gallery will have a clean, modern design and will be easy to navigate and interact with.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap thumbnai gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class ="container">
<h1 class ="my-4 text-center text-lg-left">Thumbnail Gallery</h1>
<div class ="row text-center text-lg-left">
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-1.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-2.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-3.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-4.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-5.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-6.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-7.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-8.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-9.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-10.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-11.jpg">
</div>
<div class ="col-lg-3 col-md-4 col-xs-6">
<a href ="#" class ="d-block mb-4 h-100">
<img class ="img-fluid img-thumbnail" src ="img-12.jpg">
</div>
</div>
</div>
</body>
</html>
CSS
body{
padding-top:50px;
padding-bottom:50px;
background:gray;
}
img{
margin-top:25px;
box-shadow:5px 5px 5px #aaaaaa;
}
.container{
background:#f1f1f1;
padding-bottom:20px;
}
For More Tutorials Please Click Here
