2017/10/01  Bootstrap4  ,

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

印刷の表示・非表示

.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