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>
