<div class="container mt-3">
  <!-- columns with equal width -->
  <div class="row">
    <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
    <div class="col-sm themed-grid-col">.col-sm</div>
    <div class="col-sm-3 themed-grid-col">.col-sm-3</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-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.