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

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

目次

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

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

Bootstrap4の画面サイズは5段階になりました。名前は1段階ずつずれてxsからsmsmからmdmdからlglgからxlに、576px未満が新たに追加されました。

col-xs-*はなくなり、col-*になります。1200px以上サイズはcol-xl-*が新たに追加されました。

V3V4デバイス画面幅クラス(*は数値)container
xsスマートフォン、組み込み端末など576px未満col-*auto
xssmファブレットなど576px以上col-sm-*540px
smmdタブレットなど768px以上col-md-*720px
mdlgノートパソコンなどの省サイズモニタ992px以上col-lg-*960px
lgxlテレビ、デスクトップ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表示表示表示非表示
Bootstrap3
576px未満576px以上768px以上992px以上1200px以上
.d-none非表示非表示非表示非表示非表示
.d-sm-none表示非表示非表示非表示非表示
.d-md-none表示表示非表示非表示非表示
.d-lg-none表示表示表示非表示非表示
.d-xl-none表示表示表示表示非表示
Bootstrap4

display: inline

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

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
Bootstrap4

display: block

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

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

印刷の表示・非表示

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

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

フォントサイズ

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

rempx
h12.5rem40px
h22rem32px
h31.75rem28px
h41.5rem24px
h51.25rem20px
1.125rem18px
h6、デフォルトのフォント1rem16px
0.875rem14px
0.75rem12px
0.625rem10px
Bootstrap4
あわせて読みたい
Bootstrap3のグリッドシステム Bootstrap3のグリッドシステムを利用すればレスポンシブサイトが簡単に作ることができます。 【グリッドシステムって?】 レイアウトを均等に分けてマス目上にレイアウ...
  • URLをコピーしました!
目次