<div class="container mt-3">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col themed-grid-col">Column</div>
    <div class="col themed-grid-col">Column</div>
    <div class="col themed-grid-col">Column</div>
    <div class="col themed-grid-col">Column</div>
  </div>
</div>
.themed-grid-col {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.themed-grid-row {
  min-height: 10rem;
  background-color: rgba(255,0,0,.1);
}

.themed-container {
  padding: 15px;
  margin-top: 30px;
  background-color: rgba(0, 123, 255, .15);
  border: 1px solid rgba(0, 123, 255, .2);
}

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.