Bootstrap3
日本語リファレンス

広告

コンテナ  Containers


Bootstrapは、コンテンツやグリッド・システムを収容するコンテナ要素を必要とする。

コンテナ要素は、固定幅(.container)と全幅(.container-fluid)の2種類用意されている。

どちらのコンテナ要素も、入れ子(ネスト)にできる。


固定幅だが、レスポンシブ。表示領域に表示しきれなければ、幅を狭める。

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>

表示領域の幅全体に表示する。

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>

広告