クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Bootstrap4

Bootstrap4 画面幅100%で制作したい場合(サンプル付き)

投稿日:2017年11月22日 更新日:

Bootstrap4のcontainerクラスは最大幅が1140pxに設定されています。
サイトのよっては、画面幅100%を使って制作したい場合があります。
オシャレなサイトなどで多いですよね。

こんな要望にもBootstrapだと簡単に応える事ができます。
やり方もとても簡単で「container」クラスを「container-fluid」に変えるだけでOKです。
Bootstrapだと超簡単ですね!

「fluid」は「流体」「流動体」という意味があるようです。
なんとなくですが理解できますね。

良ければサンプルも見てくださいね。

たったこれだけで全画面表示に対応したサイトが作成できます。
自分でCSSを組まなくても、クラス名をしていくだけで様々な状況に対応していけるのがCSSフレームワークの醍醐味ですよね。
ありがたく使わせてもらいましょう!

-Bootstrap4

執筆者:

関連記事

Bootstrap4 colクラスの使い方

Bootstrap4で縦の領域はcolクラスを使って分ける事になります。 縦幅を均等に分けたい場合 均等に縦幅を分けたい場合はrowの中にcolを好きな数だけ作ればOKです。 例えばrowの中にcol …

Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …

Bootstrap4 レイアウトの基本

Bootstrapについて レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。 CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。 その代表格と言えばTw …

Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …

Bootstrap4 上下中央・上寄せ・下寄せ(d-flex)

上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。 flexboxを利用するため、それぞれ2つのクラスを指定すればOKです。 1. 上下中央寄せ 「d-flex」と「align-ite …


comment

メールアドレスが公開されることはありません。