コンテナ Containers
Bootstrapは、コンテンツやグリッド・システムを収容するコンテナ要素を必要とする。
コンテナ要素は、固定幅(.container
)と全幅(.container-fluid
)の2種類用意されている。
どちらのコンテナ要素も、入れ子(ネスト)にできる。
固定幅(.container
)
固定幅だが、レスポンシブ。表示領域に表示しきれなければ、幅を狭める。
class
属性にcontainer
を指定する。
サンプル
ソースコード
<div class="container bg-info">
<h1>サンプル</h1>
<p><a class="btn btn-primary" href="../css/container.html#usage1" target="_blank">固定幅のコンテナ</a> のサンプル。</p>
<p>・・・</p>
<p>・・・</p>
<p>・・・</p>
</div>
全幅(.container-fluid
)
表示領域の幅全体に表示する。
class
属性にcontainer-fluid
を指定する。
サンプル
ソースコード
<div class="container-fluid bg-info">
<h1>サンプル</h1>
<p><a class="btn btn-primary" href="../css/container.html#usage1" target="_blank">全幅のコンテナ</a> のサンプル。</p>
<p>・・・</p>
<p>・・・</p>
<p>・・・</p>
</div>