Bootstrap 4 tutorial: レイアウト: 概要 / グリッド / レイアウトユーティリティ

名称	ビューポート(画面)幅	`.container` に設定される幅
(xs)	<576px	設定なし(auto)
sm	≧576px	540px
md	≧768px	720px
lg	≧992px	960px
xl	≧1200px	1140px

Z-index	使用目的(コンポーネント)
1,2,3	要素状態(ホバー、アクティブ、フォーカス)の表示効果用
1000	ドロップダウン
1020	上端張り付き (ナビゲーションバー)
1030	上端固定 / 下端固定 (ナビゲーションバー)
1040	バックドロップ (モーダル背景)
1050	モーダル
1060	ポップオーバー
1070	ツールチップ

注: 特に .row で左右マージンに負の値を設定してガターをキャンセルしている点に注意。そのためコンテナ/行/列への横方向のマージン/パディング設定を行う場合は注意が必要。特に行の横マージン、列の横パディングを独自に設定するとガターの設定を壊してしまい、予測外の結果になることが多い。

列の等分配置

行 div.row の中に列 div.col を複数用いると行の中に等分配置する。行の幅や内部要素の幅、種類などから一行に入る列の最大数をブラウザが判定し、それを超えると次の行に折り返す。

次は環境別の最大個数確認用に作った例(20個まで)。

以下の例ではレイアウトの内部構造が分かるように列 div.col* にボーダー .borderを付け、さらにコンテンツ領域と左右余白(ガター)の設定状態を表示するためコンテント領域に薄い背景色 .bg-light を付けている。

1/1

1/2

2/2

1/3

2/3

3/3

1/4

2/4

3/4

4/4

1/5

2/5

3/5

4/5

5/5

1/6

2/6

3/6

4/6

5/6

6/6

1/7

2/7

3/7

4/7

5/7

6/7

7/7

1/8

2/8

3/8

4/8

5/8

6/8

7/8

8/8

1/9

2/9

3/9

4/9

5/9

6/9

7/9

8/9

9/9

1/10

2/10

3/10

4/10

5/10

6/10

7/10

8/10

9/10

10/10

1/11

2/11

3/11

4/11

5/11

6/11

7/11

8/11

9/11

10/11

11/11

1/12

2/12

3/12

4/12

5/12

6/12

7/12

8/12

9/12

10/12

11/12

12/12

1/13

2/13

3/13

4/13

5/13

6/13

7/13

8/13

9/13

10/13

11/13

12/13

13/13

1/14

2/14

3/14

4/14

5/14

6/14

7/14

8/14

9/14

10/14

11/14

12/14

13/14

14/14

1/15

2/15

3/15

4/15

5/15

6/15

7/15

8/15

9/15

10/15

11/15

12/15

13/15

14/15

15/15

1/16

2/16

3/16

4/16

5/16

6/16

7/16

8/16

9/16

10/16

11/16

12/16

13/16

14/16

15/16

16/16

1/17

2/17

3/17

4/17

5/17

6/17

7/17

8/17

9/17

10/17

11/17

12/17

13/17

14/17

15/17

16/17

17/17

1/18

2/18

3/18

4/18

5/18

6/18

7/18

8/18

9/18

10/18

11/18

12/18

13/18

14/18

15/18

16/18

17/18

18/18

1/19

2/19

3/19

4/19

5/19

6/19

7/19

8/19

9/19

10/19

11/19

12/19

13/19

14/19

15/19

16/19

17/19

18/19

19/19

1/20

2/20

3/20

4/20

5/20

6/20

7/20

8/20

9/20

10/20

11/20

12/20

13/20

14/20

15/20

16/20

17/20

18/20

19/20

20/20

構造は次の通り(以下すべて親のコンテナ div.container は省略)。

div.row
- div.col (×設定個数: 1..16)
  - テキスト {行内index}/{設定個数}

折り返し(改行)

div.col を用いた等分配置で、特定位置で折り返す場合は中身が空の div.w-100 を挿入する。

.row

.row⇒ .w-100

.row

.row⇒ .w-100

.row

構造

div.row
- div.col (×2)
- div.w-100 (強制折り返し)
- div.col (×3)
- div.w-100 (強制折り返し)
- div.col (×4)

列の幅指定(1/12ステップ)

div.col-(1|2|3|4|5|6|7|8|9|10|11|12)

.col-1

.col-2

.col-3

.col-4

.col-5

.col-6

.col-7

.col-8

.col-9

.col-10

.col-11

.col-12

固定幅と等分の組み合わせ

.col (1/6)

.col-6 6/12固定

.col (1/6)

.col (7/36)

.col-5 5/12固定

.col (7/36)

構造

div.row
- div.col
- div.col-6
- div.col (×2)
div.row
- div.col (×2)
- div.col-5
- div.col

幅の自動設定

(.col の代わりに).col-auto を用いるとブラウザのデフォルト幅に設定する(CSSの width: auto; を設定)。この場合は(均等配分でなく)内部コンテンツに対応した幅に設定される。

.col-auto 123

.col-auto 1234567890

.col-auto 12345678901234567890

公式ドキュメントの例はレスポンシブ動作とFlexboxを利用した組み合わせ例。やや高度なので後で解説する(⇒ 幅の自動設定とFlexboxの組み合わせ)。

列の折り返し

1行に12を超える幅の列を設定した場合は≦12となるように適宜折り返される。

.col-9

.col-4

.col-7

.col-3

構造

div.row
- div.col-9
- div.col-4 ⇒ 合計>12のため折り返して次行の先頭として表示
- div.col-7
- div.col-3 ⇒ 合計>12のため折り返して次行の先頭として表示

強制折り返し

幅を指定する場合も中身が空の div.w-100 を挿入するとその位置で強制的に折り返す。

.col-3

.col-5⇒ .w-100

.col-4

構造

div.row
- div.col-3
- div.col-5
- div.w-100 (強制折り返し)
- div.col-4

レスポンシブ幅設定

.col-(sm|md|lg|xl)(-1|-2|-3|...|-12|-auto)?

例1: 等分のレスポンシブ動作

.col (常に2列等配分)

.col

.col-sm (幅≧576pxは2列、未満は2行( .col なしと同じ)

.col-sm

.col-md (幅≧768pxは2列、未満は2行( .col なしと同じ)

.col-md

.col-lg (幅≧992pxは2列、未満は2行( .col なしと同じ)

.col-lg

.col-xl (幅≧1200pxは2列、未満は2行( .col なしと同じ)

.col-xl

構造

div.row
- div.col(-sm|-md|-lg|-xl)? (×2)

例2: 幅指定のレスポンシブ動作

.col-3

.col-6

.col-sm-3

.col-sm-6

.col-md-3

.col-md-6

.col-lg-3

.col-lg-6

.col-xl-3

.col-xl-6

構造

div.row
- div.col(-sm|-md|-lg|-xl)?-3
- div.col(-sm|-md|-lg|-xl)?-6

例3: 自動幅のレスポンシブ動作

.col-auto 12345

.col-auto 12345678901234567890

.col-sm-auto 12345

.col-sm-auto 12345678901234567890

.col-md-auto 12345

.col-md-auto 12345678901234567890

.col-lg-auto 12345

.col-lg-auto 12345678901234567890

.col-xl-auto 12345

.col-xl-auto 12345678901234567890

構造

div.row
- div.col(-sm|-md|-lg|-xl)?-auto (×2)
  - テキスト(幅違いを2種類)

レイアウトの縦/横切り替え

ここから応用例。モバイル/PCで次のようにレイアウトを切り替える場合を考える。

モバイル

1-1

1-2

2-1

2-2

2-3

1-1

1-2

2-1

2-2

2-3

設定例は次の通り(ブラウザで幅を変更すると切り替わる)。なおPC/モバイルの切り替えはmd(≧768px)に設定している(公式ドキュメントの例はsmだがPCブラウザで確認しやすいよう変更)。

1-1 .col-md-8

1-2 .col-md-4

2-1 .col-md

2-2 .col-md

2-3 .col-md

構造

div.row
- div.col-md-8
- div.col-md-4
div.row
- div.col-md (×3)

幅指定とデバイス幅制御の組み合わせ

次もモバイル/PCの表示切り替え例。

モバイル

1-1

1-2

2-1

2-2

2-3

3-1

3-2

1-1

1-2

2-1

2-2

2-3

3-1

3-2

実際に設定した例は次の通り(mdブレークポイントで切り替え)。

1-1 .col-12.col-md-8

1-2 .col-6.col-md-4

2-1 .col-6.col-md-4

2-2 .col-6.col-md-4

2-3 .col-6.col-md-4

3-1 .col-6

3-2 .col-6

幅の自動設定とFlexboxの組み合わせ

幅の自動設定、Flexboxとレスポンシブ動作を組み合わせた例(公式ドキュメントより、かなり複雑)。

行 div.row に .justify-content-md-center (⇒ Flexbox)を設定(md以上で要素を中央寄せ)
各行内の中央列に .col-md-auto を設定(md以上でブラウザデフォルト幅)
左下の列に .col (等分、または取得できる最大幅)
残りすべての列に .col.col-lg-2 (デフォルトは等分配置、lg以上で幅2)

実際に設定したものを先に示す( .col-md-auto を設定した中央要素は色を変えて表示)。

1-1 .col.col-lg-2

1-2 .col-md-auto

1-3 .col.col-lg-2

2-1 .col

2-2 .col-md-auto

2-3 .col.col-lg-2

全ケースのレスポンシブ動作は3通りある。

sm(<768px)

1-1

1-2

1-1

2-1

2-2

2-1

lg(≥992px)

1-1

1-2

1-3

2-1

2-2

2-3

md(768px≤width<992px)

1-1

1-2

1-3

2-1

2-2

2-3

アラインメント

Flexboxユーティリティを利用する。

上下の配置

以下の例では行 div.row に赤いボーダーを付け、高さを 5rem に固定

.row.align-items-start

.col (1/3)

.col (2/3)

.col (3/3)

.row.align-items-center

.col (1/3)

.col (2/3)

.col (3/3)

.row.align-items-end

.col (1/3)

.col (2/3)

.col (3/3)

.col.align-self-(start|center|end)

-start

-center

-end

左右の配置

.row.justify-content-start

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-center

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-end

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-around

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-between

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

ガターの除去

グリッドには左右両方に15pxのパディング(ガター)が設定されているが、行 div.row に .no-gutters を追加するとガターを除去して配置する。

div.row

.col-9

.col-3

div.row.no-gutters

.col-9

.col-3

実際には単にガターを除去するのではなく次の通り設定している。これに対する通常の設定はガターを参照(比較すること)。

div.row.no-gutters
- 横マージン(通常は -15px )を解除( 0 に設定)
  - これにより親コンテナのガターが適用され、両端が 15px ずつ短くなる
- (CSSの子結合子 > を用いて)子要素の列 div.col-* のガターを解除( 0 に設定)

次は公式ドキュメントからの例(少し補足)。まず実例を示す。

div.row

.col-12.col-sm-6.col-md-8

.col-6.col-md-4

div.row.no-gutters

.col-12.col-sm-6.col-md-8

.col-6.col-md-4

これもレスポンシブ動作の例になっている。ガターとは関係ない(本題ではない)が、全応答ケースを示しておく。

xs(<576px)

md以上(≥768px)

sm(576px≤width<768px)

列の順序指定

div.col はデフォルトでは記述順に配置するが .order-* で順序を制御できる(⇒ Flexbox )。

.order-n (1≦n≦12)を用いて設定 (12⇒1⇒なし⇒7の順に記述した場合: なしは先頭に配置される)

.order-12

.order-1

なし

.order-7

構造

div.row
- div.col.order-12
- div.col.order-1
- div.col
- div.col.order-7

.order-firstは必ず先頭、.order-lastは必ず末尾 (なし⇒last⇒firstの順に記述した場合)

なし

.order-last

.order-first

構造

div.row
- div.col
- div.col.order-last
- div.col.order-first

列の左右配置調整

`.offset-*`を用いた配置制御

.offset-(1|2|3|...) で数値に対応した空間を確保できる。

.col-4

.offset-4.col-4

構造

div.row
- div.col-4
- div.offset-4.col-4

.offset-3.col-3

構造

div.row
- div.offset-3.col-3
- div.offset-3.col-3

.offset-3.col-6

構造

div.row
- div.offset-3.col-6

レスポンシブ設定 .offset-(xl|lg|md|sm)-(1|2|3|...)

次は複雑な例(公式ドキュメントより)。まず実際に設定したものを先に示す。

1L
.col-sm-5
.col-md-6

1R
.offset-sm-2.col-sm-5
.offset-md-0.col-md-6

2L
.col-sm-6
.col-md-5
.col-lg-6

2R
.col-sm-6
.offset-md-2.col-md-5
.offset-lg-0.col-lg-6

全条件は次の通り

	xs	sm	md	lg,xl		xs	sm	md	lg,xl
1行目左 (1L)	なし (幅100%)	幅5	幅6		1行目右 (1R)	なし (幅100%)	オフセット2 幅5	オフセット0 ^[注] 幅6
2行目左 (2L)	なし (幅100%)	幅6	幅5	幅6	2行目右 (2R)	なし (幅100%)	幅6	オフセット2 幅5	オフセット0 ^[注] 幅6

注: 右側要素の最後でオフセットを0に設定するレスポンシブ設定クラスは(一見無意味に思えるが)必要。それよりも小さいブレークポイントでオフセットを設定しているため、それを0に打ち消すための設定が必要。

レスポンシブ動作は次の4通り

xs(<576px)

sm(576px≤width<768px)

md(768px≤width<992px)

lg,xl(≥992px)

マージンユーティリティ

空白ユーティリティを用いた例。これも動作がやや複雑なのでまず設定例から示す。

1L .col-md-4

1R .col-md-4.ml-auto

2L .col-md-3.ml-md-auto

2R .col-md-3.ml-md-auto

3L .col-auto.mr-auto

3R .col-auto

条件は次の通り

	< md	≧ md		< md	≧ md
1行目左 (1L)	なし (幅100%)	幅4	1行目右 (1R)	なし (幅100%)	幅4 左マージン `auto`
2行目左 (2L)	なし (幅100%)	幅3 左マージン `auto`	2行目右 (2R)	なし (幅100%)	幅3 左マージン `auto`
3行目左 (3L)	幅 `auto` 右マージン `auto`		3行目右 (3R)	幅 `auto`

動作は次の通り。

xs, sm (<768px)

md, lg, xl (≥768px)

ネスト

列 div.col(-*) の中に行 div.row(-*) を入れてネストさせることができる(理論的には何重でも可能だが意味があるのはせいぜい2重まで)。例えば次のような(12と素因数の相性が悪い)8分割単位の互い違いレイアウトを作る場合に必要になる。

構造

div.row
- div col-6 (左上半分)
  - div.row (ネストして内部を再分割)
    - div.col-3 (×4)
      - div.bg-light
        
        テキスト (1|2|3|4)
div.row
- div.col-6.offset-6 (右下半分)
  - div.row (ネストして内部を再分割)
    - div.col-3 (×4)
      - div.bg-light
        
        テキスト (5|6|7|8)

構造を色分けしたものを次に示す。構造は上と同じだが要素境界にボーダを追加し、さらに外側 div.row に薄緑、内側 div.row にピンクの背景を付けている(上下パディングも適宜追加)。実際にはガター処理のため左右が15pxずつはみ出していることに注意。通常は行 .row(-*) や列 .col(-*) に背景やボーダーは付けないため見えないが、ここでは構造解説のためわざと見せている。

ただでさえ複雑になりやすいのでなるべく避けるべき(多くの場合は回避できる)。上記の例はどうしても必要になる状況を意図的に作ったもので、単に8等分するなら列の等分配置を使えばよい。

レイアウトユーティリティ

レイアウト用のBootstrapユーティリティについて(簡単な紹介のみ)

要素の表示/非表示の設定 ⇒ 表示
flexboxを用いたレイアウト ⇒ Flexbox
マージンとパディングの設定 ⇒ 空白
(配置を変えずに)表示だけ消す場合 ⇒ 可視性

Bootstrap 4 tutorial

概要

コンテナ

レスポンシブ動作のブレークポイント

Z-index

グリッド

基本的な使い方

ガター

列の等分配置

折り返し(改行)

列の幅指定(1/12ステップ)

固定幅と等分の組み合わせ

幅の自動設定

列の折り返し

強制折り返し

レスポンシブ幅設定

例1: 等分のレスポンシブ動作

例2: 幅指定のレスポンシブ動作

例3: 自動幅のレスポンシブ動作

レイアウトの縦/横切り替え

幅指定とデバイス幅制御の組み合わせ

幅の自動設定とFlexboxの組み合わせ

アラインメント

上下の配置

左右の配置

ガターの除去

列の順序指定

列の左右配置調整

`.offset-*`を用いた配置制御

マージンユーティリティ

ネスト

レイアウトユーティリティ