<div class="container-fluid">
  <div class="row">
    <div class="col-4 offset-md-4">
      <div class="test top"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="test left"></div>
    </div>
    <div class="col-4 offset-md-4">
      <div class="test right"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-4 offset-md-4">
      <div class="test bot"></div>
    </div>
  </div>
</div>
.test {
  background-color: seagreen;
  width: 100%;
  height: 300px;
}

.top {
  position: relative;
  right: 50%;
  top: 20%;
}

.left {
  position: relative;
  top: 50%;
  left: 20%;
}

.right {
  position: relative;
  bottom: 50%;
  right: 20%;
}

.bot {
  position: relative;
  left: 50%;
  bottom: 20%;
}

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js