グリッド（Grid） v4.0.0設定変更 v4.2.1追加

使い方（How it works）

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

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

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

設定例

コピー<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-fluid（width: 100%）を使用。
• 行（row、ロー）が列（column、カラム）を囲む。各列には、それらの間のスペースを制御するための水平方向の padding（gutter、ガター）がある。この padding は、マイナスのマージンを持つ行で打ち消される。これにより、列内のすべてのコンテンツが視覚的に左側に整列される。
• グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみを行の直下の子にすることが可能。
• 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に関する制限やバグに注意すること。

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

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

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

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

定義済クラスの種類（* は1～12の整数と auto）

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

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

等幅（Equal-width）

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

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

設定例

コピー<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-basis や border なしでは動作しなかった。古いバージョンのブラウザでは回避策があるが、最新の場合には必要はない。

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

設定例

コピー<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>

複数行の等幅（Equal-width multi-line）

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

明示的な flex-basis や border がないとこれが機能しないSafari flexboxのバグがあった。古いバージョンのブラウザには回避策があるが、ターゲットブラウザがバグのあるバージョンに分類されない場合は必要ない。

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

設定例

コピー<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、インライン幅が使用可能。他の列は、中央の列の幅に関係なくサイズが変更される。

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

設定例

コピー<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>

可変幅コンテンツ（Variable width content）

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

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

設定例

コピー<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>

レスポンシブ・クラス（Responsive classes）

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

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

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

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

4列で表示<div class="container">
	<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>
</div>

2:1で表示<div class="container">
	<div class="row">
		<div class="col-xs-8">1列目...</div>
		<div class="col-xs-4">2列目...</div>
	</div>
</div>

4列で表示コピー<div class="container">
	<div class="row">
		<div class="col">1列目...</div>
		<div class="col">2列目...</div>
		<div class="col">3列目...</div>
		<div class="col">4列目...</div>
	</div>
</div>

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

モバイルでは縦積み（Stacked to horizontal）

.col-sm-* クラスを使用すると、小（sm）以上のブレークポイントでは横並びに表示、モバイルデバイス（極小）では縦積みに表示される基本的なグリッドシステムが作成可能。

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

設定例

2:1で表示コピー<div class="container">
	<div class="row">
		<div class="col-sm-8">1列目: .col-sm-8</div>
		<div class="col-sm-4">2列目: .col-sm-4</div>
	</div>
</div>

1:1:1で表示コピー<div class="container">
	<div class="row">
		<div class="col-sm">1列目: .col-sm</div>
		<div class="col-sm">2列目: .col-sm</div>
		<div class="col-sm">3列目: .col-sm</div>
	</div>
</div>

ミックス＆マッチ（Mix and match）

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

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

設定例

極小/小サイズでは列を縦積みに表示、中サイズ以上では2:1で表示コピー<div class="container">
	<div class="row">
		<div class="col-md-8">1列目: .col-md-8</div>
		<div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
	</div>
</div>

極小/小サイズでは1:1+縦積みに表示、中サイズ以上では1:1:1で表示コピー<div class="container">
	<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>
</div>

常に1:1で表示コピー<div class="container">
	<div class="row">
		<div class="col-6">1列目: .col-6</div>
		<div class="col-6">2列目: .col-6</div>
	</div>
</div>

ガター（Gutters）v4.2.1新設

ガター（グリッド列の間隔）は、ブレークポイント固有のパディングとマイナスのマージンユーティリティクラスによってレスポンシブに調整可能。特定の行のガターを変更するには、マイナスのマージンユーティリティを .row に、それにマッチするパディングユーティリティを .cols に組み合わせる。親要素の .container や .container-fluid には、再度一致するパディングユーティリティを使用して、不要なオーバーフローを回避する調整が必要。

以下はBootstrapグリッドで大（lg）ブレークポイント以上にカスタマイズした例。.px-lg-5 で .col のパディングを増やし、親である .row の .mx-lg-n5 を打ち消し、.px-lg-5 で .container を調整。

見本

設定例

コピー<div class="container px-lg-5">
	<div class="row mx-lg-n5">
		<div class="col px-lg-5">
			<div class="p-3 border bg-light">カスタム列</div>
		</div>
		<div class="col px-lg-5">
			<div class="p-3 border bg-light">カスタム列</div>
		</div>
	</div>
</div>

行列グリッド（Row columns）v4.4.0新設

レスポンシブ .row-cols-* クラスを使用して、コンテンツとレイアウトを最も適切に表示する列数（1～6）を迅速に設定。通常の .col-* クラス（.col-md-4 など）は個々の列に適用されるが、行列グリッドクラスは手っ取り早く親要素の .row に設定する。

これらの行列グリッドクラスを使用すると、すばやい基本的なグリッドレイアウトの作成やカードのレイアウト制御が可能。

1. 1行に2列で設定

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

設定例

コピー<div class="container">
	<div class="row row-cols-2">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

2. 1行に3列で設定

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

設定例

コピー<div class="container">
	<div class="row row-cols-3">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

3. 1行に4列で設定

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

設定例

コピー<div class="container">
	<div class="row row-cols-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

4. 列の幅が均等ではない場合

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

設定例

コピー<div class="container">
	<div class="row row-cols-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col-6">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

5. ビューポートに応じて列数が変化

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

設定例

コピー<div class="container">
	<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

付属のSass mixin、row-cols() も使用可能。

設定例

Sassコピー.element {
  // 最初は3列
  @include row-cols(3);

  // 中ブレークポイントからは5列
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

定義済クラスの種類（* は1～6の整数）

※.row-cols(-{breakpoint})-* の * の設定は、

• 1 は、各列を max-width: 100% に設定
• 2 は、各列を max-width: 50% に設定
• 3 は、各列を max-width: 33.333333% に設定
• 4 は、各列を max-width: 25% に設定
• 5 は、各列を max-width: 20% に設定
• 6 は、各列を max-width: 16.666667% に設定

配置（Alignment）

Flex配置ユーティリティを使用して、縦と横の列を整列させる。以下に示すように、Flexコンテナの高さが min-height の場合、Internet Explorer 10-11ではFlexアイテムの垂直方向の配置はサポートされない。詳細については、Flexbug #3を参照。

垂直方向の配置（Vertical alignment）v4.0.0新設

列全体の垂直方向の配置

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

設定例

列を上揃えコピー<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>

列ごとの垂直方向の配置

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

設定例

コピー<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>

水平方向の配置（Horizontal alignment）v4.0.0新設

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

設定例

列の左寄せコピー<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>

ガターなし（No gutters）v4.0.0新設（v3.4.0以降からは設定変更）

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

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

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

Sass.no-gutters {
	margin-right: 0;
	margin-left: 0;

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

実際の見た目は次のとおり。他のすべての定義済のグリッドクラス（列の幅、レスポンシブの階層、並べ替えなどを含む）は引き続き使用可能。

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

設定例

.container 付きの場合コピー<div class="container">
	<div class="row no-gutters">
		<div class="col-sm-6 col-md-8">.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-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">1列目:...</div>
  <div class="col-xs-6 col-md-4">2列目:...</div></div>

コピー<div class="row no-gutters">
  <div class="col-md-8">1列目:...</div>
  <div class="col-6 col-md-4">2列目:...</div>
</div>

列の折り返し（Column wrapping）

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

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

設定例

コピー<div class="container">
	<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>
</div>

列の分割（Column breaks）v4.0.0設定変更

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

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

設定例

コピー<div class="container">
	<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>
</div>

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

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

設定例

コピー<div class="container">
	<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>

並べ替え（Reordering）

列の順序変更（Order classes）v4.0.0設定変更、クラス追加

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

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

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

設定例

コピー<div class="container">
	<div class="row">
		<div class="col order-2">
			DOMでは1番目だが表示順序は2番目
		</div>
		<div class="col order-3">
			DOMでは2番目だが表示順序は最後
		</div>
		<div class="col order-1">
			DOMでは3番目だが表示順序は最初
		</div>
	</div>
</div>

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

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

設定例

コピー<div class="container">
	<div class="row">
		<div class="col order-last">
			DOMでは1番目だが表示順序は最後
		</div>
		<div class="col">
			DOMでは2番目だが表示順序付けはない
		</div>
		<div class="col order-first">
			DOMでは3番目だが表示順序は最初
		</div>
	</div>
</div>

定義済クラスの種類 *は0～12の整数かfirst/last

空白列の指定（Offsetting columns）v4.0.0設定変更

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

オフセットクラス（Offset classes） v4.0.0設定変更

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

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

<div class="container">
	<!-- 有効/空白/有効 -->
	<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>
</div>

コピー<div class="container">
	<!-- 有効/空白/有効 -->
	<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>
</div>

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

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

設定例

<div class="container">
	<!-- 極小サイズでは縦積みに表示、小サイズでは列の間に空白あり、中サイズ以上では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>

定義済クラスの種類 *は1～12の整数

マージンクラス（Margin utilities）v4.0.0新設

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

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

設定例

有効/空白/有効1コピー<div class="container">
	<div class="row">
		<div class="col-md-4">1列目:...</div>
		<div class="col-md-4 ml-auto">2列目:...</div>
	</div>
</div>

空白/有効/空白/有効コピー<div class="container">
	<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>

有効列を両端にコピー<div class="container">
	<div class="row">
		<div class="col-auto mr-auto">1列目:...</div>
		<div class="col-auto">2列目:...</div>
	</div>
</div>

入れ子（Nesting）

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

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

設定例

コピー<div class="container">
	<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>

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 {
	@include make-container();
	// mixinの後にこの幅を定義して、`make-container()`によって生成された`width: 100%`を上書き
	width: 800px;
}
.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 は、ガター（グリッド列の間隔）の幅を設定するために使用。

設定例

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