Bootstrap 5 コンテナ

Bootstrap 5 コンテナ

前の章で、Bootstrap にはサイト コンテンツをラップする要素を含める必要があることを学びました。

コンテナにコンテンツを入力します。使用可能なコンテナ クラスは 2 つあります。

• .container クラスは、応答性の高い固定幅コンテナを提供します
• .container-fluid クラスは、ビューポートの全幅にわたる全幅のコンテナを提供します。

固定コンテナ

.container クラスを使用して、応答性の高い固定幅のコンテナを作成します。

画面サイズが異なると幅 (max-width) が変わることに注意してください。

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

例

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

自分で試してみてください

XXL ブレークポイント (≥1400px) は Bootstrap 5 の新機能で、Bootstrap 4 の最大のブレークポイントは特大 (≥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 は、画面サイズやビューポートによって異なります。

例

<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>

自分で試してみてください