A simple responsive image grid

Simple and fully responsive, this image grid includes a text overlay to put the image title. Made to have minimal white space it is a perfect template for a gallery or portfolio site.

Responsive image grid video

Source code below

the HTML:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a href="#"><img class='img-fluid w-100 main-img' src="https://placeimg.com/800/460/nature" alt="image"/></a>
            <div class="centered"><h3 class="img-overlay">Header</h3></div>
        </div>
    </div>
</div>

The CSS:

body {
  background: #fafafa;
}
.main-img {
  padding-bottom: 4rem;
}

.col-sm-3,
.col-md-3,
.col-lg-3 {
  padding: 0.15rem;
  margin-bottom: -4rem;
}

.centered {
  position: absolute;
  top: 62%;
  left: 20%;
  transform: translate(-50%, -50%);
}
@media (max-width: 992px) {
  .centered {
    position: absolute;
    top: 48%;
    left: 30%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 977px) {
  .centered {
    position: absolute;
    top: 54%;
    left: 28%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 891px) {
  .centered {
    top: 48%;
    left: 30%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 891px) {
  .centered {
    top: 48%;
    left: 28%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 767px) {
  .centered {
    top: 64%;
    left: 20%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 575px) {
  .centered {
    top: 76%;
    left: 10%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 545px) {
  .centered {
    top: 76%;
    left: 10%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 408px) {
  .centered {
    top: 72%;
    left: 14%;
    transform: translate(-50%, -50%);
  }
}

.img-overlay {
  color: white;
  opacity: 0.7;
  font-size: 1.4rem;
}

View on  Codepen here.