下記はBootstrap4のブレイクポイントとそのクラス名のprefixについての一覧表です。Bootstrapで使用されるprefixはcol-だけでなく、ナビゲーションバーのnavbar-expand-などのクラス名でも使用されます。
どのprefixを付けたら良いか迷ったときは下記の表をご参照下さい。
| ブレイクポイント | なし | 576px～ | 768px～ | 992px～ | 1200px～ |
|---|---|---|---|---|---|
| 端末 | すべて | スマホ | タブレット | PC | PC大画面 |
| prefix | なし | sm | md | lg | xl |
| prefixの由来 | small | medium | large | extra large | |
| 例 | col-列数 | col-sm-列数 | col-md-列数 | col-lg-列数 | col-xl-列数 |
| 説明 | 変化なし | ブレイクポイント以上の幅のとき指定した列数になる | |||
これらのブレイクポイントには、次のようなメディアクエリが効いています。Bootstrap4のスタイルシート以外にもブレイクポイントを使ったコーディングをしたいときは、下記のソースコードをコピーしてお使いください。
CSS
@media (min-width: 576px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 992px) {
/* lg */
}
@media (min-width: 1200px) {
/* xl */
}
