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

コンテナ(Containers) v5.0.0-alpha1概要より名称変更

コンテナは、特定のデバイスやビューポート内にコンテンツを含め、paddingを空け、配置するBootstrapの基本的な要素。

目次

使い方(How they work)

コンテナは、Bootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合は必須。コンテナは、その中にコンテンツを包括、余白の調整、(場合によっては)中央に配置するのに使用。コンテナは入れ子も可能だが、ほとんどのレイアウトは入れ子になったコンテナを必要としない。

Bootstrapには3つの異なるコンテナがある。

  • .container は、各レスポンシブ・ブレークポイントで max-width(最大幅)を設定
  • .container-fluid は、全てのブレークポイントで width: 100%
  • .container-{breakpoint} は、指定されたブレークポイントまで width: 100%

次の表は、各レスポンシブ・コンテナの各ブレークポイントでの max-width について、従来の .container.container-fluid と合わせて比較。

実際の動作は、グリッドの実例で確認すること。

コンテナの幅 極小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
超特大
≥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
v5.0.0-alpha1追加
100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

 

デフォルトのコンテナ(Default container)

デフォルトの .container クラスはレスポンシブな固定幅のコンテナとなる。つまり max-width は各ブレークポイントで変わる。

設定例
<div class="container">
	<!-- ココにコンテンツを入れる -->
</div>
【設定】
  • div.container でコンテンツを囲む

 

レスポンシブ・コンテナ(Responsive)v5.0.0-alpha1クラス追加

レスポンシブ・コンテナを使用すると、指定したブレークポイントに到達するまで100%幅のクラスを指定可能。その後は上位の各ブレークポイントで max-width を適用。例えば、.container-smsm ブレークポイントに到達するまで100%幅で、md, lg, xl, xxl のブレークポイントではスケールアップされる。

設定例
<div class="container-sm">小のブレークポイントまで幅100%</div>
<div class="container-md">中のブレークポイントまで幅100%</div>
<div class="container-lg">大のブレークポイントまで幅100%</div>
<div class="container-xl">特大のブレークポイントまで幅100%</div>
<div class="container-xxl">超特大のブレークポイントまで幅100%</div>
【設定】
  • div.container-{breakpoint} でコンテンツを囲む
【変更履歴】
  • 【v5.0.0-alpha1】
    • .container-xxl が追加

 

全幅のコンテナ(Fluid)

ビューポート幅全体に広がる全幅のコンテナには .container-fluid を使用。

設定例
<div class="container-fluid">
	<!-- ココにコンテンツを入れる -->
</div>
【設定】
  • div.container-fluid でコンテンツを囲む

 

Sass v5.0.0-alpha1新設

上記のように、Bootstrapは一連の定義済みのコンテナクラスを生成し、必要なレイアウトを構築。これらの定義済みのコンテナクラスをカスタマイズするには、それらを強化するSassマップ(scss/_variables.scss 内にある)の値を変更して再コンパイルする。

デフォルトの設定
scss/_variables.scss 内$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px,
	xxl: 1320px
);

Sassのカスタマイズに加えて、Sass mixinを使用して独自のコンテナも作成可能。

設定例
custom.scss// mixinのソース
@mixin make-container($padding-x: $container-padding-x) {
	width: 100%;
	padding-right: $padding-x;
	padding-left: $padding-x;
	margin-right: auto;
	margin-left: auto;
}

// 使い方
.custom-container {
	@include make-container();
}