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

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

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

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

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

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

/* 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に変更になりました。

display: inline

display: inline-block

display: block

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

印刷の表示・非表示

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

フォントサイズ

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