Bootstrap5 コンテナ

前の章で、Bootstrap はウェブサイトのコンテンツを包むためのコンテナ要素が必要であることを学びました。

次の2つのコンテナクラスを使用できます：

• .containerクラスはデフォルトのコンテナで、固定幅のレイアウトを提供し、幅は画面サイズに応じて調整されます。
• .container-fluidクラスは 100% 幅で、ビューポート全体を占めるコンテナに使用されます。このコンテナクラスを使用すると、常に画面全体の幅いっぱいになり、全画面レイアウトに適しています。

固定幅

.containerクラスは固定幅のレスポンシブページを作成するために使用されます。

注意：幅（max-width）は、画面の幅に応じて同じ比率で拡大または縮小されます。

以下の例では、ブラウザウィンドウのサイズを調整して、コンテナの幅が異なる画面でどう変化するかを確認できます：

注意：超特大画面（≥1400px）は Bootstrap 5 で新しく追加されました。Bootstrap 4 での最大は特大画面（≥1200px）でした。

100% 幅

.container-fluidクラスは全画面サイズのコンテナを作成するために使用され、コンテナは常に画面全体の幅にわたります（width は常に 100%）：

コンテナのパディング

デフォルトでは、コンテナには左右のパディングがあり、上下にはパディングがありません。Bootstrap は余白を埋めるためのスペーシングクラスをいくつか提供しています。たとえば、.pt-5は上部のパディングを埋めるために使用されます：

コンテナの枠線と色

Bootstrap は、コンテナのスタイルを設定するための枠線（border）と色（bg-dark、bg-primary など）のクラスも提供しています：

後の章でこれらのスタイルについて詳しく説明します。

レスポンシブコンテナ

あなたは使用できます.container-sm|md|lg|xlクラスを使用してレスポンシブコンテナを作成できます。

コンテナの max-width 属性値は、画面のサイズに応じて変化します。