How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
Last Updated :
05 May, 2025
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap.
Features or Functionalities to implement:
- Responsive images
- Responsive Grid System
- Image viewer
Responsive image galleryPrerequisites: Basic knowledge of HTML, CSS, JavaScript, jQuery, and Bootstrap. Also, the user should be aware of how the grid system in Bootstrap works. We will divide the complete solution into three different sections in the first section we will create the structure for the gallery. In the second section, we will design the gallery by using CSS. And in the last section will make it available to respond to the user's interactions. Creating structure: Initialize HTML layout and responsive images, but we will attach the images by jQuery, in an array format.
Bootstrap code: We will use a bootstrap modal as an image viewer and modify it according to our requirements accordingly. We will render all unnecessary components of the modal transparent. Remember, we are appending the image in the modal, so we need to use on() method to attach functionalities for such selectors.
jQuery code: Below is the script for appending in this manner. We'll be supposing that we are getting the images from the server (as an array of image URLs in JavaScript). Now we will append the image accordingly in the content panel of our page. Below is the implementation for the same
html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<br>
<br>
<center>
<h1 class="text text-success">GeeksforGeeks</h1>
<b>Responsive image gallery</b>
</center>
<br>
<br>
<div class="container-fluid">
<center>
<div id=gallery>
<!-- Content is appended here -->
</div>
</center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
img {
border-radius: 8px;
}
.container-fluid {
margin-left: 12px;
margin-right: 12px
}
.contain {
padding-top: 8px;
padding-bottom: 8px;
}
CSS
/* For overriding box-shadow and other default
effects of modal and it's children */
.modal,
.modal-content,
.modal-header,
.modal-footer {
background-color: transparent;
border: 0px;
color: white;
/* Disable box shadow for different browsers */
-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
}
.modal-dialog {
width: 100%;
height: 50%;
margin-top: 8px;
}
.close {
color: white;
opacity: 0.8;
}
.modal-body {
height: 75%;
}
JavaScript
// Taking Array of Image Addresses
// Suppose it as information from the server
// Modify this for different address
a = [
'https://www.geeksforgeeks.org/wp-content/uploads/javascript.png',
'https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png',
'https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png',
'https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png',
'https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png',
'https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'
];
let x = 0;
for (let i = 0; x < a.length; i++) {
let append = "<div class='row'>";
for (let j = 0; j < 6 && x < a.length; j++) {
append += `
<div class="contain col-sm-6 col-md-2">
<img class="img-responsive" src=` + a[x++] + `>
</div>
`;
}
append += '</div>';
appender(append);
}
// Function to append the data
function appender(x) {
$('#gallery').html(function (i, original_html) {
return (original_html + x);
});
}
// For Image Modal
$(document).on('click', 'img', function () {
imgAddr = $(this).attr('src');
data = "<center><img src=" + imgAddr + " width='50%'>";
$('#myModal').find('.modal-body').html(data);
$('#myModal').modal();
});
Output:
Similar Reads
How to Create a Custom Image Magnifier using jQuery ? Glimpse of Image magnifier: An image magnifier is the zooming capability of your cursor point. Where you placed your cursor in the define div the image will be popped out in zoom mode. Like in the shopping sites, when you want to purchase any kind of cloth and want to check the material or print on
4 min read
How to Design Image Slider using jQuery ? A slideshow container that cycles through a list of images on a web page. The following article will guide you to implement an image slider using HTML, CSS, and jQuery. The jQuery image slider contains images that run them using the previous and next icons. Previous and Next arrows are used to trave
5 min read
How to put images in a box without space using Bootstrap? Bootstrap 4 is a CSS a library for frontend web development developed by Twitter which helps the developer to beautify the way the webpage looks. The bootstrap library has pre-defined CSS classes that are easy to use and it helps the developer to provide an artistic look to the website with minimal
3 min read
Create a Photo Gallery with Thumbnail using jQuery In this article, we are going to learn to create a custom photo gallery with thumbnails using HTML, CSS, and JQuery. We will create the thumbnails for all images and when the user clicks on any thumbnail, it should render as a large image.By the end of this article, users will be able to create the
3 min read
How to create a Photo lightbox popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Photo lightbox popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstyleshee
1 min read
How to design lazy loading of images/videos for mobiles using jQuery Plugin? In this article, we will learn to design the loading of images or videos for mobile-oriented applications using the jQuery Lazy Load XT plugin.Prerequisite: Download the pre-compiled required library files from the link and save it in your working folder for the following implementation.Example 1: T
2 min read