0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Bootstrap】containerのレスポンシブ

Posted at

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

containerとは

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

containerの種類

代替テキスト (Bootstrap[ドキュメント](https://getbootstrap.jp/docs/4.4/layout/overview/)より参照)

.container

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

.container-fluid

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

.container-{breakpoint}

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

最後に

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

  1. 画面幅を12分割し、その内どれくらいの幅を使用するかを指定することで、簡単にレスポンシブデザインを実装することのできるシステムのこと。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?