<div class="container">
  <h3>列を垂直方向上揃え、align-items-startクラスを指定した例</h3>
  <div class="row align-items-start">
    <div class="col">
     3つの列の1列目
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
    </div>
  </div>
  
  <h3>列を垂直方向中央揃え、align-items-centerクラスを指定した例</h3>
  <div class="row align-items-center">
    <div class="col">
     3つの列の1列目
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
    </div>
  </div>
  
  <h3>列を垂直方向下揃え、align-item-endクラスを指定した例</h3>
  <div class="row align-items-end">
    <div class="col">
     3つの列の1列目
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
    </div>
  </div>
  
  <h3>高さ自動調整、align-item-strechクラスを指定した例</h3>
  <div class="row align-items-strech">
    <div class="col h100">
     3つの列の1列目<br>
     高さ100px指定
    </div>
    <div class="col">
     3つの列の2列目<br>
     高さの指定なし
    </div>
    <div class="col h250">
     3つの列の3列目<br>
     高さ250px指定
    </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 {
   min-height: 7rem;
   background-color: rgba(255,0,0,.1);
}

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

.h100 {
  height: 80px;
}
.h250 {
  height: 250px;
}

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.