<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/wedding.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/rocks.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/falls2.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/paris.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/nature.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/mist.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/paris.jpg" class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/underwater.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/ocean.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/wedding.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/rocks.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/underwater.jpg" class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/wedding.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/rocks.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/falls2.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/paris.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/nature.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/mist.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/paris.jpg" class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/underwater.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/ocean.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/wedding.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/rocks.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/underwater.jpg" class="img-fluid">
</div>
</div>
</div>
/* Create four equal columns that sits next to each other
And also over write left & right padding with internal stylesheet for col*/
.row > div {
padding: 0 4px !important;
}
img {
margin-top: 8px;
vertical-align: middle;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.