<div class="container bg-primary themed-container">.container</div>
<div class="container-sm bg-primary themed-container">.container-sm</div>
<div class="container-md bg-primary themed-container">.container-md</div>
<div class="container-lg bg-primary themed-container">.container-lg</div>
<div class="container-xl bg-primary themed-container">.container-xl</div>
<div class="container-fluid bg-primary themed-container">.container-fluid</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.