「Bootstrap4」col-{breakpoint}-{n} でスマートフォン画面を等分にする

2020年11月25日

構文
<div class="row">
<div class="col-sm-3″ >xxx</div>
</div>
使用例

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>ブラウザのサイズをリセットして効果を確認します</p>
  <p> スマートフォン 576～767px。</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">AA</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">BB</div>
    <div class="col-sm-3" style="background-color:lavender;">CC</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">DD</div>
  </div>
</div>