MENU
コンテンツ再構築中

CSS3: Bootstrap4 グリッドレイアウトの概要メモ

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。
今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。

INDEX

目次

  • グリッドオプション
  • まとめ

グリッドオプション

Extra small (<576px) Small (≥576px) Medium (≥768px) Large(≥992px) Extra large(≥1200px)
Grid behavior 常時水平レイアウト
折りたたまれた状態で開始、ブレークポイントで水平レイアウト
.container の最大幅
None (auto)
540px
720px
960px
1140px
プレフィックスクラス .col- .col-sm- .col-md- .col-lg- .col-xl-
オフセットクラス .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl-
カラム(列)の分割数
12
レイアウトの間隔
30px (各セルの両端 15px 間隔)


まとめ

今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。
みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。

近々 DB を含めたサイトの再構築を行いたいと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX