Bootstrap 4 Grid Overlay

bootstrap-4-grid-overlay.html

<div class="grid-overlay">
  <div class="container">
    <div class="row">
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
      <div class="col-xs-1"><span></span></div>
    </div>
  </div>
</div>

grid-overlay.scss

.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: .1;

  span {
    display: block;
    height: 100vh;
    background: red;
  }
}