レイアウト(Layout)

目次

• 目次
• ブレークポイント(Breakpoints)
• コンテナ(Containers)
• グリッド(Grid)
  • カラム指定(Columns)
  • カラム数指定(Row columns)
  • レスポンシブ(Responsive)
  • 自動幅グリッド(Auto width)
• カラム(Columns)
  • 縦方向のアライン(Align items)
  • 縦方向のアライン(Align self)
  • 横方向のアライン(Justify)
  • カラムの順序(Columns order)
  • カラムのオフセット(Offset)
  • カラムのマージン(Margin)
• ガター(Gutters)
  • 水平方向のガター(Horizontal gutter)
  • 垂直方向のガター(Vertical gutter)
  • 水平・垂直方向のガター(Horizontal & vertical gutter)

ブレークポイント(Breakpoints)

sm, md, lg, xl, xxl のブレークポイントは、画面の横幅に応じて表示を変化させたい場合に利用します。Bootstrap 5では新たなブレークポイント xxl が追加されました。

Breakpoint	Class infix	Bootstrap 3	Bootstrap 4	Bootstrap 5
Extra small	None	～767px	～575px	～575px
Small	sm	768～991px	576～767pxpx	576～767px
Medium	md	992～1999px	768～991pxpx	768～991px
Large	lg	1200px～	992～1190px	992～1199px
Extra large	xl	(未定義)	1200px～	1200～1399px
Extra extra large	xxl	(未定義)	(未定義)	1400px～

*-{breakpoints}-* は、画面サイズが breakpoint で指定した幅よりも大きな場合のみ適用されます。例えば、.d-none は非表示、.d-block はブロック表示を行うクラスですが、下記のように指定することで、デフォルトでは表示されないけれど、画面が sm サイズ以上(576px以上)の場合にブロックとして表示されるようになります。つまり、小さなスマホ画面では表示しないけど、大きなPCディスプレイでは表示するといった操作が可能となります。

<div class="d-none d-sm-block">
...
</div>

コンテナ(Containers)

コンテナは画面全体の横幅を制御したい場合などに利用します。.container, .container-{breakpoint} は画面の横幅に応じて段階的に、.container-fluid は画面の横幅いっぱいまでスムーズに広がるコンテナを生成します。段階的なコンテナは開発者にとって評価が楽という利点があります。スムーズなコンテナは画面の横幅を最大限に利用できる利点があります。

	xs ～575px	sm 576～767px	md 768～991px	lg 992～1199px	xl 1200～1399px	xxl 1400px～
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

<div class="container my-box">...></div>
<div class="container-sd my-box">...</div>
<div class="container-md my-box">...</div>
<div class="container-lg my-box">...</div>
<div class="container-xl my-box">...</div>
<div class="container-xxl my-box">...</div>
<div class="container-fluid my-box">...</div>

グリッド(Grid)

.row と .col を組み合わせることで、横幅を、幅の等しい複数のグリッド領域に分割することができます。

<div class="container-fluid">
  <div class="row">
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
  </div>
</div>

カラム指定(Columns)

横幅は12のカラムに分割されています。.col-{n} の {n} には1～12のカラム数を指定することができます。カラム数の合計が12を超える場合は改行して表示されます。

<div class="container-fluid">
  <div class="row">
    <div class="col-1 my-box">1</div>
    <div class="col-2 my-box">2</div>
    <div class="col-3 my-box">3</div>
  </div>
  <div class="row">
    <div class="col-2 my-box">2</div>
    <div class="col-4 my-box">4</div>
    <div class="col-6 my-box">6</div>
  </div>
</div>

カラム数指定(Row columns)

.row-cols-{n} , .row-cols-{breakpoint}-{n} は、{n} 個のカラムを構成します。n には 1～6 の値を指定することができます。

<div class="container-fluid">
  <div class="row row-cols-3">
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
  </div>
</div>

レスポンシブ(Responsive)

.col-{breakpoint} や .col-{breakpoint}-{n} を用いて、画面の横幅に応じて表示方法を変更することができます。下記の例では、画面サイズが sm(576px) 以上の場合は3分割となり、それより小さい場合は縦方向に並びます。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm my-box">...</div>
    <div class="col-sm my-box">...</div>
    <div class="col-sm my-box">...</div>
  </div>
</div>

自動幅グリッド(Auto width)

.row-cols-auto や .col-auto や .col-{breakpoint}-auto はコンテンツの内容によってグリッド横幅を自動的に計算します。

<div class="container-fluid">
  <div class="row row-cols-auto">
    <div class="col my-box">Short msg.</div>
    <div class="col my-box">Normal length of message.</div>
    <div class="col my-box">This is very long long long long long message.</div>
  </div>
  <div class="row">
    <div class="col-auto my-box">Short msg.</div>
    <div class="col-auto my-box">Normal length of message.</div>
    <div class="col-auto my-box">This is very long long long long long message.</div>
  </div>
</div>

カラム(Columns)

縦方向のアライン(Align items)

.align-items-* は、子カラムの縦方向のアラインを指定します。

<div class="container-fluid">
  <div class="row align-items-start my-box-light">
    <div class="col my-box">start</div>
  </div>
  <div class="row align-items-center my-box-light">
    <div class="col my-box">center</div>
  </div>
  <div class="row align-items-end my-box-light">
    <div class="col my-box"endA</div>
  </div>
</div>

縦方向のアライン(Align self)

.align-self-* は、カラム自身の縦方向のアラインを指定します。

<div class="container-fluid">
  <div class="row my-box-light">
    <div class="col align-self-start">start</div>
    <div class="col align-self-center">center</div>
    <div class="col align-self-end">end</div>
  </div>
</div>

横方向のアライン(Justify)

.justify-content-* は、子カラムの横方向のアライン指定します。start は左寄せ、center は中央寄せ、end は右寄せ、around はカラム間と両端に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。

<div class="container-fluid">
  <div class="row justify-content-start">...</div>
  <div class="row justify-content-center">...</div>
  <div class="row justify-content-end">...</div>
  <div class="row justify-content-around">...</div>
  <div class="row justify-content-between">...</div>
</div>

カラムの順序(Columns order)

.order-{n}, .order-{breakpoint}-{n} を用いてカラムの表示順序を変更することができます。{n} には 1～5 の数値を指定します。.order-first は最初、.order-last は最後を指定します。

<div class="container-fluid">
  <div class="row">
    <div class="col order-3 my-box">A</div>
    <div class="col order-2 my-box">B</div>
    <div class="col order-1 my-box">C</div>
  </div>
</div>

カラムのオフセット(Offset)

.offset-{n}, .offset-{breakpoint}-{n} は、n カラム分のオフセット(隙間)をあけます。{n} には 0～11 の数値を指定します。

<div class="container-fluid">
  <div class="row">
    <div class="col-1 my-box">1</div>
       :
    <div class="col-1 my-box">12</div>
  </div>
  <div class="row">
    <div class="col-1 my-box">1</div>
    <div class="col-1 offset-3 my-box">2</div>
  </div>
</div>

カラムのマージン(Margin)

.ms-{n}, .me-{n} を用いて開始方向(左側)、終了方向(右側)にマージンを設けることができます。.ms-auto, .me-auto を用いると最大のマージンをとることが可能で、コンテンツを左端と右端に表示する場合に便利です。

<div class="container-fluid my-box-light">
  <div class="row my-box-light">
    <div class="col-3 my-box">Left</div>
    <div class="col-5 ms-auto my-box">Right</div>
  </div>
</div>

ガター(Gutters)

水平方向のガター(Horizontal gutter)

.gx-{n} はカラムの子要素間の隙間を制御します。カラム間の隙間ではなく、カラムの子要素間の隙間を調整していることに注意してください。下記の個々のボックスはカラムではなく、カラムの子要素です。{n} には 0～5 を指定します。.gx-0 は隙間を 0 にします。デフォルトでは .gx-4 の隙間が開けられます。

<div class="container-fluid">
  <div class="row gx-0">
    <div class="col"><div class="my-box">.gx-0</div></div>
    <div class="col"><div class="my-box">.gx-0</div></div>
    <div class="col"><div class="my-box">.gx-0</div></div>
  </div>
  <div class="row gx-3">
    <div class="col"><div class="my-box">.gx-3</div></div>
    <div class="col"><div class="my-box">.gx-3</div></div>
    <div class="col"><div class="my-box">.gx-3</div></div>
  </div>
  <div class="row gx-4">
    <div class="col"><div class="my-box">.gx-4</div></div>
    <div class="col"><div class="my-box">.gx-4</div></div>
    <div class="col"><div class="my-box">.gx-4</div></div>
  </div>
  <div class="row gx-5">
    <div class="col"><div class="my-box">.gx-5</div></div>
    <div class="col"><div class="my-box">.gx-5</div></div>
    <div class="col"><div class="my-box">.gx-5</div></div>
  </div>
</div>

垂直方向のガター(Vertical gutter)

.gy-{n} は垂直方向のガター（カラムコンテンツ間の隙間）を設定します。{n} には 0～5 の数値を指定します。

<div class="container-fluid">
  <div class="row gy-2">
    <div class="col-12"><div class="my-box">.gy-2</div></div>
    <div class="col-12"><div class="my-box">.gy-2</div></div>
  </div>
</div>

水平・垂直方向のガター(Horizontal & vertical gutter)

.g-{n} は水平方向および垂直方向のガター（カラムコンテンツ間の隙間）を設定します。{n} には 0～5 の数値を指定します。

<div class="container-fluid">
  <div class="row gy-2">
    <div class="col-12"><div class="my-box">.gy-2</div></div>
    <div class="col-12"><div class="my-box">.gy-2</div></div>
  </div>
</div>

---