Bootstrap 5 コンテナー

Bootstrap 5 コンテナー

前章で学んだように、Bootstrapはサイトのコンテンツを包装するための要素を含む必要があります。

コンテナにコンテンツを詰め込み、2つのコンテナクラスが利用可能です：

  • .container クラスはレスポンシブで固定幅のコンテナを提供します
  • .container-fluid クラスは視口の全幅を跨ぐ全幅コンテナを提供します

固定コンテナ

を使用して .container クラスはレスポンシブで固定幅のコンテナを作成します。

注意してください、その幅（max-width）は、異なるスクリーンサイズで変化します：

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

以下の例を開き、ブラウザのウィンドウサイズを調整して、コンテナの幅が異なるブレイクポイントでどのように変化するかを確認してください：

例

<div class="container">
  <h1>私の最初のBootstrapページ</h1>
  <p>これは一部のテキストです。</p>
</div>

自分で試してみる

XXL ブレイクポイント（≥1400px）は Bootstrap 5 で新しく追加され、Bootstrap 4 では最大のブレイクポイントは Extra large（≥1200px）でした。

流体コンテナ

を使用して .container-fluid クラスは全幅コンテナを作成し、常にスクリーンの全幅を跨ぎます（width 常に 100%）：

例

<div class="container-fluid">
  <h1>私の最初のBootstrapページ</h1>
  <p>これは一部のテキストです。</p>
</div>

自分で試してみる

コンテナの余白

デフォルトでは、コンテナには左右の余白（左右のインラインマージン）があり、顶部や底部の余白（上下のインラインマージン）はありません。したがって、私たちはよく スペースインストールツール（ユーティリティ）として、追加の余白やマージンなど、見た目を良くするために使用されます。例えば、.pt-5 の意味は「大きな顶部填充：

例

<div class="container pt-5"></div>

自分で試してみる

コンテナのボーダーや色

その他のツール、例えばボーダーや色もよくコンテナと一緒に使用されます：

例

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

自分で試してみる

色とボーダートールの知識について、後の章でさらに学びます。

レスポンシブコンテナ

さらに、 .container-sm|md|lg|xl クラスを使用して、コンテナがどのタイミングでレスポンシブになるべきかを決定します。

コンテナの max-width 異なるスクリーンサイズ/ビューポートで変化します：

クラス Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.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 100% 100% 100% 100% 100% 1320px

例

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

自分で試してみる