【Bootstrap】containerのレスポンシブ

Bootstrapのcontainerのレスポンシブについての記事です。

containerとは

Bootstrapで用意されているクラス。レスポンシブデザインを手軽に実装するために用意されたもので、グリッドシステム¹を用いている。

containerの種類

（Bootstrapドキュメントより参照）

.container

各ブレークポイントでmax-widthを設定している。

.container-fluid

すべてのブレークポイントでwidth:100%になる。

.container-{breakpoint}

Bootstrap v4.4で新しく追加された。
指定されたブレークポイントまでwidth：100％になる。

最後に

containerで指定されているmax-width以外の値を用いたい際、わざわざレスポンシブ用のcssファイルで値を指定していたので、３つ目の.container-{breakpoint}クラスがありがたいです。