線上書籍

一、垂直對齊：Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。(row)

1. align-items-start(預設)：置頂
2. align-items-center：置中
3. align-items-end：置底
4. 程式碼：https://codepen.io/ugm/pen/LdXeyW <div class="container"> <div class="row align-items-start my-3"> <div class="col-2"><div class="cell">A</div></div> <div class="col-2"><div class="cell">B</div></div> <div class="col-2"><div class="cell">C</div></div> </div> <div class="row align-items-center mb-3"> <div class="col-2"><div class="cell">A</div></div> <div class="col-2"><div class="cell">B</div></div> <div class="col-2"><div class="cell">C</div></div> </div> <div class="row align-items-end mb-3"> <div class="col-2"><div class="cell">A</div></div> <div class="col-2"><div class="cell">B</div></div> <div class="col-2"><div class="cell">C</div></div> </div> </div>

二、單獨針對 Column 做對齊的動作(col)

1. align-self-start：置頂
2. align-self-center：置中
3. align-self-end：置底
4. 程式碼： <h4>單獨</h4> <div class="row my-3"> <div class="col-2 align-self-start"><div class="cell">A</div></div> <div class="col-2 align-self-center"><div class="cell">B</div></div> <div class="col-2 align-self-end"><div class="cell">C</div></div> </div>