Bootstrapで横幅いっぱいのレイアウトにする方法！

Bootstrapで.containerクラスを使用すると左右に自動的に余白が付き、コンテンツの幅が画面サイズによって段階的に固定されます。

では、固定ではなく画面サイズに応じて横幅いっぱいのレイアウトにしたい場合はどうすればよいでしょうか？

.container-fluidクラスを使用すると、「ウィンドウ幅」に応じて「内部の幅」が変化します。.containerクラスとは違い、ウィンドウ幅の変化に合わせて内部の幅が変化します。

.containerクラスを使用すると横幅に上限がありますが.container-fluidにはなく、画面全幅に要素が広がります。

以下のサンプルコードで.containerと.container-fluidを使用した場合の比較をしています。別ウィンドウで開いて大きい画面で見るとわかりやすいです。