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

自分はいつも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 としたら無事解決しました。

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