2015年8月19日にBootstrapの次期バージョンとなる4のアルファ版がリリースされました。
幾つかの新たなコンポーネントの追加や、数多くのバグフィックスを含んでいますが、クラス名を含めてバージョン3とほとんど変更がないのでマイナーチェンジ版と言っても良いかと思います。バージョン2から3へのアップデートに比べるとサイトへの影響は軽微と思われます。
今回の変更の中で一番と言っても良いくらいの変更は、各種サイジングの基準が今までの「px」単位から、「em」単位に変更されたことです。「em」は、親要素のフォントサイズを基準にサイズを決める形です。そのページの「html」要素が一番上位で、それを基準に親から子へ、子から孫へと継承されます。
※html要素にフォントサイズの指定が無かった場合は、ブラウザの設定値(デフォルト：16px = 1em)が基準として採用されます。
| 接頭クラス名 | 下限 | 上限 |
|---|---|---|
| .col-xs-* | - | 767 px |
| .col-sm-* | 768 px | 991 px |
| .col-md-* | 992 px | 1,199 px |
| .col-lg-* | 1,200 px | - |
| 接頭クラス名 | 下限 | 上限 |
|---|---|---|
| .col-xs-* | - | 543 px |
| .col-sm-* | 544 px | 767 px |
| .col-md-* | 768 px | 991 px |
| .col-lg-* | 992 px | 1,199 px |
| .col-xl-* | 1,200 px | - |
| 接頭クラス名 | 下限 | 上限 |
|---|---|---|
| .col-xs-* | - | 767 px |
| .col-sm-* | 768 px | 991 px |
| .col-md-* | 992 px | 1,199 px |
| .col-lg-* | 1,200 px | - |
| 接頭クラス名 | 下限 | 上限 |
|---|---|---|
| .col-xs-* | - | 475 px |
| .col-sm-* | 476 px | 671 px |
| .col-md-* | 672 px | 867 px |
| .col-lg-* | 868 px | 1,049 px |
| .col-xl-* | 1,050 px | - |
と、なります。今まではどんなブラウザや、どんな設定になっていてもブレイクポイントが固定であったものが、バージョン4以降はブラウザのフォントサイズの設定によって異なってくると言う事だけ注意すれば良いかと思います。