Bootstrap4のブレイクポイントとクラス名のprefix

ホーム
Bootsrtap, CSS
Bootstrap4のブレイクポイントとクラス名のprefix

2018.04.22

Bootstrap4のブレイクポイントとクラス名のprefix

下記は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 */
}