Bootstrap4では画面の横幅を12分割して管理する「グリッドシステム」を採用しています。
この「グリッドシステム」を利用すれば、簡単にスマホなどに対応したレスポンシブデザインの表を作成することができます。
Bootstrap4のグリッドシステム
Bootstrap4のグリッドシステムは以下のように画面の横幅を12分割に均等割りして管理されています。
1番目
2番目
3番目
4番目
5番目
6番目
7番目
8番目
9番目
10番目
11番目
12番目
それぞれのグリッドは「col-数字」で幅を決定し、数字の合計が必ず12になるように設定します。
（以下の例は「3+2+4+3=12」になっています。）
col-3
col-2
col-4
col-3
Boostrap4のグリッドシステムは
- .container・・・グリッド全体を囲むエリア
- .row ・・・行を表すエリア（.rowはグリッド内に複数持つことができます）
- .col ・・・行内のカラム表すエリア（.colは.row内に複数持つことができます）
といったクラスで管理されています。
実際のサンプルは
<div class="container"> <div class="row" style="height: 100px;"> <div class="col-3 d-flex align-items-center font-weight-bold border border-danger bg-primary">col-3</div> <div class="col-2 d-flex align-items-center font-weight-bold border border-danger bg-success">col-2</div> <div class="col-4 d-flex align-items-center font-weight-bold border border-danger bg-info">col-4</div> <div class="col-3 d-flex align-items-center font-weight-bold border border-danger bg-warning">col-3</div> </div> </div>
のように指定します。
Bootstrap4での画面幅
Bootstrap4では、画面幅を5つのブレークポイントで設定することができます。
| サイズ | 主な利用用途 | 画面幅 |
|---|---|---|
| xl | デスクトップ PC などの大画面モニタ | 1200px以上 |
| lg | ノート PC などの省サイズモニタ | 992px以上 |
| md | タブレット端末など | 768px以上 |
| sm | スマートフォン（横持ち）など | 576px以上 |
| – | スマートフォン（縦持ち）、IoT 端末など | 576px未満 |
<div class="container"> <div class="row" style="height: 100px;"> <div class="col-lg-3 d-flex align-items-center font-weight-bold border border-danger bg-primary">col-3</div> <div class="col-lg-2 d-flex align-items-center font-weight-bold border border-danger bg-success">col-2</div> <div class="col-lg-4 d-flex align-items-center font-weight-bold border border-danger bg-info">col-4</div> <div class="col-lg-3 d-flex align-items-center font-weight-bold border border-danger bg-warning">col-3</div> </div> <div class="row" style="height: 100px;"> <div class="col-xl-3 d-flex align-items-center font-weight-bold border border-danger bg-primary">col-xl-3</div> <div class="col-xl-2 d-flex align-items-center font-weight-bold border border-danger bg-success">col-xl-2</div> <div class="col-xl-4 d-flex align-items-center font-weight-bold border border-danger bg-info">col-xl-4</div> <div class="col-xl-3 d-flex align-items-center font-weight-bold border border-danger bg-warning">col-xl-3</div> </div> <div class="row" style="height: 100px;"> <div class="col-md-4 d-flex align-items-center font-weight-bold border border-danger bg-primary">col-md-4</div> <div class="col-md-2 d-flex align-items-center font-weight-bold border border-danger bg-success">col-md-2</div> <div class="col-md-6 d-flex align-items-center font-weight-bold border border-danger bg-info">col-md-4</div> </div> <div class="row" style="height: 100px;"> <div class="col-sm-4 d-flex align-items-center font-weight-bold border border-danger bg-primary">col-sm-3</div> <div class="col-md-8 d-flex align-items-center font-weight-bold border border-danger bg-success">col-sm-2</div> </div> </div>
のように指定します。
