Bootstrap4のグリッドシステムおさらい

記事内に広告が含まれています。

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のグリッドシステムは

  1.  .container・・・グリッド全体を囲むエリア
  2.  .row   ・・・行を表すエリア(.rowはグリッド内に複数持つことができます)
  3.  .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>

のように指定します。

タイトルとURLをコピーしました