Bootstrap3とBootstrap4 グリッドシステムの違い

bootstrap

自分はいつもBootstrapを書く時にここを参考にしていました。

Bootstrap3日本語リファレンス

これをみると

  • モバイル[Extra small devices]:〜767px:col-xs-
  • タブレット[Small devices]:768px〜991px:col-sm-
  • デスクトップ[Medium devices]:792px〜1199px:col-md-
  • デスクトップ[Large devices]:1200px〜:col-lg-

となっているわけです。

で、これを元に760pxの画面でcol-xs-3 col-xs- 6 とか書いてたら全然スタイル効いてなくて、「なんでや!!」ってなりました。

そこでやっとBootstrapの公式ドキュメントを見に行きました。

そしたらありました。違いが。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

つまり(厳密さよりわかりやすさ優先で書くと)

  • モバイル[Extra small devices]:〜576px:col-xs-
  • モバイル[Small devices]:576px〜768px:col-sm-
  • タブレット[Medium devices]:768px〜992px:col-md-
  • デスクトップ[Large devices]:992px〜1200px:col-lg-
  • デスクトップ[Extra large devices]:1200px〜:col-xl-

となっていました。

そりゃ、いくら760pxの画面でcol-xs-3 col-xs- 6 とか書いてもダメなわけです。

Bootstrap4を元にcol-sm-3 col-sm- 6 としたら無事解決しました。

ちゃんと最新情報を参考にしようと思います。