コンテナ

コンテナは、Bootstrap の基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する際には必須です。

コンテナは内部にコンテンツを格納したり、適切な余白を与えたり(場合によっては)中央に配置したりするために使われます。コンテナはネストできますが、ほとんどのレイアウトではネストする必要はありません。

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

• Container コンポーネントは各レスポンシブブレークポイントで max-width を設定します。
• type="fluid" 属性を指定した場合、すべてのブレークポイントで width: 100% となります。
• type="{breakpoint}" は、指定されたブレークポイントまで width: 100% になります。

下の表は、各コンテナの max-width と元の Container および type="fluid" との比較を各ブレークポイントで示しています。

デフォルトの Container 固定幅でレスポンシブなコンテナです。

レスポンシブコンテナは、指定したブレークポイントに到達するまで 100% の幅を持つクラスを指定することができます。その後はより高いブレークポイントごとにmax-widthが適用されます。

例えば type="sm" 属性は sm ブレークポイントに到達するまで 100% の幅で始まり、md、lg、xl、xxl とスケールアップしていきます。

ビューポート幅のコンテナを使うにはContainer に type="fluid" 属性を追加してください。