メインコンテンツへスキップ

Bootstrapイメージ Bootstrap4移行ガイド

※2020/8/7：v4.5.2の公開に伴い更新。
2020/6/25：Bootstrap5設置ガイドの開設に伴いサイト移転

PST（米国太平洋時間）2018/1/18にBootstrap v4.0.0安定版が公開されました。これまでのBootstrap3.xから4.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap4の使い方を3.xからの変更箇所を交えて解説しています。

解説はできるだけ最新版（v4.5.2）に対応するよう更新しています。
※Bootstrap 4は、v4.4の公開をもって長期サポート（LTS）に移行すると発表がなされています。

※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。
※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。

Bootstrapとは？

もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。

Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークになる前に、BootstrapはTwitter Blueprintという名で知られていました。数か月の開発期間を経て、Twitter社は最初のHack Week（社内イベント）を開催し、あらゆる技術レベルの開発者が外部の指導を受けずに飛び込んだため、プロジェクトが急激に大きくなりました。公開前の1年以上の間、同社の社内ツール開発のスタイル・ガイドとして使用され、今日も続いています。

当初2011年8月19日(金)に公開され、その後v2とv3による2つの大きな書き換えを含む20回以上の更新をしてきました。Bootstrap2では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。

Bootstrap4では、Sassへの移行とCSSのFlexboxへの移行という2つの重要なアーキテクチャ上の変更を考慮してプロジェクトを書き直しました。我々の意図は、新しいCSSプロパティ、より少ない依存関係、最新のブラウザ間での新技術の導入を推進することで、Web開発コミュニティを少し進化させる手助けをすることです。

Bootstrap公式サイトのHistoryより

Bootstrapは当初米Twitter社から提供されていたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなった。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3の時点でhttp://twitter.github.com/bootstrap/からhttp://getbootstrap.comに移転した。

※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある（3.0、3.1、3.2を除く）。

名称について

プロジェクトとフレームワークは、常にBootstrapと呼ばれなければなりません。前にTwitterは不要で、大文字は省略形であるBのみでsは大文字ではありません。

Bootstrap公式サイトのNameより
○ Bootstrap × BootStrap × Twitter Bootstrap

ライセンスについて

Bootstrapは、コードがMITライセンス、ドキュメントがクリエイティブ・コモンズにより公開され、2011年の公開から現在まで、著作権はBootstrapの執筆者とTwitter社が有している。

 

Bootstrap4の特長

Bootstrap4について

Bootstrapプロジェクトチームは、2014/10/29のv3.3.0公開時のブログ記事でBootstrap4のアルファ版が数週間でできると発表した（アルファ版は2015/8/19に公開された）。
その際に挙げた特長は以下のとおり。

  • CSS開発言語がLessからSassに変更
  • ツールの構築システムがGruntからnpm scriptsに変更
  • グリッドシステムの改善（モバイルデバイスに新しいグリッド層を追加）
  • 任意追加でFlexboxのサポート（Flexboxベースのグリッドシステムとコンポーネントを利用するためCSSを再コンパイル）⇒Flexboxはデフォルトで有効に
  • パネル、サムネイル、囲み枠を廃止し新しいコンポーネントとしてカードを追加
  • Normalize.cssではなくRebootという新しいモジュールの中ですべてのHTMLをリセット
  • ブランドの新しいカスタマイズオプション（gradient transition shadowなどのスタイル装飾をスタイルシートからSass変数に移動）
  • Internet Explorer8とiOS6はサポート外にし、サイズの単位をpxからremとemに切り替え⇒Internet Explorer9もサポート外に追加
  • すべてのJavaScriptプラグインを書き直し（Universal Module Definitionをサポートし、ECMAScript2015（ECMAScript6）に書き直された）
  • ツールチップとポップオーバーの自動配置を改善（Tetherというライブラリを使用⇒Popper.jsに変更）
  • ドキュメントを改善してMarkdown記法で書き直し（CSS、Components、JavaScriptに分かれていたドキュメントをDocumentationに統一し、検索を可能にした）

更新履歴

  • PST 2015/8/19にBootstrap v4.0.0-alphaが公開
  • PST 2015/12/8にBootstrap v4.0.0-alpha.2が公開
  • PST 2016/7/27にBootstrap v4.0.0-alpha.3が公開
  • PST 2016/9/5にBootstrap v4.0.0-alpha.4が公開
  • PST 2016/10/19にBootstrap v4.0.0-alpha.5が公開
  • PST 2017/1/6にBootstrap v4.0.0-alpha.6が公開
  • PST 2017/8/10にBootstrap v4.0.0-betaが公開
  • PST 2017/10/19にBootstrap v4.0.0-beta.2が公開
  • PST 2017/12/28にBootstrap v4.0.0-beta.3が公開
  • PST 2018/1/18にBootstrap v4.0.0安定版が公開
  • PST 2018/4/9にBootstrap v4.1.0が公開
  • PST 2018/4/30にBootstrap v4.1.1が公開
  • PST 2018/7/12にBootstrap v4.1.2が公開
  • PST 2018/7/24にBootstrap v4.1.3が公開
  • PST 2018/12/21にBootstrap v4.2.0を公開したが、直後にnpmで誤りが判明したので、修正してBootstrap v4.2.1を公開し直した。
  • PST 2019/2/11にBootstrap v4.3.0が公開
  • PST 2019/2/13にBootstrap v4.3.1が公開（新しいHTMLサニタイザーを実装することにより、ツールチップとポップオーバープラグインのXSSの脆弱性（CVE-2019-8331）を修正）
  • PST 2019/11/26にBootstrap v4.4.0が公開
  • PST 2019/11/28にBootstrap v4.4.1が公開（v4.4.0で add() と subtract() を導入したが、node-sassでは機能するもののDart SassやRuby Sassで問題が発生するので修正）
  • PST 2020/5/12にBootstrap v4.5.0が公開（当初はパッチ修正版としてv4.4.2を公開予定だったが、v4と今後のv5のギャップを埋めるのに役立つ新機能などを搭載したのでバージョン名を変更した）
  • PST 2020/8/4にBootstrap v4.5.1が公開
  • PST 2020/8/6にBootstrap v4.5.2が公開
  • 次はバグの修正、ドキュメントの改善、v5へのギャップを埋めるためにv4.5.3を公開する予定

Bootstrap4の今後

Bootstrapプロジェクトチームは、2018/12/21のv4.2.1公開時のブログ記事では、Bootstrap5では、コードベースに対する大幅な変更はなく、PostCSSに移行も検討したがv5ではそのままSassを使用し、残骸の除去や既存のコンポーネントを改善し、古いブラウザ（IE10/11）やjQueryとの依存関係を排除することに注力するとし、2019年早々にも計画をプレビューし開発モードに入るとした。

そして、2019/7/24のブログ記事でBootstrap 4は、v4.4の公開をもって長期サポート（LTS）に移行し、今後、新機能は提供されないが、引き続きバグの修正、セキュリティやドキュメントの更新を受け付けていると発表した。
※実際はv4.4.0の公開（2019/11/26）をもってLTSに移行し、移行後6ヶ月（2020/5/26）をめどにメンテナンスモードに移行し、その6ヶ月後（2020/11/26）をめどにサポートが終了される予定。

Bootstrap5は2020/6/16にalpha1版が公開され、その内容はhttps://v5.getbootstrap.comで確認することが可能。

 

Bootstrap3との主な変更点

（v4への移行を一部加筆、Bootstrap v4.5.1時点）

v4.5.xでの変更

v4.5.xでの設定変更一覧
v4.5.2 変更内容の詳細
  • 設定上の変更は見られない
  • v4.4.0のレスポンシブコンテナの追加から最新の行と列の調整まで、グリッドシステムに段階的な変更を加えていくつかの問題は解決したが、新たに動作の不具合が見つかったので修正（一旦削除した make-container-max-widths mixinの復活、.row から flex: 1 0 100% の削除）
v4.5.1 変更内容の詳細
v4.5.0 変更内容の詳細

v4.4.xでの変更

v4.4.xでの設定変更一覧
v4.4.1 変更内容の詳細
v4.4.0 変更内容の詳細

【新設】

【更新】

v4.3.xでの変更

v4.3.xでの設定変更一覧
v4.3.1 変更内容の詳細

【新設・追加】

v4.3.0 変更内容の詳細

【新設・追加】

【更新】

  • Popper.jsのバージョンが1.14.6から1.14.7に

v4.2.xでの変更

v4.2.xでの設定変更一覧
v4.2.1 変更内容の詳細
v4.2.0 変更内容の詳細

【新設・追加】

【更新】

  • メディアオブジェクトの解説がレイアウトからコンポーネントに移動
  • Popper.jsのバージョンが1.14.3から1.14.6に
  • フォーム：div.form-check の部分も div.form-group で囲む
  • インプットグループ：.input-group に .flex-nowrap を追加して折り返し無効が可能に
  • リストグループ：ヘッダありリンクつきリストグループのリンク（a.list-group-item.list-group-item-action）の設定 で .flex-column.align-items-start（アイテムを縦積み左寄せ）が不要に
  • ドロップダウン・リストグループ・ナビゲーション：無効の場合は、.disabled と同じ要素に tabindex="-1" aria-disabled="true" を追加
  • ページ送り：アイコン操作のリスト部分で span.sr-only の設定が不要に
    リンクを無効化する場合、a.page-link に aria-disabled="true" も追加
  • 実例で使われているBootstrapのJSファイルをPopper.jsが含まれているバンドル版に変更

v4.1.xでの変更

v4.1.xでの設定変更一覧
v4.1.3 変更内容の詳細
  • ブラウザとデバイス：npmプロジェクト間で意図しない継承されたブラウザ設定を避けるため、package.json のbrowserslist設定を別のファイル（.browserslistrc）に移動
  • 実例：一部の実例の設定変更
v4.1.2 変更内容の詳細
  • 設定上の変更は見られない
v4.1.1 変更内容の詳細
  • Popper.jsのバージョンが1.14.0から1.14.3に
  • フォーム：カスタムファイル選択で検証スタイルの設定が可能に
  • 画像置換：デフォルトで非表示に

v4.1.0 変更内容の詳細

v4.0.0安定版での変更（Stable changes）

Beta3からv4.0安定版への移行には大きな変更はないが、いくつかの変更はある。

印刷（Printing）

  • 印刷表示ユーティリティの問題を修正。以前は .d-print-* クラスを使用すると、突然他の .d-* クラスを上書きした。それを他の表示ユーティリティとマッチし、そのメディアにのみ適用（@media print）。
  • 他のユーティリティとマッチする利用可能な印刷表示ユーティリティを拡張。Beta3では block, inline-block, inline, none しかなかったが、v4.0安定版には flex, inline-flex, table, table-row, table-cell が追加。
    つまり、.d-print-flex, .d-print-inline-flex, .d-print-table, .d-print-table-row, .d-print-table-cell が追加。
  • @page size を指定する新しい印刷スタイルで、ブラウザ間での印刷プレビューのレンダリングを修正。

変更内容の詳細

v4.0.0安定版での設定変更一覧

v4.0.0-beta.3での変更（Beta 3 changes）

Beta2では、ベータ段階で大きな変化が見られたが、まだBeta3のリリースで対処しなければならないものがいくつか存在する。これらの変更は、Beta2以前のバージョンのBootstrapからBeta3に更新する場合に適用。

その他（Miscellaneous）

  • 未使用の $thumbnail-transition 変数を削除。何も変更しておらず、ちょうど余分なコードだった。
  • npmパッケージには、ソースファイルとdistファイル以外のファイルは含まれていない。それらに頼って、自分で node_modules フォルダを通してスクリプトを実行していたなら、自分のワークフローを適応させること。

フォーム（Forms）

  • カスタムとデフォルトの両方のチェックボックスとラジオを書き換え。現在、両方ともHTML構造（外側の <div> で囲んだ <input> や <label>）と同じレイアウトスタイル（デフォルトの積み重ねスタイル、修飾子クラスの横並びスタイル）を一致させた。これにより、inputの状態に基づいてラベルをスタイルすることができ、disabled 属性（以前は親クラスが必要）のサポートが簡素化され、フォームの検証機能によりうまくサポート。

    その一環として、カスタムフォームのチェックボックスやラジオで複数の背景イメージを管理するためのCSSを変更。以前は、削除した .custom-control-indicator 要素に背景色、グラデーション、SVGアイコンの設定が存在し、背景グラデーションをカスタマイズすると、1つ変更するたびにそのすべてを置き換えていたが、今度は、塗りつぶしとグラデーションの .custom-control-label::before とアイコンを扱う .custom-control-label::after に分けた。

    横並びのカスタムチェックボックスを作成するには、 .custom-control-inline を追加することに。

  • inputベースのボタングループのセレクタを更新。スタイルと動作用の [data-toggle="buttons"] { } の代わりに、JSの動作用だけに data 属性を使い、新しい .btn-group-toggle クラスに依存してスタイル。
    つまり、チェックボックスやラジオボタンの使用では、.btn-group[data-toggle="buttons"] に .btn-group-toggle を追加することに。
  • .col-form-label を改善して .col-form-legend を削除。これにより .col-form-label-sm と .col-form-label-lg は <legend> 要素でも簡単に使用可能に。
  • カスタムファイル入力は、$custom-file-text Sass変数に変更。それはもはや入れ子になったSassマップではなく、現在はSassから生成された唯一の擬似要素であるように、Browse（参照）ボタンを1つの文字列に提供。Choose file（ファイルを選択）テキストは、.custom-file-label から取得されるようになった。

インプットグループ（Input groups）

  • インプットグループのアドオンは、入力コントロールに対する配置を固有のものに。.input-group-prepend と .input-group-append の2つのクラスを新設し、.input-group-addon と .input-group-btn を廃止。明示的にappendまたはprependを使う必要があるが、CSSの多くを単純化。appendまたはprependの中なら、どこにでも存在するようにボタンを配置するが、.input-group-text にテキストを入れて囲む。
  • 複数のテキスト入力設定と、同様に検証スタイルをサポート（ただしグループごとで1つの入力のみが検証可能）。
  • サイズのクラスは、個々のフォーム要素ではなく、親の .input-group に設定。

変更内容の詳細

v4.0.0-beta.3での設定変更一覧

v4.0.0-beta.2での変更（Beta 2 changes）

Beta版では、大きな変化がないことを目指しているが、物事は常に計画どおりに進むとは限らない。以下は、Beta1からBeta2に移行する際の留意点。

変更（Breaking）

  • $badge-color 変数と .badge でその使い方を削除。background-color に基づいて color を選ぶために色のコントラスト関数を使うので、変数は不要になった。
  • CSSのネイティブ grayscale フィルタとの衝突を避けるため、grayscale() 関数の名前を gray() に変更。
  • .table-inverse, .thead-inverse, .thead-default の名前を .*-dark と .*-light に変更して、他の場所で使用されているカラースキームと一致させた。
    つまり、
    .table-inverse ⇒ .table-dark
    .thead-default ⇒ .thead-light
    .thead-inverse ⇒ .thead-dark
    にそれぞれ変更。
  • レスポンステーブルは、各グリッドのブレークポイントごとにクラスを生成するようになった。beta1で使用していた .table-responsive は .table-responsive-md のように変更。必要に応じて .table-responsive や .table-responsive-{sm,md,lg,xl} が使用可能に。
  • 代替パッケージ（例：Yarnやnpm）があるので、パッケージマネージャーとしてのBowerのサポートを廃止。詳細については、bower/bower#2298を参照。
  • Bootstrapは、依然としてjQuery1.9.1以上で対応しているが、バージョン3.xを使用することを推奨。これは、v3.xがサポートされているブラウザはBootstrapでサポートされているものであり、v3.xではいくつかのセキュリティ上の修正があるため。
  • 未使用の .form-control-label クラスを削除。このクラスを使用していたなら、<label> を垂直方向に配置した .col-form-label クラスと重複していた。
  • color-yiq を、color プロパティを含むmixinから値を返す関数に変更。これを使用して任意のCSSプロパティで使用可能に。例えば、color-yiq(#000) の代わりに、color: color-yiq(#000); という色を書くことが可能。

変更内容の詳細

v4.0.0-beta.2での設定変更一覧

ハイライト（Highlights）

  • モーダルに新しく pointer-events を導入。外側の .modal-dialog はカスタムクリック処理用の pointer-events：none イベントを通り抜ける（クリックすると .modal-backdrop を受け付け可能）。そして実際の .modal-content を pointer-events：auto に置き換える。

 

概要（Summary）

ここでは、v3からv4に移行する際に知っておくべき重大な項目を紹介。

サポート対応ブラウザ（Browser support）

  • IE8, IE9をサポート外に。Internet Explorerは10以上、iOSは7以上をサポート。必要とするならv3を使用すること。
    ※実質的にはAutoprefixerをサポートするブラウザ（Chrome45以上、Firefox通常安定版＋ESR版、EdgeHTML12以上、Explorer10以上、iOS9以上、Safari9以上、非公式でAndroid4.4以上とOpera30以上）をサポート。
  • Androidのバージョン5.0 LollipopのブラウザとWebViewは公式サポートに追加、それ以前のAndroidのバージョンのブラウザとWebViewは非公式でのサポートのまま。

全体の変更（Global changes）

  • Flexboxがデフォルトで有効に。一般的にこれはfloatやその他のコンポーネント間の移動を意味する。
  • ソースCSSファイルが、LessからSassに変更。
  • デバイスのビューポートはタイプサイズの影響を受けないため、メディアクエリやグリッドの動作には px が使用されるが、主なCSSの単位は、px から rem に変更。
  • 全体のフォントサイズは、14px から 1rem（ブラウザのデフォルトは16px）に変更。
  • font-family は、デフォルトのWebフォント（Helvetica Neue, Helvetica, Arial）を廃止し、各デバイスのシステムフォントを自動継承するフォントスタックに変更。
  • 5番目のオプション（576px 以下の極小デバイスのアドレス指定）を追加し、それらのクラスから -xs の挿入を削除した。例：.col-6.col-sm-4.col-md-3。
  • SCSS変数（例：enable-gradients: true）を使用して、設定可能なオプションで別のオプションのテーマに置き換え可能。
  • Gruntの代わりに一連のnpmスクリプトを使用するようにシステムを改良。すべてのスクリプトについては package.json を、ローカル開発のニーズについてはプロジェクトのreadmeを参照する。
  • Bootstrapの非レスポンスでの使用はサポートしない（non-responsive.css は提供しない）。
  • オンラインでのカスタマイズを廃止し、より包括的なセットアップドキュメントとカスタマイズされた構築方法を採用。
  • 一般的なCSSのプロパティ値とmargin/paddingのショートカット用に、数多くの新しいユーティリティクラスを追加。
  • 視力の弱い人や色盲のユーザーに配慮して、v3のものよりコントラスト比を高めて鮮やかな色遣いに。
  • テーマカラーとして、Secondary、Light、Darkが追加。

グリッドシステム（Grid system）

  • Flexboxに移動
    • グリッドmixinと定義済みのクラスにFlexboxのサポートが追加。
    • Flexboxの一環として、垂直および水平配置クラスのサポートも含む。
  • 更新されたグリッドクラス名と新しいグリッド層
    • より細かく制御するため768px以下に新しい sm グリッド階層が追加され、xs, sm, md, lg, xl となった。これはまた、すべての階層でレベルが1つ上がることを意味する（v3の .col-md-6 が、v4の .col-lg-6 に該当）。
    • xs グリッドクラスは、設定されたピクセル値でなく min-width：0 スタイルを適用し始めることをより正確に表すために、中間の記号挿入を必要としないように修正。.col-xs-6 は .col-6 になる。その他のすべてのグリッド層には、記号挿入（たとえば、sm）が必要。
  • グリッドサイズ、mixin、および変数が更新
    • グリッド溝にはSassマップが追加され、各ブレークポイントで特定の溝幅を指定可能。
    • グリッドmixinを更新し、make-col-ready プレップmixinと make-col を使用して、個々の列サイズの flex と max-width を設定。
    • 新しいグリッド階層を考慮し、グリッド・システムのメディアクエリのブレークポイントとコンテナ幅を変更して、最大幅は 12 列で割り切れるようにした。
    • グリッドのブレークポイントとコンテナ幅は、いくつかの別々の変数ではなく、Sass map ($grid-breakpoints と $container-max-width) によって処理されるようになった。これらは、@screen-* 変数を完全に置き換え、グリッド階層を完全にカスタマイズすることを可能にした。
    • メディアクエリも変更。メディアクエリ宣言は毎回同じ値の繰り返しではなく、@include media-breakpoint-up/down/only を用いる。つまり @media (min-width: @screen-sm-min) { ... } と書く代わりに @include media-breakpoint-up(sm) { ... } と書くようにした。

コンポーネントの変更（Components）

  • パネル（Panels）、サムネイル（Thumbnails）、囲み枠（Wells）を廃止し、新しくカード（Cards）に統一。
  • Glyphiconsアイコンフォントを廃止。アイコンが必要な場合、いくつかのオプションがある：
  • AffixのjQueryプラグインを廃止。
    • 代わりに position: sticky の使用を推奨。詳細および特定のポリフィルの推奨事項については、See the HTML5 Please entryに記載。提案の1つが、それを実装するために @support ルールを使用すること（例：@supports (position: sticky) { ... }）。
      ※CSSで position: sticky を設定する場合、.sticky-top が使用可能に。
    • Affixを使用して追加のnon-position スタイルを適用していた場合、ポリフィルはその使用をサポートしていない可能性がある。そのような使用オプションの1つが、サードパーティのScrollPos-Stylerライブラリ。
  • 本質的に若干カスタマイズされたボタンということで、ページャー（Pager）を廃止。
  • 子セレクタでなく、より多くの入れ子でないクラスセレクタを使用するように、ほとんど全てのコンポーネントの内部構造を改善。

 

各項目での変更事項（By component）

このリストは、コンポーネントなどのv3.x.xとv4.0.0の間での主な変更点を列挙。

グリッドシステム（Grid system）

  • sm として新しい 576px グリッドブレークポイントが追加。つまり、合計5つの階層（xs, sm, md, lg, xl）に。
  • .col-xs-* は全てのデバイスに対応するため、.col-* に名称変更。
  • Flexboxへの移行によってより簡単なグリッドクラスにするため、レスポンシブ・グリッド修飾子クラスを名称変更。例えば、.col-{breakpoint}-offset-* は、.offset(-{breakpoint})-* に変更（※offsetは4.0.0-beta.1で一旦廃止されたが、4.0.0-beta.2で復活）。
  • 新しいFlexboxで動作する order クラスが追加されたので、pushとpull修飾子クラスは廃止。例えば .col-8.col-push-4 と .col-4.col-pull-8 の代わりに .col-8.order-2 と .col-4.order-1 を使用。
    つまり、.col-{breakpoint}-{push,pull}-* は、.order(-{breakpoint})-* に変更。
    優先的に最初/最後に表示させるために .order(-{breakpoint})-first, .order(-{breakpoint})-last も使用可能。
  • 列の可変幅コンテンツ用に .col(-{breakpoint})-auto が追加。
  • Flexboxのグリッドシステムとコンポーネント用ユーティリティクラスが追加。
  • 左右脇の余白を削除可能にする .no-gutters を新設。

 

Reboot

Rebootは、Bootstrap4の新機能で、CSSをNormalizeをベースに新しく構築したやや独断的なリセットスタイルシート。このファイルに表示されるセレクタは要素のみで使用し、クラスはつけていない。これにより多くのモジュールアプローチのためにリセットスタイルをコンポーネントスタイルから分離。最も重要なリセットは box-sizing: border の変更で、多くの要素、リンクスタイル、多くのフォーム要素のリセットで rem 単位から em 単位への変更も含まれている。

文字の体裁（Typography）

  • すべての .text- ユーティリティを、_utilities.scss ファイルに移動。
  • ページヘッダ（Page header）.page-header を廃止し、見出し表示用に新しく .display-* を新設。
  • .dl-horizontal は廃止。代わりに、<dl> で .row を使用し、その子要素の <dt> と <dd> にグリッド列クラス（およびmixin）を使用。長い項目の場合は、<dt> に .text-truncate を追加して省略させる。
  • 再設計された引用（ブロッククォート）は、そのスタイルを <blockquote> 要素から単一のクラス .blockquote に移動し、枠線のスタイルを廃止。.blockquote-reverse は廃止され、配置には .text-{center,right} クラスを使用。
  • .list-inline（横並びリスト）では、li 要素に .list-inline-item が必要に。

コード（Code）

  • <code> のスタイルは、文字色、文字サイズの変更と背景の設定がなくなり、<a>（リンク）内にあるときには、フォントの大きさと字体以外はリセットされることに。

イメージ（Images）

  • .img-responsive は、.img-fluid に名称変更。
  • .img-rounded は、.rounded に、.img-circle は .rounded-circle にそれぞれ名称変更され、境界ユーティリティに移動。
  • 横の配置ユーティリティクラスなどでイメージの配置が可能に。
  • <picture> 要素に対応して特定の <img> に .img-* が設定可能に。

テーブル（Tables）

  • ほぼすべての > セレクタのインスタンスが削除。つまり、入れ子になったテーブルは自動的に親からスタイルを継承し、セレクタと潜在的なカスタマイズが大幅に簡素化。
  • レスポンシブテーブルは、囲み要素が不要となり、単に <table> に .table-responsive を入れるだけに。
    つまり設定が div.table-responsive > table.table から table.table.table-responsive に変更。    div.table-responsive > table.table の設定のまま。（※v4.0.0-beta.3で元に戻る）
    特定のブレークポイント以下でレスポンシブ表示になるよう .table-responsive-{breakpoint} が追加（従来の .table-responsive は .table-responsive-md に）。
  • .table-condensed は、一貫性のため .table-sm に名称変更。
  • 暗めのテーブル用に新しく .table-dark オプションが追加。
  • 表見出しオプションとして、.thead-light と .thead-dark が追加。
  • 行/セルの背景色のクラスである .** は、.table-** に名称変更。
    つまり、.active, .success, .warning, .danger, .info は、それぞれ .table-active, .table-success, .table-warning, .table-danger, .table-info に名称変更され、.table-secondary, .table-light, .table-dark が追加。
  • 罫線のないテーブル用に .table-borderless が追加【v4.1.0】。

図表（Figures）

  • 画像のキャプション用に、新しく figure.figure, img.figure-img, figcaption.figure-caption を新設。

 

アラート（Alert）

  • 色の種類に .alert-primary, .alert-secondary, .alert-light, .alert-dark が追加
  • アラートをフェードインで閉じる：.alert-dismissible.fade.in ⇒ .alert-dismissible.fade.show に変更。
  • 《閉じるアイコンボタン》⇒《アラート文》の順から《アラート文》⇒《閉じるアイコンボタン》の順に変更

ラベルとバッジ（Labels and badges）

  • .label と .badge を統合して .badge に統一し、<label> 要素から曖昧さを排除し、関連コンポーネントを簡素化。
  • 丸みを帯びた"pill"外観のための修飾子クラスとして .badge-pill を追加。
  • .badge は、リストグループやその他のコンポーネントで自動的に配置しないので、右寄せなどには別途ユーティリティクラスが必要に。
  • .badge-default（v3での.label-default）を .badge-secondary に名称変更して、他の場所で使用されていたコンポーネント修飾子クラスと一致させた。
  • .breadcrumb の子要素に、明示的なクラス .breadcrumb-item が必要に。
  • 設定は、ol.breadcrumb > li ⇒ <nav> > ol.breadcrumb > li.breadcrumb-item に変更。

ボタン（Buttons）

  • .btn-default は、.btn-secondary に名称変更し、.btn-light と .btn-dark が追加。
  • 新しく .btn-outline-*（アウトラインボタン）が追加。
  • .btn-xs を完全に廃止し、.btn-sm はv3の時よりもサイズが小さくなった。
  • button.js jQueryプラグインのステートフルボタン機能は、$().button(string) と $().button('reset') メソッドを含めて完全に廃止。その代わりにカスタムJavaScriptの使用を推奨。それは必要な方法で正確に動作するという利点がある。
    • プラグインの他の機能（チェックボックスボタン、ラジオボタン、切替ボタン）は、引き続きv4でも保持。
  • プラグインによるチェックボックスやラジオボタンの使用では、.btn-group[data-toggle="buttons"] に .btn-group-toggle を追加することに。
  • IE9以上は :disabled をサポートしているので、ボタンの [disabled] は :disabled に変更。しかしIE11でもフィールドセットの無効化はまだバグだらけなので、fieldset[disabled] は依然として必要。

ボタングループ（Button group）

  • Flexboxでコンポーネントを書き直し。
  • .btn-group-justified（等幅サイズ）は廃止。代わりに、.w-100 の要素を囲むラッパーとして <div class="btn-group d-flex" role="group"></div> を使用する。
  • .btn-xs（極小サイズのボタン）の廃止に伴い、.btn-group-xs を完全に廃止。
  • ボタンツールバーのボタングループ間の明示的な間隔を削除。今後はmarginユーティリティクラスを使用する。
  • コンポーネント全体を見直し、デザインとスタイリングを簡素化した。再定義するスタイル、新しいインジケータ、新しいアイコンが少なくなった。
  • すべてのCSSは入れ子にせずに名前が変更され、各クラスには接頭辞に .carousel- が付くことに。
    • カルーセル項目については、.next, .prev, .left, .rightが、それぞれ .carousel-item-next, .carousel-item-prev .carousel-item-left .carousel-item-right に名称変更。
    • .item は、.carousel-item に名称変更。
    • 前/次のコントロールの場合、.carousel-control.right と .carousel-control.left は、.carousel-control-prev と .carousel-control-next になった。つまり、特定の基本クラスが不要に。
    • フェード遷移でスライドをアニメーション化するために .carousel-fade が追加【v4.1.0】。
  • レスポンシブしやすいすべてのスタイルを削除し、必要に応じてユーティリティ（例：特定のビューポートにキャプションを表示）やカスタムスタイルを追加した。
  • カルーセル項目のイメージのイメージ再定義を削除し、ユーティリティに追加した（スライドコントロールのアイコンは、Glyphiconsアイコンではなく、span.carousel-control-prev-icon, span.carousel-control-next-icon で設定）。
  • 新しいマークアップとスタイルを組み込むためにカルーセルの実例を調整。

折り畳みスタイル（Collapse）

  • コンテンツが開いた状態で表示：.collapse.in ⇒ .collapse.show に変更。
  • アコーディオンの設定：v3のパネルからカードでの作成に変更。
  • 親セレクタからすべてのコンポーネント、修飾子などの単一クラスに切り替え。
    設定は、ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item に変更。
  • ドロップダウンスタイルを簡素化して、上向きまたは下向きの矢印がドロップメニューに取り付けられた。
  • ドロップダウンスタイルとマークアップを再構築して、<a> または <button> ベースのドロップダウン項目を簡単に組み込むことが可能。
  • .divider は、.dropdown-divider に名称変更。
  • ドロップダウンの項目に、.dropdown-item が必要に。
  • キャレット（▼）<span class="caret"></span> が不要に。CSSの .dropdown-toggle の ::after で自動的に提供。
  • ドロップアップだけでなく、ドロップライト .dropright 、ドロップレフト .dropleft も可能に。
  • div.dropdown-menu 内に <form> を入れることが可能に。
  • 分離ボタンドロップダウンでドロップダウンキャレットの周りに適切な間隔を設定するため、button.btn.dropdown-toggle に .dropdown-toggle-split が必要に。
  • メニューが開いた状態で表示：.open > .dropdown-menu ⇒ .show > .dropdown-menu に変更。
  • Popper.jsの利用に伴い、オプションが新設。
  • $().dropdown('update'), $().dropdown('dispose') メソッドが追加。
  • リンクの無いドロップダウンメニューアイテムを作成するのに .dropdown-item-text が追加【v4.1.0】。

フォーム（Forms）

  • 要素は、_reboot.scss ファイルにリセット。
  • .control-label は、.col-form-label に名称変更。
  • .input-lg と .input-sm は、それぞれ .form-control-lg と .form-control-sm に名称変更。
  • 簡略化のため .form-group-* を廃止し、代わりに .form-control-* を使用。
  • .help-block を廃止し、ブロックレベルのヘルプテキストの場合は .form-text に変更。横並びのヘルプテキストやその他の柔軟なオプションについては、 .text-muted のようなユーティリティクラスを使用する。
  • チェックボックスとラジオボタンの設定に、.form-check, .form-check-label, .form-check-inline, .form-check-input を追加して機能を大幅に改善。
  • .radio-inline と .checkbox-inline は廃止。
  • .form-check と様々な .form-check-* クラスのために .checkbox と .radio は廃止。
  • グリッドを使ったフォームの整備：
    • .form-horizontal クラスの要件を廃止。
    • .form-group は、mixinを介して .row を適用しなくなった。従って水平グリッドレイアウト（例：<div class="form-group row">）では、.row が必要に。
    • .form-control の垂直中央向けラベルに新しく .col-form-label が追加。
    • ラベルの大きめのサイズ .col-form-label-lg と、小さめのサイズ .col-form-label-sm が追加。
    • グリッドクラスによるコンパクトフォームレイアウト用に新しく .form-row を追加（.row の代わり .form-row を使用）。
  • 検証スタイルは、CSS :invalid と :valid の疑似クラスを介したHTML5フォーム検証機能を使用したスタイルに変更され、.has-warning, .has-error, .has-success, .has-feedback, .form-control-feedback はそれぞれ廃止。
  • 新しくカスタムフォーム（チェックボックス、ラジオ、選択メニュー、およびファイル入力用）のオプション custom-*, custom-control-* を新設。
  • .form-control-static（静的テキスト）は、.form-control-plaintext（読み取り専用プレーンテキスト）に名称変更。
  • レンジ入力（input type="range"）用に .form-control-range が追加。同様にカスタムフォームのレンジ入力として .custom-range が追加【v4.1.0】

ジャンボトロン（Jumbotron）

  • 幅一杯のジャンボトロン用に .jumbotron-fluid が追加。

リストグループ（List groups）

  • Flexboxでコンポーネントを書き直し。
  • a.list-group-item を明示的なクラスの .list-group-item-action に置き換えて、リストグループのリンクとボタンバージョンの項目をスタイル。
    設定は、
    a.list-group-item ⇒ a.list-group-item.list-group-item-action
    button.list-group-item ⇒ button.list-group-item.list-group-item-action
    にそれぞれ変更。
  • 背景色に、Primary.list-group-item-primary、Secondary.list-group-item-secondary、Light.list-group-item-light、Dark.list-group-item-dark が追加。
  • 右側にバッジをとりつける場合は、《項目の内容》⇒《バッジの表示》（span.badge.badge-{theme-color}.badge-pill）の順に記載する必要がある。
  • 空白ユーティリティクラスで代用可能なので、.list-group-item-heading と .list-group-item-text は廃止。
  • 枠なし表示用に .list-group-flush クラスが追加。
  • タブJavaScriptプラグインを使用して、リストグループでタブ切替パネルの作成が可能に。

インプットグループ（Input group）

  • .input-group-prepend（前のアドオン用）と .input-group-append（後のアドオン用）を新設し、.input-group-addon と .input-group-btn は廃止。
  • 片側に複数のアドオンの設定が可能に。
  • 複数のコントロールの設定が可能に。
  • コントロールはテキスト入力だけでなく、カスタム選択メニュー、カスタムファイル入力でも使用可能に。

メディアオブジェクト（Media object）

  • Flexboxと空白ユーティリティクラスで構築することになったので、.media と .media-body のみで設定可能となり、.media-object, .media-heading, .media-left, .media-right, .media-top, .media-middle, .media-bottom, .media-list は廃止。
  • Flexboxでコンポーネントを書き直し。
  • Flexboxへ移行したので、floatは使用しておらず、ヘッダー内の閉じるアイコンの配置が崩れる可能性がある。フローティングコンテンツが最初に来るが、もはやFlexboxはない。その場合は閉じるアイコンを更新してモーダルのタイトルを修正する。
    つまり、モーダルのヘッダの記載順が《閉じるアイコンボタン》⇒《タイトル》の順から《タイトル》⇒《閉じるアイコンボタン》の順に変更。
  • モーダルを垂直方向に中央に配置するため .modal-dialog-centered が追加。
  • remote オプション（外部コンテンツを自動的にロードしてモーダルに挿入するために使用）と、それに対応する loaded.bs.modal イベントは廃止。代わりにクライアント側のテンプレートやデータバインディングフレームワークを使用するか、 jQuery.load を自分で呼び出すことを推奨。
  • Flexboxでコンポーネントを書き直し。
  • ほぼすべての > セレクタを廃止し、入れ子でないクラスを使用した簡単なスタイル設定に。
  • .nav > li > a のようなHTML特有のセレクタの代わりに .nav, .nav-item, .nav-linkといったクラスを使用し、HTMLの柔軟性と拡張性が向上。
    設定は、ul.nav > li > a ⇒ ul.nav > li.nav-item > a.nav-link（または nav.nav > a.nav-link）に変更。
  • Flexユーティリティクラスの使用で、ナビゲーションの右寄せ（.justify-content-end）や中央揃え（.justify-content-center）が可能に
  • 積み重ねナビゲーション（.nav-stacked）は、Flexユーティリティクラスの .flex-column が新設されたので廃止。
  • 均等サイズのナビゲーション（.nav-justified）はv3.3.0でサポート外となったが、v4で復活。
  • 不均等サイズの幅一杯のナビゲーション（.nav-fill）が追加。
  • タブJavaScriptプラグインを使用する際には、ドロップダウンの使用は不可に。
  • タブパネルをフェードインさせる：.tab-pane.fade.in ⇒ .tab-pane.fade.show に変更。

Flexboxでは、配置、レスポンシブ性、カスタマイズのサポートが強化され、ナビゲーションバーが完全に書き直された。

  • レスポンシブ性の高いナビゲーションバーの動作は、必須の .navbar-expand(-{breakpoint}) を介して .navbar クラスに適用され、これまでは変数の変更が少なく、再コンパイルが必要だったナビゲーションバーを折りたたむボタンの位置が選択可能に。
  • .navbar-default は、.navbar-light に、.navbar-inverse は、.navbar-dark に変更。各ナビゲーションバーにはこれらのうちのどちらかが必要だが、これらのクラスは background-color（背景色）を設定しなくなった。代わりに本質的には color（文字色）にしか影響しない。
  • ナビゲーションバーでは、何らかの背景色の設定が必要に。背景色ユーティリティ（.bg-*）から選択するか、上記の .navbar-light, .navbar-dark クラスを設定して配色のカスタマイズをする。
  • Flexboxスタイルを指定すると、ナビゲーションバーでFlexユーティリティが使用可能に。
  • .navbar-toggle は、.navbar-toggler になり、異なるスタイルと内部マークアップ（3つ以上の<span>）はなくなった。
  • もはや必要ではないので、.navbar-form は完全に廃止。代わりに .form-inline を使用して、必要に応じてmarginユーティリティを適用する。
  • ナビゲーションバーには、デフォルトで margin-bottom や border-radius が設定されなくなったので、必要に応じてユーティリティを使用する。
  • ナビゲーションバーを特徴とするすべての実例は、新しいマークアップを含むように更新された。

ページ送り（Pagination）

  • Flexboxでコンポーネントを書き直し。
  • .pagination の子孫の要素に、明示的なクラス（.page-item, .page-link）が必要に。
    設定は、ul.pagination > li > a ⇒ ul.pagination > li.page-item > a.page-link に変更。
  • Flexユーティリティクラスの使用で、v3で廃止となったページ送りの右寄せ（.justify-content-end）や中央揃え（.justify-content-center）が復活。
  • .pager コンポーネントは廃止（ボタンとバッジ（.btn.page-link.badge-pill）で代用的に同じような外観で使用することは可能）。

ポップオーバー（Popovers）

  • viewportオプションは廃止。
  • templateオプションのテンプレートが一部変更。
  • Popper.jsの利用に伴い、offset、fallbackPlacement、boundaryオプションが追加。
  • メソッドで、.popover('destroy') は、.popover('dispose') に名称変更し、.popover('enable'), .popover('disable'), .popover('toggleEnabled'), .popover('update') が追加。

プログレスバー（Progress）

  • HTML5の <progress> 要素を使用して設定するように変更する予定だったが取り止めに（従来同様 div.progress > div.progress-bar で設定）。
  • プログレスバーの太さの設定が可能に。
  • プログレスバーの色の設定には、背景色ユーティリティクラス（.bg-{theme-color}）を使用するので、.progress-bar-{theme-color} は廃止。例えば、 class="progress-bar progress-bar-danger" は、class="progress-bar bg-danger" となる。
  • アニメーションプログレスバーの .active を .progress-bar-animated に変更。

スクロールスパイ（ScrollSpy）

  • ナビゲーション形式だけでなく、リストグループ形式での使用が可能に。

ツールチップ（Tooltips）

  • viewportオプションは廃止。
  • Popper.jsの利用に伴い、offset、fallbackPlacement、boundaryオプションが追加。
  • メソッドで、.tooltip('destroy') は、.tooltip('dispose') に名称変更し、.tooltip('enable'), .tooltip('disable'), .tooltip('toggleEnabled'), .tooltip('update') が追加。

パネル、サムネイル、囲み枠（Panels, thumbnails, and wells）

新しいコンポーネント「カード」ができたので完全に廃止。

パネル（Panels）

  • .panel は、.card に。
  • .panel-default は、廃止され代替もなし。
  • .panel-group は、廃止され代替もなし。（.card-group はあるが、全く異なるもの）
  • .panel-heading は、.card-header に。
  • .panel-title は、.card-header に。目的の外観に応じて、見出しの要素やクラス（例：<h3>, .h3）や太字の要素やクラス（例：<strong>, <b>, .font-weight-bold）でも使用可能。.card-title は、同様な名前が付けられているが、カードのコンテンツのタイトル用で、.panel-title とは外観が異なる。
  • .panel-body は、.card-body に。
  • .panel-footer は、.card-footer に。
  • .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger は、それぞれ .bg-{themecolor}, .text-{themecolor}, .border-{themecolor} の使用に。

サムネイル（Thumbnails）

  • div.thumbnail は、div.card に。
  • div.caption は、div.card-body に。

囲み枠（Wells）

  • .well は、.card.card-body.bg-light に。
  • .well.well-lg は、.card.card-body.bg-light.p-5 に。
  • .well.well-sm は、.card.card-body.bg-light.p-2 に。

 

境界ユーティリティ（Borders）

  • 枠罫線用のクラスとして、.border, .border-0, .border-top, .border-right, .border-bottom, .border-left, .border-top-0, .border-right-0, .border-bottom-0, .border-left-0 を新設。
  • 罫線の色が .border.border-{themecolor} または .border.border-white で設定可能に。
  • .rounded, .rounded-top, .rounded-right, .rounded-bottom, .rounded-left, .rounded-circle, .rounded-0 を新設し、角丸の位置指定が可能に。
  • 画像だけでなく、背景色クラスやボタンなどでも設定可能。

カラーユーティリティ（Colors）

  • 文字色に .text-secondary, .text-dark, .text-light, .text-white が追加。
    .text-muted のリンクスタイルは削除。
    さらに .text-body, .text-black-50, .text-white-50 が追加【v4.1.0】
  • テキストやリンクの色などを親要素から継承する .text-reset が追加【v4.2.0】
  • 背景色に .bg-secondary, .bg-dark, .bg-light, .bg-white と 透過用に .bg-transparentが追加。
  • 背景のグラデーション用に .bg-gradient-{themecolor} が追加。

クリアフィックス（Clearfix）

  • 古いバージョンのブラウザのサポートを中止するように更新。

表示ユーティリティ（Display property）

  • 大量の .hidden-* ユーティリティクラスを新しい表示ユーティリティクラスに変更。例えば、.hidden-sm-up の代わりに .d-sm-none を使用。.hidden-print ユーティリティの名前を変更して、表示ユーティリティの命名規則を使用。詳細はレスポンシブユーティリティの項目に記載。
  • レスポンシブ・ユーティリティの閲覧時の表示/非表示クラスを次のとおりに変更。
    .visible-{breakpoint}-inline ⇒ .d(-{breakpoint})-inline
    .visible-{breakpoint}-block ⇒ .d(-{breakpoint})-block
    .visible-{breakpoint}-inline-block ⇒ .d(-{breakpoint})-inline-block
    .hidden-{breakpoint} ⇒ .d(-{breakpoint})-none
  • .d(-{breakpoint})-none, .d(-{breakpoint})-table, .d(-{breakpoint})-table-cell, .d(-{breakpoint})-table-row, .d(-{breakpoint})-flex, .d(-{breakpoint})-inline-flex を新設。
  • レスポンシブ・ユーティリティの印刷時の表示/非表示クラスを次のとおりに変更。
    .visible-print-block ⇒ .d-print-block
    .visible-print-inline ⇒ .d-print-inline
    .visible-print-inline-block ⇒ .d-print-inline-block
    .hidden-print ⇒ .d-print-none
  • .d-print-flex, .d-print-inline-flex, .d-print-table, .d-print-table-row, .d-print-table-cell を新設。

動画の埋め込み（Embeds）

  • 21:9のアスペクト比：.embed-responsive-21by9 と、1:1のアスペクト比：.embed-responsive-1by1 が追加。

Flexユーティリティ

  • 大量のFlexユーティリティクラスを新設。
    .flex(-{breakpoint})-row, .flex(-{breakpoint})-column, .justify-content(-{breakpoint})-*, .align-items(-{breakpoint})-*, .align-self(-{breakpoint})-*, .flex(-{breakpoint})-fill, .flex(-{breakpoint})-grow-* と .flex(-{breakpoint})-shrink-*, .flex(-{breakpoint})-wrap, .order(-{breakpoint})-*, .align-content(-{breakpoint})-*など。

横の配置ユーティリティ（Float）

  • レスポンシブ配置として .float(-{breakpoint})-{left,right,none} クラスが追加され、.pull-left と .pull-right は、それぞれ .float-left と .float-right に名称変更。

位置ユーティリティ（Position）

  • 要素の位置決めなどに使用する .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky, .fixed-top, .fixed-bottom, .sticky-top を新設。

サイズユーティリティ（Sizing）

  • widthのユーティリティクラスとして、.w-25, .w-50 , .w-75, .w-100, .w-auto を新設。
  • heightのユーティリティクラスとして、.h-25, .h-50 , .h-75, .h-100, .h-auto を新設。
  • max-widthのユーティリティクラスとして、.mw-100 と、max-heightのユーティリティクラスとして、.mh-100 を新設。

空白ユーティリティ（Spacing）

  • margin の設定として、.m{sides}(-{breakpoint})-{size} クラスを新設。
  • padding の設定として、.p{sides}(-{breakpoint})-{size} クラスを新設。
  • .mx-auto が新設されたので、.center-block は廃止。

テキストユーティリティ（Text）

  • レスポンシブな文字の配置として .text(-{breakpoint})-{left,center,right} が追加。
  • 文字の太さとイタリック体の設定として、.font-weight-bold, .font-weight-normal, .font-weight-light, .font-italic を新設。

縦の配置ユーティリティ（Vertical alignment）

  • .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, .align-text-bottom を新設。

可視性ユーティリティ（Visibility）

  • 表示：.show は、.visible または .d-block に変更。
  • 領域自体も非表示：.hidden は、.d-none に変更。

 

ベンダープレフィックスmixin（Vendor prefix mixins）

v3.2.0で廃止されたBootstrap3のベンダープレフィックスmixinは、Bootstrap4で削除。Autoprefixerを使用しているので、もはや必要ない。

以下のmixinを削除：animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

 

レスポンシブ・ユーティリティ（Responsive utilities）

すべての @screen- 変数は、v4.0.0で削除。代わりに、Sass mixinの media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-only() または、Sass mapの $grid-breakpoints を使用する。

レスポンシブ・ユーティリティクラスの整備⇒レスポンシブ・ユーティリティクラスは、明示的な表示ユーティリティを優先して削除。

  • jQueryの $(...).hide() と $(...).show() に干渉するため、.hidden と .show は廃止。代わりに [hidden] 属性に切り替えるか、style="display: none;" や style="display: block;" のようなスタイルを使用する（.show は .visible か .d-block を、.hidden は .d-none を使用）。
  • .hidden- クラスは、名称変更されたプリントユーティリティを除いてすべて廃止。
  • v3の次のクラスは廃止：.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 alphaの次のクラスも廃止：.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down .hidden-xl-up .hidden-xl-down
  • 印刷時のユーティリティは .hidden- や .visible- で始まるのではなく、.d-print- で始まるよう変更。

明示的な .visible-* クラスを使用するのではなく、単にそのスクリーンサイズでは非表示にしないことで要素の表示が可能。1つの .d-*-none クラスと1つの .d-*-block クラスを組み合わせて特定のスクリーンサイズの間だけ要素を表示することが可能（例：.d-none.d-md-block.d-xl-none は、デバイスが中、大のときのみ要素を表示）。

v4のグリッドブレークポイントの変更は、同じ結果を得るために、1段階ブレークポイントを大きくする必要があることに注意。新しいレスポンシブ・ユーティリティクラスは、要素の可視性を1つの連続したビューポートサイズの範囲として表現できず、あまり一般的でない事例では対応しようとしない。そのような場合は代わりにカスタムCSSを使用する必要がある。