Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。
今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。
INDEX
目次
- グリッドオプション
- まとめ
グリッドオプション
Extra small (<576px) | Small (≥576px) | Medium (≥768px) | Large(≥992px) | Extra large(≥1200px) | |
---|---|---|---|---|---|
Grid behavior | 常時水平レイアウト | ||||
.container の最大幅 | |||||
プレフィックスクラス | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
オフセットクラス | .offset- |
.offset-sm- |
.offset-md- |
.offset-lg- |
.offset-xl- |
カラム(列)の分割数 | |||||
レイアウトの間隔 |
まとめ
今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。
みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。
近々 DB を含めたサイトの再構築を行いたいと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。