<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

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.