How to Create a Responsive Image Gallery in Bootstrap ?
Last Updated :
05 Apr, 2024
An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop screens and smaller mobile devices.
Responsive Image Gallery in Bootstrap
- First, create a basic HTML structure and provide a background color using the “bg-success” class.
- After that create a container using a “container” class which holds the entire gallery.
- Use Bootstrap’s utility classes for layout and positioning, such as “position-relative”, “top-50”, “start-50”, and “translate-middle”, to center the captions within the images.
- Also, use JavaScript to toggle the visibility of the captions on hover.
Example: Creating a Responsive Image Gallery in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<style>
.gallery-item img {
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-success ">
<div class="container">
<h1 class="text-center my-4 text-white">
Responsive Image Gallery
</h1>
<div class="row row-cols-1 row-cols-md-2
row-cols-lg-3 g-3">
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
alt="Image 1" class="w-100">
<div class="position-absolute top-50 start-50
translate-middle text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
Coding
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg"
alt="Image 2" class="w-100">
<div class="position-absolute top-50
start-50 translate-middle
text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
HTML
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg"
alt="Image 3" class="w-100 ">
<div class="position-absolute top-50
start-50 translate-middle
text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
JavaScript
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
alt="Image 4" class="w-100">
<div class="position-absolute top-50
start-50 translate-middle
text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
HTML
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg"
alt="Image 5" class="w-100">
<div class="position-absolute top-50
start-50 translate-middle
text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
JavaScript
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative gallery-item"
style="cursor: pointer;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
alt="Image 6" class="w-100">
<div class="position-absolute top-50
start-50 translate-middle
text-center d-none">
<div class="bg-success bg-opacity-70
text-white px-4 py-2">
HTML
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js">
</script>
<script>
// Show caption on hover
let position_relative =
document.querySelectorAll('.position-relative');
position_relative.forEach(item => {
item.addEventListener('mouseover', event => {
const caption = item.querySelector('.position-absolute');
caption.classList.remove('d-none');
});
item.addEventListener('mouseleave', event => {
const caption = item.querySelector('.position-absolute');
caption.classList.add('d-none');
});
});
</script>
</body>
</html>
Output:
Output
Share your thoughts in the comments
Please Login to comment...