メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

グリッド(Grid) v4.0.0設定変更

強力なモバイル・ファーストのFlexboxグリッドを使用して、12の列システム、5つのデフォルトレスポンス層、Sass変数とmixin、および数十の定義済みクラスのおかげで、すべての図形とサイズのレイアウトを作成可能。

使い方(How it works)

Bootstrapのグリッドシステムは、一連のコンテナ、行、および列を使用して、コンテンツのレイアウトし、整列する。これはFlexboxで構築され、完全にレスポンシブする。以下は、グリッドがどのように組み合わされるかの例と深い見方である。

Flexboxに慣れ親しんだり、馴染みがないのなら、背景、用語、ガイドライン、コードスニペットについては、こちらのCSS Tricks flexbox guideを読んでみること。

見本 見やすいよう色を付けています
3つの列の1列目
3つの列の2列目
3つの列の3列目
設定例
コピー<div class="container">
	<div class="row">
		<div class="col-sm">	3つの列の1列目</div>
		<div class="col-sm">	3つの列の2列目</div>
		<div class="col-sm">	3つの列の3列目</div>
	</div>
</div>

上記の例では、定義済みのグリッドクラスを使用して、小、中、大、超大型デバイスで3つの等幅列を作成している。それらの列は親要素の.containerを持つページの中央に配置される。

これがそれを打破する作業方法:

  • コンテナは、サイトのコンテンツを中央に配置し、水平に埋め込む手段を提供。全てのビューポートとデバイスサイズにわたって固定幅の .container または全幅の .container-fluidwidth: 100%)を使用。
  • 行(row)が列(column)を囲む。各列には、それらの間のスペースを制御するための水平 padding(両脇の余白)がある。この padding は、マイナスのmarginを持つ行で打ち消される。これにより、列内のすべてのコンテンツが視覚的に左側に整列される。
  • グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみを行の直下の子にすることが可能。
  • Flexboxのおかげで、指定された width を持たないグリッド列は自動的に等幅列としてレイアウトされる。例えば、.col-sm の4つの列はそれぞれ、小のブレークポイント以上で自動的に25%の幅になる。他の例については、列の自動レイアウトの項目を参照すること。
  • 列のクラスは、行ごとに可能な12のうちから使用したい列の数を示す。従って、3つの等幅列が必要な場合は、.col-4 を使用。
  • 列の幅 width は、パーセンテージで設定されているので、親要素との相対的な値は常に流動的。
  • 列には水平方向の padding があり、個々の両脇に空白を作成するが、.row 上に .no-gutters を入れれば、行から margin を削除したり、列から padding を削除することが可能。
  • グリッドをレスポンシブさせるには、レスポンシブ・ブレークポイントごとに1つずつ、全てのブレークポイント(極小)、小、中、大、特大の5つのグリッドブレークポイントがある。
  • グリッドのブレークポイントは、最小幅のメディアクエリに基づいており、その1つのブレークポイントとその上にあるすべてのものに適用される(例:.col-sm-4 は小、中、大、特大のデバイスに適用されるが、最初の xs ブレークポイントではない)。
  • よりセマンティック(意味的)なマークアップをする場合には、定義済みのグリッドクラス(.col-4 など)またはSassのmixinが使用可能。

FlexboxのいくつかのHTML要素を使用できないなど、Flexboxに関する制限やバグに注意すること。

【設定】

  • div.container(またはdiv.container-fluid) > .row > .col(-{breakpoint})(必要な数だけ入れる)
  • グリッド全体の幅を固定したい場合は固定幅レイアウト、幅全体に広がるようにしたい場合は全幅レイアウトを使用
  • .col(-{breakpoint})-*は、以下の「定義済みクラスの種類」から選択(* は1行につき合計が12になるように指定(12を超える場合は列の折り返しを参照))

 

グリッド・オプション(Grid options) v4.0.0概念変更

Bootstrapでは、ほとんどのサイズの定義で emrem 単位を使用しているが、グリッドのブレークポイントとコンテナ幅には px 単位を使用している。これはビューポート幅がピクセル単位であり、フォントサイズによって変化しないからである。

Bootstrapのグリッドシステムが、複数のデバイスでどのように機能するか、以下の表で確認すること。

デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
コンテナの最大幅 なし(自動) 540px 720px 960px 1140px
クラス名 .col- .col-sm- .col-md- .col-lg- .col-xl-
列の数 12
左右脇の空白幅 30px(それぞれの側に15pxずつ)
入れ子 可能
順序変更 可能

※(参考)Bootstrap3.xのグリッド・オプション

デバイスの幅 極小
モバイルサイズ
<768px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px

大画面サイズ
≥1200px
コンテナの最大幅 なし(自動) 750px 970px 1170px
クラス名 .col-xs- .col-sm- .col-md- .col-lg-
列の幅 自動 ~62px ~81px ~97px

【Bootstrap3.xとの変更箇所】

  • ブレークポイント:ポイントが3つから4つに増加(定義済みクラスの種類は4つから5つに増加)
  • 極小サイズは、全てのサイズで対応可能なので、.col-xs- から .col- に名称変更
  • モバイルサイズの中にブレークポイントが追加されたが、クラス名は大画面サイズ用の .col-xl- が追加
  • モバイルサイズ:.col-xs-(極小サイズ) ⇒ .col-(全てのサイズ)、.col-sm-(小サイズ)に別れる
    タブレットサイズ:.col-sm-(小サイズ) ⇒ .col-md-(中サイズ)
    デスクトップサイズ:.col-md-(中サイズ) ⇒ .col-lg-(大サイズ)
    大画面サイズ:.col-lg-(大サイズ) ⇒ .col-xl-(特大サイズ)
定義済みクラスの種類(* は1~12の数値
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
全サイズに適用 .col-*
v4.0.0名称変更
576px以上に適用 .col-sm-*
768px以上に適用 .col-md-*
992px以上に適用 .col-lg-*
1200px以上に適用 .col-xl-*
v4.0.0追加

 

列の自動レイアウト(Auto-layout columns)v4.0.0新設

.col-sm-6 のような明示的に番号を付けられたクラスがなければ、簡単な列サイズ設定のためにブレークポイント固有の列クラスを利用する。

等幅(Equal-width)

例えば、xs から xl までのすべてのデバイスとビューポートに適用される2つのグリッドレイアウトがある。必要なブレークポイントごとに任意の数の単位のないクラスを追加し、すべての列が同じ幅になるようにする。

見本 見やすいよう色を付けています

●2分割列と3分割列を同時に表示

2つの列の1列目
2つの列の2列目
3つの列の1列目
3つの列の2列目
3つの列の3列目
設定例
コピー<div class="container">
	<!-- 2分割列の設定 -->
	<div class="row">
		<div class="col">
			2つの列の1列目
		</div>
		<div class="col">
			2つの列の2列目
		</div>
	</div>
	<!-- 3分割列の設定 -->
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col">
			3つの列の2列目
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
</div>

等幅の列は複数の行に分割可能だが、Safari flexboxのバグがあり、これによって明示的な flex-basisborder なしでは動作しなかった。古いバージョンのブラウザでは回避策があるが、最新の場合には必要はない。

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
コピー<div class="container">
	<div class="row">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="w-100"></div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

1列の幅の設定(Setting one column width)

Flexboxグリッド列の自動レイアウトはまた、ある1列の幅を設定できることを意味し、その列の周りに自動的に兄弟列のサイズが変更可能。あらかじめ定義されたグリッドクラス(以下に示す)、グリッドmixin、またはインライン幅が使用可能。他の列は、中央の列の幅に関係なくサイズが変更される。

見本 見やすいよう色を付けています

●1つだけ列を広めに固定

3つの列の1列目
3つの列の2列目 (広め)
3つの列の3列目
3つの列の1列目
3つの列の2列目 (広め)
3つの列の3列目
設定例
コピー<div class="container">
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col-6">
			3つの列の2列目 (広め)
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
	<div class="row">
		<div class="col">
			 3つの列の1列目
		</div>
		<div class="col-5">
			3つの列の2列目 (広め)
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
</div>

【設定】

  • 広めにしたい列の .col.col-* にする(3分割列の場合は 5 以上にする)

可変幅コンテンツ(Variable width content)

col(-{breakpoint})-auto クラスを使用して、コンテンツの自然な幅に基づいて列のサイズを設定する。

見本 見やすいよう色を付けています
3つの列の1列目
可変幅コンテンツ
3つの列の3列目
3つの列の1列目
可変幅コンテンツ
3つの列の3列目
設定例
コピー<div class="container">
	<div class="row justify-content-md-center">
		<div class="col col-lg-2">
			3つの列の1列目
		</div>
		<div class="col-md-auto">
			可変幅コンテンツ
		</div>
		<div class="col col-lg-2">
			3つの列の3列目
		</div>
	</div>
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col-md-auto">
			可変幅コンテンツ
		</div>
		<div class="col col-lg-2">
			3つの列の3列目
		</div>
	</div>
</div>

複数行の等幅(Equal-width multi-row)

.w-100を挿入して、複数の行にまたがる等幅の列を作成。ここでは、列を改行する必要あり。.w-100表示ユーティリティを混在させることでレスポンシブ・ブレークに対応。

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
コピー<div class="row">
	<div class="col">1列目</div>
	<div class="col">2列目</div>
	<div class="w-100"></div>
	<div class="col">3列目</div>
	<div class="col">4列目</div>
</div>

 

レスポンシブ・クラス(Responsive classes)

Bootstrapのグリッドには、複雑なレスポンシブ・レイアウトを構築するための5つの階層が定義されている。極小、小、中、大、特大規模のデバイスで、列のサイズをカスタマイズすることが可能。

全てのブレークポイント(All breakpoints)v4.0.0設定変更

デバイスの最小サイズから最大サイズまで同じグリッドの場合は、.col および .col-* クラスを使用。特定のサイズの列が必要な場合は、番号付きクラスを指定。 それ以外の場合は、.col を固辞すること。

見本 見やすいよう色を付けています

●4列で表示

1列目: col
2列目: col
3列目: col
4列目: col

●2:1で表示

1列目: col-8
2列目: col-4
Bootstrap3.xの設定例 赤背景が変更箇所
4列で表示<div class="row">
	<div class="col-xs-3">1列目...</div>
	<div class="col-xs-3">2列目...</div>
	<div class="col-xs-3">3列目...</div>
	<div class="col-xs-3">4列目...</div>
</div>
2:1で表示<div class="row">
	<div class="col-xs-8">1列目...</div>
	<div class="col-xs-4">2列目...</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
4列で表示コピー<div class="row">
	<div class="col">1列目...</div>
	<div class="col">2列目...</div>
	<div class="col">3列目...</div>
	<div class="col">4列目...</div>
</div>
2:1で表示コピー<div class="row">
	<div class="col-8">1列目...</div>
	<div class="col-4">2列目...</div>
</div>

横に積み重ね(Stacked to horizontal)

.col-md-* クラスを使用すると、タブレット(中)以上のデバイスでは水平に表示、モバイルデバイスで(極小/小)は積み重ねて表示される基本的なグリッドシステムが作成可能。

見本 見やすいよう色を付けています

●2:1で表示

1列目: .col-md-8
2列目: .col-md-4

●1:1:1で表示

1列目: .col-md-4
2列目: .col-md-4
3列目: .col-md-4
設定例
2:1で表示コピー<div class="row">
	<div class="col-md-8">1列目: .col-md-8</div>
	<div class="col-md-4">2列目: .col-md-4</div>
</div>
1:1:1で表示コピー<div class="row">
	<div class="col-md-4">1列目: .col-md-4</div>
	<div class="col-md-4">2列目: .col-md-4</div>
	<div class="col-md-4">3列目: .col-md-4</div>
</div>

ミックス&マッチ(Mix and match)

列を単純にいくつかのグリッド階層に積み重ねたいなら、必要に応じて、各階層に異なるクラスの組み合わせを使用。すべての動作でより良く見える方法については、以下の例に記載。

見本 見やすいよう色を付けています

●極小/小サイズでは列を積み重ねて表示、中サイズ以上では2:1で表示

1列目: .col-12 .col-md-8
2列目: .col-6 .col-md-4

●極小/小サイズでは1:1+積み重ねで表示、中サイズ以上では1:1:1で表示

1列目: .col-6 .col-md-4
2列目: .col-6 .col-md-4
3列目: .col-6 .col-md-4

●常に1:1で表示

1列目: .col-6
2列目: .col-6
設定例
極小/小サイズでは列を積み重ねて表示、中サイズ以上では2:1で表示コピー<div class="row">
	<div class="col-12 col-md-8">1列目: .col-12 .col-md-8</div>
	<div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
</div>
極小/小サイズでは1:1+積み重ねで表示、中サイズ以上では1:1:1で表示コピー<div class="row">
	<div class="col-6 col-md-4">1列目: .col-6 .col-md-4</div>
	<div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
	<div class="col-6 col-md-4">3列目: .col-6 .col-md-4</div>
</div>
常に1:1で表示コピー<div class="row">
	<div class="col-6">1列目: .col-6</div>
	<div class="col-6">2列目: .col-6</div>
</div>

配置(Alignment)

Flexbox配置ユーティリティを使用して、縦と横の列を整列させる。

垂直方向の配置(Vertical alignment)v4.0.0新設

列全体の垂直方向の配置

見本 見やすいよう色を付けています

●列を上揃え

3つの列の1列目
(高め)
...
...
3つの列の2列目
3つの列の3列目
(少し高め)

●列を上下中央揃え

3つの列の1列目
(高め)
...
...
3つの列の2列目
3つの列の3列目
(少し高め)

●列を下揃え

3つの列の1列目
(高め)
...
...
3つの列の2列目
3つの列の3列目
(少し高め)
設定例
列を上揃えコピー<div class="container">
	<div class="row align-items-start">
		<div class="col">
		 3つの列の1列目
		 (高め)
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 (少し高め)
		</div>
	</div>
</div>
列を上下中央揃えコピー<div class="container">
	<div class="row align-items-center">
		<div class="col">
		 3つの列の1列目
		 (高め)
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 (少し高め)
		</div>
	</div>
</div>
列を下揃えコピー<div class="container">
	<div class="row align-items-end">
		<div class="col">
		 3つの列の1列目
		 (高め)
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 (少し高め)
		</div>
	</div>
</div>

【設定】

  • 列を上揃え(align-items: flex-start;):.row.align-items-start > .col
  • 列を上下中央揃え(align-items: center;):.row.align-items-center > .col
  • 列を下揃え(align-items: flex-end;):.row.align-items-end > .col

列ごとの垂直方向の配置

見本 見やすいよう色を付けています
3つの列の1列目(上揃え)
3つの列の2列目(中央揃え)
3つの列の3列目(下揃え)
設定例
コピー<div class="container">
	<div class="row">
		<div class="col align-self-start">
			3つの列の1列目(上揃え)
		</div>
		<div class="col align-self-center">
			3つの列の2列目(中央揃え)
		</div>
		<div class="col align-self-end">
			3つの列の3列目(下揃え)
		</div>
	</div>
</div>

【設定】

  • 列を上揃え(align-self: flex-start;):.row > .col.align-self-start
  • 列を中央揃え(align-self: center;):.row > .col.align-self-center
  • 列を下揃え(align-self: flex-end;):.row > .col.align-self-end

水平方向の配置(Horizontal alignment)v4.0.0新設

見本 見やすいよう色を付けています

●列の左寄せ

2つの列の1列目
2つの列の2列目

●列の中央揃え

2つの列の1列目
2つの列の2列目

●列の右寄せ

2つの列の1列目
2つの列の2列目

●列を等間隔に並べる

3つの列の1列目
3つの列の2列目
3つの列の3列目

●列を両端から均等に並べる

3つの列の1列目
3つの列の2列目
3つの列の3列目
設定例
列の左寄せコピー<div class="container">
	<div class="row justify-content-start">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列の中央揃えコピー<div class="container">
	<div class="row justify-content-center">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列の右寄せコピー<div class="container">
	<div class="row justify-content-end">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列を等間隔に並べるコピー<div class="container">
	<div class="row justify-content-around">
		<div class="col-3">
			3つの列の1列目
		</div>
		<div class="col-3">
			3つの列の2列目
		</div>
		<div class="col-3">
			3つの列の3列目
		</div>
	</div>
</div>
列を両端から均等に並べるコピー<div class="container">
	<div class="row justify-content-between">
		<div class="col-3">
			3つの列の1列目
		</div>
		<div class="col-3">
			3つの列の2列目
		</div>
		<div class="col-3">
			3つの列の3列目
		</div>
	</div>
</div>

【設定】

  • 列の左寄せ(justify-content: flex-start;):.row.justify-content-start > .col
  • 列の中央揃え(justify-content: center;):.row.justify-content-center > .col
  • 列の右寄せ(justify-content: flex-end;):.row.justify-content-end > .col
  • 列を等間隔に並べる(justify-content: space-around;):.row.justify-content-around > .col
  • 列を両端から均等に並べる(justify-content: space-between;):.row.justify-content-between > .col

両脇の無空白(No gutters)v4.0.0新設

あらかじめ定義されたグリッドクラスの列間の溝は .no-gutters で取り除くことが可能。これにより、マイナスの margin.row から削除され、水平方向の padding がすべての直下の子列から削除される。

これらのスタイルを作成するためのソースコードは次のとおり。列の再定義は、最初の子列のみに参照され、属性セレクタを使用してターゲットに設定されている。これによりより特定のセレクタが生成されるが、列の padding空白ユーティリティでさらにカスタマイズ可能。

edge-to-edge(Widthが画面の端から端まであるような)デザインが必要なら、親要素の .container または .container-fluid を外す。

設定例
コピー.no-gutters {
	margin-right: 0;
	margin-left: 0;

	> .col,
	> [class*="col-"] {
		padding-right: 0;
		padding-left: 0;
	}
}

実際には、見た目は次のとおり。他のすべての定義済みのグリッドクラス(列の幅、応答レスポンシブ階層、並べ替えなど)でこれを引き続き使用可能。

見本 見やすいよう色を付けています

.container つきの場合

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

.no-gutters なしの場合(参考)

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

.container なしの場合

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

.container, .no-gutters なしの場合(参考)

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
設定例
.container つきの場合コピー<div class="container">
	<div class="row no-gutters">
		<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
		<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	</div>
</div>
.container なしの場合コピー<div class="row no-gutters">
	<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列の折り返し(Column wrapping)

1つの行に列の数値の合計が12以上で配置されている場合、余分な列の各グループは1つの単位として新しい行に折り返される。

見本 見やすいよう色を付けています
1列目: .col-9
2列目: .col-4
9 + 4 = 13 > 12 になるので、この列は1つの連続したユニットとして新しい行に折り返される
3列目: .col-6
後続の列は新しい行に沿って継続
設定例
コピー<div class="row">
	<div class="col-9">1列目: .col-9</div>
	<div class="col-4">2列目: .col-4<br> ... </div>
	<div class="col-6">3列目: .col-6<br> ... </div>
</div>

列の分割(Column breaks)v4.0.0設定変更

Flexboxの新しい行に列を分割するには、小さなハックが必要。列を新しい行で折り返したい場合は、width: 100% の要素を追加する。通常、これは複数の .row で実行されるが、全ての実装方法がこれを考慮するわけではない。

見本 見やすいよう色を付けています

●小サイズ以上で強制改行

1列目: .col-6 .col-sm-3
2列目: .col-6 .col-sm-3
3列目: .col-6 .col-sm-3
4列目: .col-6 .col-sm-3

※参考:強制改行なし

1列目: .col-6 .col-sm-3
2列目: .col-6 .col-sm-3
3列目: .col-6 .col-sm-3
4列目: .col-6 .col-sm-3
設定例
コピー<div class="row">
	<div class="col-6 col-sm-3">1列目: .col-6 .col-sm-3</div>
	<div class="col-6 col-sm-3">2列目: .col-6 .col-sm-3</div>
	<!-- 次の列を強制的に改行する -->
	<div class="w-100"></div>
	<div class="col-6 col-sm-3">3列目: .col-6 .col-sm-3</div>
	<div class="col-6 col-sm-3">4列目: .col-6 .col-sm-3</div>
</div>

また、レスポンシブ表示ユーティリティを使用して特定のブレークポイントで分割を適用することも可能。

見本 見やすいよう色を付けています
1列目: .col-6 .col-sm-4
2列目: .col-6 .col-sm-4
3列目: .col-6 .col-sm-4
4列目: .col-6 .col-sm-4
設定例
コピー<div class="row">
	<div class="col-6 col-sm-4">1列目: .col-6 .col-sm-4</div>
	<div class="col-6 col-sm-4">2列目: .col-6 .col-sm-4</div>

	<!-- 次の列を中サイズ以上で強制的に新しい行に分割 -->
	<div class="w-100 d-none d-md-block"></div>

	<div class="col-6 col-sm-4">3列目: .col-6 .col-sm-4</div>
	<div class="col-6 col-sm-4">4列目: .col-6 .col-sm-4</div>
</div>

【設定】

  • 強制的に改行したい箇所に div.w-100 を入れる

【Bootstrap3.xとの変更箇所】

  • div.clearfixdiv.w-100(高さの異なる列をクリアして改行する方法から列を強制改行する方法に変更)

 

並べ替え(Reordering)

列の順序変更(Order classes)v4.0.0設定変更

.order- クラスを使用して、コンテンツの視覚的順序を制御。これらのクラスはレスポンシブ対応なので、ブレークポイントで order を設定することが可能(例えば、.order-1.order-md-2)。5つのグリッド層のすべてで「1」から「12」のサポートがなされている。

※v3のpush/pullクラスのスタイルは廃止。

見本 見やすいよう色を付けています
1番目だが2番目に表示
2番目だが最後に表示
3番目だが最初に表示
設定例
コピー<div class="container">
	<div class="row">
		<div class="col order-2">
			1番目だが2番目に表示
		</div>
		<div class="col order-3">
			2番目だが最後に表示
		</div>
		<div class="col order-1">
			3番目だが最初に表示
		</div>
	</div>
</div>

レスポンシブな .order-first クラスもあり、order:-1 を適用することで素早く要素の順序を変更。このクラスは、必要に応じて番号付きの .order- * クラスと混在可能。

見本 見やすいよう色を付けています
1番目に、順序付けられていない列
2番目に、順序付けられていない列
3番目だが、最初に表示される列
設定例
コピー<div class="container">
	<div class="row">
		<div class="col">
			1番目に、順序付けられていない列
		</div>
		<div class="col">
			2番目に、順序付けられていない列
		</div>
		<div class="col order-first">
			3番目だが、最初に表示される列
		</div>
	</div>
</div>

【設定】

  • .col(-{breakpoint})-*.order(-{breakpoint})-* を追加(* は並べたい順に1~12で設定可能)
  • 優先的に最初に表示したい場合は、.order(-{breakpoint})-first を追加

【注意】

  • 設定する際は、{breakpoint} を揃えること(order-lg-3...order-1...order-md-2 と設定してもorder-1,order-md-2,order-lg-3の順には表示されない模様)

【変更履歴】

  • 【v4.0.0-beta.2】.order(-{breakpoint})-first が追加

【Bootstrap3.xとの変更箇所】

  • .col-{breakpoint}-push-*, .col-{breakpoint}-pull-*.order(-{breakpoint})-*
定義済みクラスの種類 *は0~12の数値またはfirst
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
全サイズに適用 .order-*
v4.0.0変更
576px以上に適用 .order-sm-*
768px以上に適用 .order-md-*
992px以上に適用 .order-lg-*
1200px以上に適用 .order-xl-*
v4.0.0新設

空白列の指定(Offsetting columns)v4.0.0設定変更

グリッドカラムは、レスポンシブの .offset- グリッドクラスと空白ユーティリティの二つの方法でオフセット可能。グリッドクラスのサイズは余白がクイックレイアウトのより有効な変数のオフセットの幅のある列に一致。

オフセットクラス(Offset classes)※v4.0.0-beta.1で一旦廃止されたがv4.0.0-beta.2で復活

.offset-md-* クラスを使用して列を右に移動する。これらのクラスは、列の左余白を * 列だけ増加させる。例えば、.offset-md-4 は4列分 .col-md-4 を移動する。

見本 見やすいよう色と枠を付けています

●有効/空白/有効

1列目: .col-md-4
2列目: .col-md-4 .offset-md-4

●空白/有効/空白/有効

1列目: .col-md-3 .offset-md-3
2列目: .col-md-3 .offset-md-3

●空白/有効/空白

1列目: .col-md-6 .offset-md-3
Bootstrap3.xの設定例 赤背景が変更箇所

<!-- 有効/空白/有効 -->
<div class="row">
	<div class="col-md-4">1列目:...</div>
	<div class="col-md-4 col-md-offset-4">2列目:...</div>
</div>

<!-- 空白/有効/空白/有効 -->
<div class="row">
	<div class="col-md-3 col-md-offset-3">1列目:...</div>
	<div class="col-md-3 col-md-offset-3">2列目:...</div>
</div>

<!-- 空白/有効/空白 -->
<div class="row">
	<div class="col-md-6 col-md-offset-3">1列目:...</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所

<!-- 有効/空白/有効 -->
<div class="row">
	<div class="col-md-4">1列目:...</div>
	<div class="col-md-4 offset-md-4">2列目:...</div>
</div>

<!-- 空白/有効/空白/有効 -->
<div class="row">
	<div class="col-md-3 offset-md-3">1列目:...</div>
	<div class="col-md-3 offset-md-3">2列目:...</div>
</div>

<!-- 空白/有効/空白 -->
<div class="row">
	<div class="col-md-6 offset-md-3">1列目:...</div>
</div>

レスポンシブ・ブレークポイントでの列クリアに加えて、空白列をリセットする必要があるかもしれない。グリッドの実例にも記載。

見本 見やすいよう色を付けています

●極小サイズでは積み重ねで表示、小サイズでは列の間に空白あり、中サイズ以上では1:1の表示

1列目: .col-sm-5 .col-md-6
2列目: .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

●極小サイズでは積み重ねで表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズ以上では再び1:1の表示

1列目: .col-sm-6 .col-md-5 .col-lg-6
2列目: .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
設定例
<!-- 極小サイズでは積み重ねで表示、小サイズでは列の間に空白あり、中サイズ以上では1:1の表示 -->
<div class="row">
	<div class="col-sm-5 col-md-6">1列目: .col-sm-5 .col-md-6</div>
	<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目: .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<!-- 極小サイズでは積み重ねで表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズ以上では再び1:1の表示 -->
<div class="row">
	<div class="col-sm-6 col-md-5 col-lg-6">1列目: .col-sm-6 .col-md-5 .col-lg-6</div>
	<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">2列目: .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

【設定】

  • div.col(-{breakpoint})-*.offset(-{breakpoint})-*(以下の「クラスの種類」から選択)を追加(その列の左側が空白になる)

【Bootstrap3.xとの変更箇所】

  • .col(-{breakpoint})-offset-*.offset(-{breakpoint})-*
  • クラスの種類は4つから5つに増加
    モバイルサイズ:.col-xs-offset-(極小サイズ) ⇒ .offset-(極小サイズ)、.offset-sm-(小サイズ)に別れる
    タブレットサイズ:.col-sm-offset-(小サイズ) ⇒ .offset-md-(中サイズ)
    デスクトップサイズ:.col-md-offset->(中サイズ) ⇒ .offset-lg-(大サイズ)
    大画面サイズ:.col-lg-offset-(大サイズ) ⇒ .offset-xl-(特大サイズ)
定義済みクラスの種類 *は0~12の数値
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
全サイズに適用 .offset-*
v4.0.0変更
576px以上に適用 .offset-sm-*
768px以上に適用 .offset-md-*
992px以上に適用 .offset-lg-*
1200px以上に適用 .offset-xl-*
v4.0.0新設

マージンクラス(Margin utilities)v4.0.0新設

v4のflexboxへの移行により、.mr-auto のようなmarginユーティリティを使用して、兄弟列の間をを互いに空ける。

見本 見やすいよう色と枠を付けています

●有効/空白/有効1

1列目: .col-md-4
2列目: .col-md-4 .ml-auto

●空白/有効/空白/有効

1列目: .col-md-3 .ml-md-auto
2列目: .col-md-3 .ml-md-auto

●有効列を両端に

1列目: .col-auto .mr-auto
2列目: .col-auto
設定例
有効/空白/有効1コピー<div class="row">
	<div class="col-md-4">1列目:...</div>
	<div class="col-md-4 ml-auto">2列目:...</div>
</div>
空白/有効/空白/有効コピー<div class="row">
	<div class="col-md-3 ml-md-auto">1列目:...</div>
	<div class="col-md-3 ml-md-auto">2列目:...</div>
</div>
有効列を両端にコピー<div class="row">
	<div class="col-auto mr-auto">1列目:...</div>
	<div class="col-auto">2列目:...</div>
</div>

【設定】

  • div.col(-{breakpoint})-*.m{l,r,x}(-{breakpoint})-autoを追加

 

入れ子(Nesting)

既定のグリッドでコンテンツを入れ子(ある要素を別の要素の中に入れること)にするには、既存の .col-sm-* の列内に新しい .row.col-sm-* の列のセットを追加する。入れ子になった行には、最大12サイズ以内の列を含む必要がある(12サイズの列をすべて使用する必要はない)。

見本 見やすいよう色を付けています
親の1列目: .col-sm-9
子の1列目: .col-8 .col-sm-6
子の2列目: .col-4 .col-sm-6
親の2列目: .col-sm-3
設定例
コピー<div class="row">
	<div class="col-sm-9">
		親の1列目: .col-sm-9
		<div class="row">
			<div class="col-8 col-sm-6">
				子の1列目: .col-8 .col-sm-6
			</div>
			<div class="col-4 col-sm-6">
				子の2列目: .col-4 .col-sm-6
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		親の2列目: .col-sm-3
	</div>
</div>

【設定】

  • div.row > div.rowの入れ子にする

 

Sass mixin(Sass mixins)

BootstrapのソースSassファイルを使用するときは、Sass変数とmixinを使用して、カスタムで、セマンティックで、 レスポンシブなページレイアウトが作成可能。定義済みのグリッドクラスは、これらの同じ変数とmixinを使用して、素早くレスポンシブ・レイアウトに対応したすぐに使えるクラスを提供する。

変数(Variables)

変数とマップは、列の数、両脇の空白幅、列の移動を開始するメディアクエリポイントを決定。これらを使用して下記の定義済みのグリッドクラスとカスタムmixinを生成。

設定例
Sassコピー$grid-columns: 12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
	// 極小画面 / 縦モバイル
	xs: 0,
	// 小画面 / 横モバイル
	sm: 576px,
	// 中画面 / タブレット
	md: 768px,
	// 大画面 / デスクトップ
	lg: 992px,
	// 特大画面 / ワイド・デスクトップ
	xl: 1200px
);

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px
);

mixin(Mixins)

mixinは、グリッド変数とともに使用され、個々のグリッド列に対してセマンティックなCSSを生成する。

設定例
Sassコピー// 一連の列の囲みを作成
@include make-row();

// 要素をグリッド対応に作成(幅以外のすべてを適用)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// 空白列、順序変更
@include make-col-offset($size, $columns: $grid-columns);

使用例(Example usage)

Sass変数やマップを変更する場合は、変更を保存して再コンパイルする必要がある。そうすることで、列の幅、オフセット、および順序付けのための定義済みグリッドクラスの新しいセットが用意される。また、任意のブレークポイントを使用するようにレスポンシブな可視性ユーティリティも更新される。

設定例
Sassコピー.example-container {
	width: 800px;
	@include make-container();
}
.example-row {
	@include make-row();
}
.example-content-main {
	@include make-col-ready();

	@include media-breakpoint-up(sm) {
		@include make-col(6);
	}
	@include media-breakpoint-up(lg) {
		@include make-col(8);
	}
}
.example-content-secondary {
	@include make-col-ready();

	@include media-breakpoint-up(sm) {
		@include make-col(6);
	}
	@include media-breakpoint-up(lg) {
		@include make-col(4);
	}
}
HTMLコピー<div class="example-container">
	<div class="example-row">
		<div class="example-content-main">メインコンテンツ</div>
		<div class="example-content-secondary">サブコンテンツ</div>
	</div>
</div>
上記設定での表示 見やすいよう色と枠を付けています
メインコンテンツ
サブコンテンツ

 

グリッドのカスタマイズ(Customizing the grid)

組み込まれているグリッドSass変数とマップを使用して、定義済みのグリッドクラスを完全にカスタマイズすることが可能。階層の数、メディアクエリの寸法やコンテナの幅を変更して再コンパイルする。

列と左右脇の空白(Columns and gutters)

グリッド列の数はSass変数で変更可能。$grid-columns は、個々の列のの幅(パーセント)を生成するために使用され、$grid-gutter-width は、列の空白の padding-leftpadding-right 全体に均等に分割されてブレークポイント固有の幅に入る。

設定例
コピー$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

グリッド階層(Grid tiers)

列そのものを超えて移動できるようにグリッド階層の数をカスタマイズすることも可能。4グリッド階層だけが必要なら、$grid-breakpoints$container-max-widths を次のように更新:

設定例
コピー$grid-breakpoints: (
	xs: 0,
	sm: 480px,
	md: 768px,
	lg: 1024px
);

$container-max-widths: (
	sm: 420px,
	md: 720px,
	lg: 960px
);

Sassの変数やマップを変更するときは、変更を保存して再コンパイルする必要がある。そうすることで列の幅と順序の定義済みのグリッドクラスの新しいセットが出力される。またカスタムブレークポイントを使用するようにレスポンシブの表示ユーティリティも更新される。グリッド値はpxrem, em, % ではなく)で設定すること。