Bootstrap4のグリッドシステム v3からの変更点

Bootstrapのバージョンが4にアップされグリッドシステムも少し変更されました。画面サイズは4から5段階に、Flexboxによるレイアウトになりました。

Bootstrap V3 グリッドシステムの説明はこちら

Bootstrap4のグリッドシステム画面サイズ

Bootstrap4のレイアウトは5段階構成

Bootstrap4の画面サイズは5段階になりました。名前は1段階ずつずれてxssmsmmdmdlglgxlに、576px未満が新たに追加されました。col-xs-*はなくなり、col-*になります。1200px以上サイズはcol-xl-*が新たに追加されました。

V3 V4 デバイス 画面幅 クラス(*は数値) container
xs スマートフォン、組み込み端末など 576px未満 col-* auto
xs sm ファブレットなど 576px以上 col-sm-* 540px
sm md タブレットなど 768px以上 col-md-* 720px
md lg ノートパソコンなどの省サイズモニタ 992px以上 col-lg-* 960px
lg xl テレビ、デスクトップPCなどの大画面モニタ 1200px以上 col-xl-* 1140px
/* Extra small devices: Phones (<768px) */
@media (max-width: 767px) {}

/* Small devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium devices: Desktops (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}
/* Extra small devices: Phones (<576px) */
@media (max-width: 575px) {}

/* Small devices: Phablet (≥576px) */
@media (min-width: 576px) and (max-width: 767px) {}

/* Medium devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Large devices: laptop (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Extra Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}

containerサイズ

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

表示・非表示クラス

表示クラス.visible-*はなくなりました。非表示クラスは.hidden-* から .d-*-noneに変更になりました。

モバイル 768px未満 タブレット 768px以上992px未満 デスクトップ 992px以上1200px未満 デスクトップ 1200px以上
.visible-xs 表示
.visible-sm 表示
.visible-md 表示
.visible-lg 表示
.hidden-xs 表示 表示 表示
.hidden-sm 表示 表示 表示
.hidden-md 表示 表示 表示
.hidden-lg 表示 表示 表示
576px未満 576px以上 768px以上 992px以上 1200px以上
.d-none
.d-sm-none 表示
.d-md-none 表示 表示
.d-lg-none 表示 表示 表示
.d-xl-none 表示 表示 表示 表示

display: inline

576px未満 576px以上 768px以上 992px以上 1200px以上
.d-inline
.d-sm-inline
.d-md-inline
.d-lg-inline
.d-xl-inline

display: inline-block

576px未満 576px以上 768px以上 992px以上 1200px以上
.d-inline-block
.d-sm-inline-block
.d-md-inline-block
.d-lg-inline-block
.d-xl-inline-block

display: block

576px未満 576px以上 768px以上 992px以上 1200px以上
.d-block
.d-sm-block
.d-md-block
.d-lg-block
.d-xl-block

例えば、992px以上のみ表示したい場合、blockコンテンツだと d-noned-lg-block を指定することになります。

印刷の表示・非表示

.visible.hiddenで始まるのではなく.d-print-で始まるように変更されました。

クラス ブラウザ 印刷
.visible-print-block
.visible-print-inline
.visible-print-inline-block
表示
.hidden-print 表示
クラス ブラウザ 印刷
.d-print-block
.d-print-inline
.d-print-inline-block
表示
.d-print-none 表示

フォントサイズ

V4はデフォルトのフォントサイズが14pxから16pxに変わりました。単位も px から rem に変わり1rem=16pxがベースになります。

rem px
h1 2.5rem 40px
h2 2rem 32px
h3 1.75rem 28px
h4 1.5rem 24px
h5 1.25rem 20px
1.125rem 18px
h6、デフォルトのフォント 1rem 16px
0.875rem 14px
0.75rem 12px
0.625rem 10px
2017.10.01  2018.03.06  Bootstrap4  ,

関連記事