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

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

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

12の列システム、5つのデフォルトレスポンス層、Sass変数とmixin、数十の定義済クラスにより、強力なモバイル・ファーストのFlexboxグリッドを使用して、すべての形状とサイズのレイアウトを構築する。

使い方(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(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に関する制限やバグに注意すること。

【設定】

  • 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
コンテナの max-width なし(自動) 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

【変更履歴】

  • 【v4.0.0】
    • ブレークポイント:ポイントが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の整数と auto
デバイスの幅 極小
縦モバイルサイズ
<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>

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

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

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

見本 見やすいよう色を付けています
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>

 

レスポンシブ・クラス(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="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>
Bootstrap4.xの設定例 緑背景が変更箇所
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で表示

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

●1:1:1で表示

1列目: .col-sm
2列目: .col-sm
3列目: .col-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で表示

1列目: .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="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>

【設定】

  1. .container(または .container-fluid)に .p{sides}(-{breakpoint})-{size}パディングクラス)を追加
  2. .row.m{sides}(-{breakpoint})-n{size}マイナスのマージンクラス)を追加
  3. .col-*.p{sides}(-{breakpoint})-{size}パディングクラス)を追加

【注意】

  • 各クラスの {sides}, {breakpoint}, {size} は統一すること

行列グリッド(Row columns)v4.4.0新設

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

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

1. 1行に2列で設定

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<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列で設定

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<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列で設定

見本 見やすいよう色を付けています
1列目
2列目
3列目
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. 列の幅が均等ではない場合

見本 見やすいよう色を付けています
1列目
2列目
3列目
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. ビューポートに応じて列数が変化

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<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);
  }
}

【設定】

  • div.row.row-cols(-{breakpoint})-* > div.col
    .row-cols(-{breakpoint})-* は以下の「定義済クラスの種類」から選択
定義済クラスの種類(* は1~6の整数
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
全サイズで適用 .row-cols-*
576px以上で適用 .row-cols-sm-*
768px以上で適用 .row-cols-md-*
992px以上で適用 .row-cols-lg-*
1200px以上で適用 .row-cols-xl-*

.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新設

列全体の垂直方向の配置

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

●列を上揃え

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新設(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 付きの場合

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

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

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

.container なしの場合

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

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

.col-sm-6 .col-md-8
.col-6 .col-md-4
設定例
.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>
Bootstrap3.4.xの設定例 赤背景が変更箇所
<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>
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="row no-gutters">
  <div class="col-md-8">1列目:...</div>
  <div class="col-6 col-md-4">2列目:...</div>
</div>

【設定】

  • .row.no-gutters を追加

【Bootstrap3.4.0~との変更箇所】

  • .row-no-gutters.no-gutters

列の折り返し(Column wrapping)

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

見本 見やすいよう色を付けています
1列目: .col-9
2列目: .col-4
9 + 4 = 13 > 12 になるので、この列は1つの連続したユニットとして新しい行に折り返される
3列目: .col-6
後続の列は新しい行に沿って継続
設定例
<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 で実行されるが、全ての実装方法がこれを考慮するわけではない。

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

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

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="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>

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

見本 見やすいよう色を付けています
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="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>

【設定】

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

【変更履歴】

  • 【v4.0.0】
    • div.clearfixdiv.w-100(高さの異なる列をクリアして改行する方法 ⇒ 列を強制改行する方法)

 

並べ替え(Reordering)

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

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

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

見本 見やすいよう色を付けています
DOMでは1番目だが表示順序は2番目
DOMでは2番目だが表示順序は最後
DOMでは3番目だが表示順序は最初
設定例
<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:-1order:13order: $columns + 1)を適用することで要素の順序を変更。このクラスは、必要に応じて番号付きの .order-* クラスと混在可能。

見本 見やすいよう色を付けています
DOMでは1番目だが表示順序は最後
DOMでは2番目だが表示順序付けはない
DOMでは3番目だが表示順序は最初
設定例
<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>

【設定】

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

【注意】

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

【変更履歴】

  • 【v4.0.0】
    • .col-{breakpoint}-push-*, .col-{breakpoint}-pull-*.order(-{breakpoint})-*
    • .order(-{breakpoint})-first, .order(-{breakpoint})-0, .order(-{breakpoint})-last が追加
定義済クラスの種類 *は0~12の整数かfirst/last
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

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

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

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

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

.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="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>
Bootstrap4.xの設定例 緑背景が変更箇所
<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>

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

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

●極小サイズでは縦積みに表示、小サイズでは列の間に空白あり、中サイズ以上では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
設定例
<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>

【設定】

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

【変更履歴】

  • 【v4.0.0】
    • .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-(特大サイズ)
定義済クラスの種類 *は1~12の整数
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

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

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

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

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

●有効/空白/有効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="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>

【設定】

  • 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="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>

【設定】

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