To made CSS easier BootStrap is one of the globally popular Framework. If you are using BootStrap in your application you don’t need to bother about the type of devices and their resolutions. Let’s talk about a photo album. Here to gain better user experience you must required a responsive image gallery. In the below Code I created a Bootstrap image Gallery. This image gallery is completely responsive.
To show you a demo here I used 9 images with resolution 150px-150px. These images are png files. To place these images in a matrix view here I used HTML UL element. LI attribute inside UL element contains BootStrap classes. As you know Grid system of bootstrap is divided into 12 columns. To achieve a gallery view here I placed 6 images in a single row. All these columns divided by col-md-2 (12 Col/6 Images). Including col-md-* for medium scale resolution in my LI I included col-lg-* for Large Screen, col-sm-* for Small Screen & col-xs-*.
Depending upon your application template it may required you need a fixed width image gallery. In this case in the below code you just required to set a width for container class. To align images in center I have two additional classes row-centered & col-centered. To maintain a minimum distance between the walls of image here I used margin: 10px under col-centered class. You can upgrade this value depending upon the image size & gallery width.
Bootstrap 5 image Gallery Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Responsive Bootstrap image Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<style type="text/css">
.container { width: auto; }
.row-centered { text-align: center; }
.col-centered { display: inline-block; float:none; text-align: left; margin: 10px; }
</style>
</head>
<body>
<div class="container row-centered">
<ul class="row list-unstyled">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/1.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/2.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/3.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/4.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/5.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/6.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/7.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/8.png" class="img-pos img-responsive" />
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-centered">
<img src="images/9.png" class="img-pos img-responsive" />
</li>
</ul>
</div>
</body>
</html>
Why Use Bootstrap 5 for Image Galleries?
Bootstrap 5 simplifies the creation of responsive image galleries by providing pre-built components and classes. Its grid system ensures that galleries adapt seamlessly to different screen sizes, from desktops to mobile devices. Additionally, Bootstrap 5 eliminates the need for extensive custom CSS, making it an ideal choice for developers seeking efficiency without sacrificing aesthetics.
Conclusion
Bootstrap 5 provides a robust foundation for creating responsive, visually appealing image galleries with minimal effort. By leveraging its grid system, card components, and third-party plugins, developers can build galleries that adapt seamlessly across devices while maintaining performance and accessibility. Whether you’re designing a portfolio, e-commerce site, or photo blog, Bootstrap 5’s flexibility ensures your image gallery will look professional and function flawlessly.
With these techniques, you can create a responsive Bootstrap 5 image gallery that enhances user experience while maintaining a clean, modern design. By following best practices in performance optimization and accessibility, your gallery will not only look great but also perform efficiently across all platforms.
