<div class="container">
  <div class="row">
  <div class="col-9">1列目: .col-9</div>
  <div class="col-4">2列目: .col-4</div>
  <div class="col-6">3列目: .col-6</div>
</div>
</div>
.row > [class*=col] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
.row {
  background-color: rgba(86,61,124,.15);
}
.container {
  margin-top: 30px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.