Bootsrtap

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 */
}

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP