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

2017年10月1日2023年9月30日

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

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

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

Bootstrap4の画面サイズは5段階になりました。名前は1段階ずつずれてxsからsm、smからmd、mdからlg、lgからxlに、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`	表示	表示	表示	非表示

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-noneとd-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がベースになります。

	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