<div class="container">
  <h3>列の左寄せ(.justify-content-start)</h3>
  <div class="row justify-content-start">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

<div class="container">
  <h3>列の右揃え(.justify-content-end)</h3>
  <div class="row justify-content-end">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

<div class="container">
  <h3>列の中央揃え(.justify-content-center)</h3>
  <div class="row justify-content-center">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

<div class="container">
  <h3>最初と最後の列を両端に配置し、残りの要素は均等に間隔をあけて配置(.justify-content-between)</h3>
  <div class="row justify-content-between">
    <div class="col-2">
      4つの列の1列目
    </div>
    <div class="col-2">
      4つの列の2列目
    </div>
    <div class="col-2">
      4つの列の3列目
    </div>
    <div class="col-2">
      4つの列の4列目
    </div>
  </div>

<div class="container">
  <h3>両端の列も含め、均等に間隔をあけて配置(.justify-content-around)</h3>
  <div class="row justify-content-around">
    <div class="col-2">
      4つの列の1列目
    </div>
    <div class="col-2">
      4つの列の2列目
    </div>
    <div class="col-2">
      4つの列の3列目
    </div>
    <div class="col-2">
      4つの列の4列目
    </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);
}

h3 {
  margin-top: 1rem;
  text-align: center;
}

.container {
  margin-bottom: 20px;
}

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.