コンテナ

コンテナは、コンテンツを入れるためのブロックで、Bootstrapのグリッドレイアウトを利用するために必要なブロックです。

コンテナの利用

コンテナには「.container」か、「.fruid-container」を指定します。

<div class="container">
  <h1>.container</h1>
</div>

「.container」は、スマートフォン端末の場合は横100%表示で、それ以外は左右に余白ができます。

<div class="container-fluid">
  <h1>.container-fruid</h1>
</div>

「.container-fruid」を指定すると、常に横100%表示されます。

コンテナのサイズ

Bootstrap 4は、4つのブレイクポイントがデフォルトで用意されています。
各ブレイクポイントと、それに合わせたコンテナエリアサイズは下記の通りです。
コンテナサイズは「.container」を指定した場合です。

  Extra small Small Medium Large Extra Large
ブレイクポイント < 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
コンテナサイズ None(余白無し) 540px 720px 960px 1140px
利用シーン 縦向き電話 横向き電話 タブレット デスクトップ さらに大きいデスクトップ

 

Bootstrapでは通常このコンテナの中に、コンテンツを作っていきます。

 

コンテンツをシェア


このエントリーをはてなブックマークに追加