コンテナ（Containers） v5.0.0「概要」より名称変更

使い方（How they work）

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

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

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

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

実際の動作は、グリッドの実例でご確認下さい。

デフォルトのコンテナ（Default container）

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

設定例

<div class="container">
  <!-- ココにコンテンツを入れる -->
</div>

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

レスポンシブ・コンテナを使用すると、指定したブレークポイントに到達するまで100%幅のクラスを指定できる。その後は上位の各ブレークポイントで max-width を適用。例えば、.container-sm は sm ブレークポイントに到達するまで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>

全幅のコンテナ（Fluid）

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

設定例

<div class="container-fluid">
  <!-- ココにコンテンツを入れる -->
</div>

CSS v5.0.0-alpha1追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0項目追加

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

デフォルトの設定

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

Sassのマップや変数を変更する方法の詳細や例については、グリッドのCSSの項目に記載。

Sassミックスイン（Sass mixins）v5.3.0項目追加

Sassのカスタマイズに加えて、Sassミックスインを使用して独自のコンテナも作成できる。

設定例

custom.scss// ミックスインのソース
@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();
}