GitHubで見る

v5で変更された内容

Migrating to v5

Bootstrapのソースファイル、ドキュメント、コンポーネントの変更点を追跡・確認し、v4からv5への移行を支援します。

項目

v5.3.0

以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。

Helpers

カラーリンクに再び！!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。

Utilities

新しい.d-inline-griddisplayユーティリティが追加されました。

v5.3.0-alpha2

v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。

CSS variables

重複したり、使用されていないルートCSS変数を削除しました。

Color modes

ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモードを使用することができます。
ダークモードテキスト、微妙な背景、微妙な境界線のテーマカラーを生成するためのSassマップが追加されました。
スニペットのサンプルは、マークアップの更新とカスタムスタイルの削減により、ダークモードの準備が整いました。
スクロールバーのようなOSレベルのコントロールを変更するダークモードCSSにcolor-scheme: darkを追加。
新しいSassとCSS変数のおかげで、フォームバリデーションのborder-colorとテキストcolorの状態がダークモードに対応するようになりました。
最近追加されたフォームコントロールの背景CSS変数を削除し、代わりにCSS変数を使用するようにSass変数を割り当て直しました。これにより、カラーモード間のスタイリングがシンプルになり、ダークモードのフォームコントロールが適切に更新されない問題を回避できます。
box-shadowはダークモードで白に反転するのではなく、常に暗いままです。
カラーモード切り替えスクリプトのHTMLとJavaScriptを改善しました。アクティブなSVGを変更するためのセレクタが改善され、ARIA属性によってマークアップがよりアクセシブルになりました。
ライトモードとダークモードで文書コード構文の色などが改善されました。

Typography

ダークモード用の$headings-color-darkまたは--bs-heading-colorに色を設定しなくなりました。コンポーネント内の見出しが間違った色で表示されるいくつかの問題を回避するために、Sass変数をnullに設定し、デフォルトのライトモードで使用しているようなnullチェックを追加しました。

Components

カードにcolorセットが追加され、カラーモード間のレンダリングが改善されました。
ナビゲーションのために、アクティブなナビリンクの下のボーダーをよりシンプルにした新しい.nav-underlineバリアントを追加しました。例についてはドキュメントを参照してください。
ナビに新しい:focus-visibleスタイルが追加され、カスタムボタンのフォーカススタイルによりマッチするようになりました。

Helpers

テキストリンクと一緒にBootstrapアイコンを素早く配置、整列するための新しい.icon-linkヘルパーを追加しました。アイコンリンクは、新しいリンクユーティリティもサポートしています。
デフォルトのoutlineを削除し、カスタムbox-shadowウフォーカスリングを設定できる新しいフォーカスリングヘルパーを追加しました。

Utilities

SassとCSSの変数名${color}-textを${color}-text-emphasisに変更し、関連するユーティリティと一致するようにしました。
カラーリンクに新しい.link-body-emphasisヘルパーを追加しました。これは、カラーモードのレスポンシブ強調色を使って色付きリンクを作成します。
リンクの色の不透明度、アンダーラインのオフセット、アンダーラインの色、アンダーラインの不透明度に関する新しいリンクユーティリティを追加。新しいリンクユーティリティをご覧ください。
CSS変数ベースのborder-widthユーティリティは、そのプロパティを直接設定するように戻されました（v5.2.0以前と同様）。これにより、テーブルを含むネストした要素間での継承の問題が回避されます。
.text-blackおよび.bg-blackユーティリティと一致する新しい.border-blackユーティリティを追加しました。
Deprecated .text-mutedユーティリティと$text-mutedSass変数を非推奨としました。.text-body-secondaryと$body-secondary-colorに置き換えられました。

Docs

ドキュメントの設定に応じて、“例"が適切なカラーモードで表示されるようになりました。各例には個別のカラーモードピッカーがあります。
ライブToastデモ用のJavaScriptを改良しました。
サンプルページの上部にtwbs/examplesリポジトリのコンテンツを追加しました。

Tooling

ユーティリティAPIやその他のカスタマイズをテストするために、TrueによるSCSSテストを追加しました。
bootstrap-npm-starterプロジェクトのインスタンスを、より新しく完全なtwbs/examplesリポジトリに置き換えました。

完全な変更点リストはGitHubのv5.3.0-alpha2プロジェクトを参照してください。

v5.3.0-alpha1

カラーモードについて!

詳しくは、新しいカラーモードのドキュメントをお読みください。

ライト（デフォルト）とダークのカラーモードをグローバルにサポートします。カラーモードは、:root要素、ラッパー・クラスによる要素やコンポーネントのグループ、またはdata-bs-theme="light|dark"によるコンポーネントに直接、グローバルに設定できます。また、新しいcolor-mode()mixinも含まれており、好みに応じてdata-bs-themeセレクタやメディアクエリでルールセットを出力することができます。

非推奨カラーモードはコンポーネントのダークバリアントを置き換えるため、.btn-close-white、.carousel-dark、.dropdown-menu-dark、.navbar-darkは非推奨となりました。
新しい拡張カラーシステム。新しいテーマカラー（ただし$theme-colorsにはない））を追加し、colorとbackground-colorに新しい2次色、3次色、強調色を加えた、よりニュアンスのあるシステム全体のカラーパレットになりました。これらの新しい色は、Sass変数、CSS変数、およびユーティリティとして利用可能です。
また、テーマカラーのSass変数、CSS変数、ユーティリティを拡張し、テキスト強調、微妙な背景色、微妙なボーダー色などを追加しました。これらは、Sass変数、CSS変数、ユーティリティとして利用できます。

ダークモード特有のオーバーライドを格納するための新しい_variables-dark.scssスタイルシートを追加しました。このスタイルシートは、インポートスタックで既存の_variables.scssファイルの直後にインポートする必要があります。

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

CSS変数

ブレークポイント用のCSS変数を復元します。ただし、メディアクエリではサポートされていないため、使用しません。しかし、これらはJS特有の文脈で役に立つことがあります。
カラーモードのアップデートにより、新しいSass CSS変数のsecondaryおよびtertiaryのテキストと背景色、そしてテーマカラーの{color}-bg-subtle、{color}-border-subtle、{color}-textのユーティリティが追加されました。これらの新しい色は、SassとCSS変数（カラーマップではありません）を通じて利用可能で、lightやdarkといった複数のカラーモードでのカスタマイズを容易にすることを明確な目的としています。
アラート、.btn-close、.offcanvasの追加変数を追加しました。
変数--bs-heading-colorが更新され、ダークモードに対応して戻ってきました。まず、CSS変数を出力する前に、関連するSass変数$headings-colorにnull値があるかどうかを確認するようになりました。これにより、デフォルトでは、コンパイルしたCSSにこの変数は存在しません。次に、CSS変数にフォールバック値としてinheritを使用し、元の動作を維持しつつ、オーバーライドも可能にしました。
リンクのスタイリングcolorにCSS変数を使用するように変換し、text-decorationは使用しないようにしました。色は--bs-link-color-rgbと--bs-link-opacityで rgba()カラーとして設定されるようになり、半透明を簡単にカスタマイズできるようになりました。a:hover擬似クラスでは、明示的にcolorプロパティを設定する代わりに --bs-link-color-rgbをオーバーライドするようになりました。
--bs-border-widthがより多くのコンポーネントで使用されるようになり、デフォルトのグローバルなスタイリングをよりコントロールできるようになりました。
box-shadowのルートCSS変数として、--bs-box-shadow、--bs-box-shadow-sm、--bs-box-shadow-lg、--bs-box-shadow-insetを新たに追加しました。

コンポーネント

Alert

アラートバリアントがCSS変数でスタイリングされるようになりました。
非推奨 .alert-variant() mixinは非推奨になりました。現在は、Sassループを直接使用して、各バリアントのコンポーネントのデフォルトCSS変数を変更します。

List group

リストグループのアイテムバリアントが、CSS変数でスタイリングされるようになりました。
非推奨 .list-group-variant() mixinは非推奨になりました。現在は、Sassループを直接使用して、各バリアントのコンポーネントのデフォルトCSS変数を変更します。

Dropdowns

Deprecated The .dropdown-menu-dark class has been deprecated and replaced with data-bs-theme="dark" on the dropdown or any parent element. See the docs for an example.

Close button

非推奨 .btn-close-whiteクラスは非推奨となり、クローズボタンまたは親要素の data-bs-theme="dark"に置き換えられました。例については、ドキュメントを参照してください。

非推奨 .navbar-darkクラスは非推奨となり、ナビバーや親要素のdata-bs-theme="dark"で置き換えられました。更新された例については、ドキュメントをご覧ください。

Progress bars

v5.3.0でプログレスバーのマークアップが更新されました。roleと様々なaria-属性が内側の.progress-bar要素に配置されていたため、一部のスクリーン・リーダーはゼロ値のプログレス・バーを告知していませんでした。現在、role="progressbar"と関連するaria-*属性は外側の.progress要素にあり、.progress-barは純粋にバーとオプションのラベルの視覚表現のために残されています。

すべてのスクリーンリーダーとの互換性を高めるために、新しいマークアップを採用することをお勧めしますが、従来のプログレスバー構造はこれまで通り機能することに注意してください。

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

また、複数のプログレスバーを1つのスタック型プログレスバーとしてより論理的にラップするための新しい.progress-stackedクラスも導入されました。

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Forms

.form-controlが、カラーモードをサポートするためのCSS変数でスタイルされるようになりました。これには、デフォルトと無効のフォームコントロールの背景のための2つの新しいルートCSS変数の追加も含まれます。
.form-checkと.form-switchコンポーネントは、background-imageを設定するためのCSS変数で構築されるようになりました。この使い方は他のコンポーネントと異なり、各コンポーネントのフォーカス、アクティブなどの状態はベースクラスで設定されません。その代わりに、各コンポーネントの状態は1つの変数（例：--bs-form-switch-bg）をオーバーライドします。
Floating form labels now have a background-color to fix support for <textarea> elements. Additional changes have been made to also support disabled states and more.
WebKitベースのブラウザで、日付と時刻の入力が表示されるのを修正しました。

ユーティリティ

非推奨 v6では.text-mutedは.text-body-secondaryに置き換えられる予定です。

拡張テーマカラーと変数の追加に伴い、.text-muted変数とユーティリティはv5.3.0で非推奨になりました。そのデフォルト値は、カラーモードをよりよくサポートするために、新しいCSS変数 --bs-secondary-colorに再割り当てされています。v6.0.0では削除される予定です。
.overflow-x、.overflow-y、およびいくつかの.object-fit-*ユーティリティを新たに追加しました。object-fitプロパティは、<img>や<video>がそのコンテナに合うようにサイズを変更する方法を指定するために使用され、サイズを変更できるフィル/フィット画像にbackground-imageを使う代わりにレスポンシブな方法を提供します。
新しい.fw-mediumユーティリティを追加しました。
z-indexのための新しい.z-*ユーティリティを追加しました。
ボックスシャドウユーティリティ（およびSass変数）がダークモード用に更新されました。これらは、rgba()の色値を生成するために--bs-body-color-rgbを使用するようになり、指定された前景色に基づくカラーモードに簡単に適応することができるようになりました。

変更点の詳細については、GitHubのv5.3.0プロジェクトを参照してください。

v5.2.0

デザインも一新

Bootstrap v5.2.0では、ボタンやフォームコントロールのborder-radiusの値を改良するなど、プロジェクト全体のコンポーネントやプロパティに微妙なデザインのアップデートが施されています。また、ドキュメントも更新され、新しいホームページ、サイドバーのセクションを折りたたまないシンプルなドキュメントレイアウト、Bootstrapアイコンのより目立つ例などが追加されています。

その他のCSS変数

すべてのコンポーネントを更新し、CSS変数を使用するようにしました。Sassは依然としてすべてを支えていますが、各コンポーネントは、コンポーネントのベースクラス（例：.btn）にCSS変数を含めるように更新され、Bootstrapをよりリアルタイムにカスタマイズすることができるようになりました。以降のリリースでも、レイアウト、フォーム、ヘルパー、ユーティリティにCSS変数の利用を拡大していく予定です。各コンポーネントのCSS変数については、それぞれのドキュメントページで詳しく説明しています。

CSS変数の使い方は、Bootstrap 6まで、やや不完全です。私たちは、これらを全面的に実装したいのですが、変更を壊してしまう危険性があります。例えば、私たちのソースコードで $alert-border-width: var(--bs-border-width)を設定すると、何らかの理由で$alert-border-width * 2を行っていた場合、あなた自身のコードで潜在的なSassを破壊します。

そのため、可能な限り、より多くのCSS変数を推奨していきますが、v5では実装が若干制限される可能性があることをご承知おきください。

新しい`_maps.scss`

Bootstrap v5.2.0では、新しいSassファイルとして_maps.scssが導入されました。これは、_variables.scssからいくつかのSassマップを引き出し、オリジナルのマップの更新が、それを拡張する二次マップに適用されないという問題を修正します。例えば、$theme-colorsの更新は、$theme-colorsに依存する他のテーママップに適用されず、重要なカスタマイズ・ワークフローを壊していました。要するに、Sassには、一度デフォルトの変数やマップを 使用する と、それを更新することができないという制限があるのです。CSS変数が他のCSS変数を構成するために使用される場合にも、同様の欠点があります。

Bootstrapの変数のカスタマイズが@import "functions"の後に来て、@import "variables"と残りのインポートスタックの前に来る必要があるのは、このためです。同じことがSassマップにも当てはまり、使用される前にデフォルトをオーバーライドする必要があります。以下のマップは、新しい_maps.scssに移動されました：

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Bootstrap CSSのカスタムビルドは、マップのインポートを分離して、次のように表示されます。

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

新規ユーティリティ

font-weightユーティリティを拡張し、セミボールドフォント用の.fw-semiboldを追加しました。
border-radiusユーティリティを拡張し、2つの新しいサイズ、.rounded-4と.rounded-5を追加し、より多くのオプションを追加しました。

追加変更点

新しい$enable-container-classesオプションが導入されました。—これにより、実験的なCSS Gridレイアウトを選択した場合でも、このオプションがfalseに設定されていない限り、.container-*クラスはコンパイルされるようになりました。また、コンテナのガター値も保持されるようになりました。
Offcanvas コンポーネントにレスポンシブ対応のバリエーションが追加されました。オリジナルの.offcanvasクラスは変更されず、すべてのビューポートでコンテンツを非表示にします。レスポンシブにするには、この.offcanvasクラスを任意の.offcanvas-{sm|md|lg|xl|xxl}クラスに変更します。
太いテーブルの仕切りがオプトインになりました。—テーブルグループ間の太くて上書きしにくいボーダーを削除し、適用できるオプションクラス、.table-group-dividerに移動しました。例については、テーブルのドキュメントを参照してください。
ScrollspyはIntersection Observer APIを使用するように書き直され、相対親ラッパーが不要になり、offset設定などが非推奨になりました。Scrollspyの実装がより正確で一貫性のあるナビハイライトになることを期待します。
ポップオーバーとツールチップにCSS変数が使えるようになりました。いくつかのCSS変数は、変数の数を減らすために、Sassの対応するものから更新されました。その結果、このリリースでは、3つの変数が非推奨となりました：$popover-arrow-color、$popover-arrow-outer-color、$tooltip-arrow-colorです。
新しい.text-bg-{color}ヘルパーを追加しました。.text-*と.bg-*を個別に設定するユーティリティの代わりに、.text-bg-*ヘルパーを使用して、対照的な前景colorを持つbackground-colorを設定できるようになりました。
ラベルと関連するチェックボックス/ラジオの順序を反転させる.form-check-reverseモディファイアを追加した。
新しい.table-striped-columnsクラスによって、テーブルにストライプカラムのサポートを追加しました。

変更点の詳細については、GitHubのv5.2.0プロジェクトを参照してください。

v5.1.0

CSS Gridレイアウトの実験的なサポートを追加しました。—これは進行中の作業であり、まだ実運用には適していませんが、Sassを介して新機能を選択することができます。有効にするには、$enable-grid-classes: falseを設定してデフォルトのグリッドを無効にし、$enable-cssgrid: trueを設定してCSSグリッドを有効にしてください。
オフキャンバスをサポートするナバーが更新されました。—レスポンシブな.navbar-expand-*クラスといくつかのoffcanvasマークアップを使用して、任意のナビゲーションバーにオフキャンバスドロワーを追加します。
新しいプレースホルダーコンポーネントを追加しました。。—サイトやアプリで何かがまだロード中であることを示すために、実際のコンテンツの代わりに一時的なブロックを提供するための方法です。
Collapseプラグインが水平方向の折りたたみに対応しました。—.collapseに.collapse-horizontalを追加することで、高さではなくwidthを折りたたむことができます。min-heightまたはheightを設定することで、ブラウザの再描画を回避することができます。
新しいスタックと垂直ルールヘルパーを追加しました。—複数のフレックスボックスのプロパティをすばやく適用して、スタックを使ったカスタムレイアウトをすばやく作成できます。水平スタック（.hstack）と垂直スタック（.vstack）から選択できます。新しい.vrヘルパーを使用して、<hr>要素に似た垂直方向の仕切りを追加できます。
グローバルな:rootCSS 変数を新たに追加しました。—<body>のスタイルを制御するための新しいCSS変数を:rootレベルにいくつか追加しました。ユーティリティやコンポーネントを含め、さらに多くの機能が追加される予定ですが、現時点では、カスタマイズのセクションでCSS変数についてお読みください。
色と背景のユーティリティをCSS変数を使用するようにオーバーホールし、新しいテキストの不透明度と背景の不透明度ユーティリティを追加しました。— .text-*と.bg-*ユーティリティは、CSS変数とrgba()カラー値で構築されるようになり、新しい不透明度ユーティリティでどのユーティリティも簡単にカスタマイズできるようになりました。
私たちのコンポーネントをカスタマイズする方法を示すために基づいて新しいスニペットの例を追加しました。—新しいスニペット例で、カスタマイズされたコンポーネントやその他の一般的なデザインパターンをすぐに使えるようにしましょう。フッター、ドロップダウン、リストグループ、モーダルが含まれます。
Popperが単独で処理するため、ポップオーバーとツールチップは未使用のポジショニングスタイルを削除しました。$tooltip-marginは非推奨となり、nullに設定されました。

より詳しい情報をお望みですか？v5.1.0のブログポストをお読みください。

こんにちは！ Bootstrap 5の最初のメジャーリリースであるv5.0.0の変更点は、以下のとおりです。これらは、上に示した追加の変更点を反映していません。

依存関係

jQueryを削除しました。
Popper v1.xからPopper v2.xにアップグレードしました。
Libsassが非推奨となったため、SassコンパイラをDart Sassに置き換えた。
ドキュメントを構築のため、JekyllからHugoに移行しました。

ブラウザー対応

Internet Explorer 10および11を削除しました。
Microsoft Edge < 16 (レガシーエッジ) を削除しました。
Firefox < 60対応終了。
Safari < 12対応終了。
iOS Safari < 12対応終了。
Chrome < 60対応終了。

ドキュメントの変更

ホームページ、ドキュメントレイアウト、フッターのデザインを変更。
新しいParcelガイドを追加しました。
v4のテーマページを置き換える新しいカスタムセクションが追加され、Sass、グローバル構成オプション、配色、CSS変数などの新しい詳細を提供します。
すべてのフォームのドキュメントを新しいフォームセクションに再編成し、コンテンツをよりフォーカスされたページに分割しました。
同様にレイアウトのセクションも更新し、グリッドの内容をより明確にした。
“Navs"コンポーネントページを"Navs & Tabs"に変更。
“Checks"のページを"Checks & radios"に変更。
サイトとドキュメントバージョンをより簡単に移動できるようにナビゲーションバーを再設計し、新しいサブナビゲーションを追加しました。
検索フィールドに新しいキーボードショートカットを追加: Ctrl + /.

Sass

重複した値をより簡単に削除できるように、デフォルトのSassマップのマージを捨てました。これで、$theme-colorsなどのSassマップのすべての値を定義する必要があることに注意してください。Sassマップを扱う方法を確認してください。
Breaking color-yiq()関数および関連する変数の名前をcolor-contrast()に変更。#30168を参照。
- $yiq-contrasted-thresholdが $min-contrast-ratioに名前が変更されます。
- $yiq-text-darkと$yiq-text-lightはそれぞれ$color-contrast-darkと$color-contrast-lightに名前が変更されます。
Breaking より論理的なアプローチのために、Media query mixinsパラメータが変更されました。
- media-breakpoint-down()は次のブレークポイントの代わりにブレークポイント自体を使用します(例えば、media-breakpoint-down(md)の代わりにmedia-breakpoint-down(lg)はlgより小さいビューポートを対象としています)。
- 同様に、media-breakpoint-between()の2番目のパラメータも、次のブレークポイントの代わりにブレークポイント自体を使用します（例えば、media-breakpoint-between(sm, md)の代わりにmedia-between(sm, lg)は、smとlgの間のビューポートを対象としています）。
Breaking 印刷スタイルと$enable-print-styles変数を削除しました。印刷表示クラスはまだ存在します。#28339を参照してください。
Breaking 変数使用のためにcolor()、theme-color()、gray()関数を削除しました。#29083を参考してください。
Breaking theme-color-level()関数の名前をcolor-level()に変更し、今$theme-color色のみを許可する代わりに、すべての色を許可します。#29083を参考してください。注意：color-level()は、その後v5.0.0-alpha3で削除されました。
Breaking 簡潔化のため、$enable-prefers-reduced-motion-media-queryと$enable-pointer-cursor-for-buttonsの名前を$enable-reduced-motionと$enable-button-pointersに変更しました。
Breaking bg-gradient-variant()のmixinを削除しました。要素にグラデーションを追加するには、生成された.bg-gradient-*クラスの代わりに.bg-gradientクラスを使用してください。
Breaking 以前に使用されなくなったmixinを削除する:
- hover、hover-focus、plain-hover-focus、hover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide() (また、関連ユーティリティクラスの.text-hideも削除しました。)
- visibility()
- form-control-focus()
Breaking Sassの独自カラースケーリング関数との衝突を避けるためscale-color()関数の名前をshift-color()に変更しました。
box-shadow mixinsがnull値を受け入れ、複数の引数からnoneを取り除く。 #30394を参照してください。
border-radius() mixinにデフォルト値が追加されました。

カラーシステム

color-level()と$theme-color-intervalで動作していたカラーシステムは削除され、新しいカラーシステムが採用されました。コードベースのlighten()およびdarken()関数はすべて、tint-color()およびshade-color()に置き換えられました。これらの関数は、色の明度を一定量変更する代わりに、白または黒のいずれかと混合します。shift-color()は、weight パラメータが正か負かに応じて、色を濃くしたり薄くしたりします。詳細は#30622を参照ください。
すべての色に新しい色相と色合いを追加し、基本色ごとに9つの個別の色を新しいSass変数として提供します。
カラーコントラストを改善しました。カラーコントラスト比を3:1から4.5:1に上方修正し、青、緑、ターコイズ、ピンクの色を更新してWCAG 2.1 AAコントラストを保証します。また、カラーコントラストの色を$gray-900から$blackに変更しました。
私たちのカラーシステムをサポートするために、私たちは色を適切に混ぜるための新しいカスタムtint-color()とshade-color()関数を追加しました。

グリッド更新

新たなブレークポイント! 1400px以上の新しいxxlブレークポイントが追加されました。他のすべてのブレークポイントは変更されていません。
ガターが改善されました。 ガターはレム単位で設定されるようになり、v4より狭くなりました（1.5rem、つまり30pxから約24pxに減少）。グリッドシステムのガターと間隔ユーティリティの間隔が一致するようになりました。
- 新しいガタークラス(.g-*、.gx-*、.gy-*)が追加し、水平/垂直ガター、水平ガター、垂直ガターをコントロールできるようにした。
- Breaking 新しいガターユーティリティと一致するように.no-guttersの名前を.g-0に変更しました。
カラムにはposition: relativeが適用されなくなったので、その動作を復元するには、いくつかの要素に..position-relativeを追加する必要があるかもしれません。
Breaking 使用されないことが多かったいくつかの.order-*クラスを削除しました。現在では、.order-1から.order-5までしか提供していません。
Breaking .mediaコンポーネントはユーティリティで簡単に複製できるため、削除しました。例については#28265とフレックスユーティリティのページを参照してください。
Breaking bootstrap-grid.cssは、グローバルなボックスサイズをリセットする代わりに、カラムにのみbox-sizing: border-boxを適用するようになりました。こうすることで、グリッド・スタイルをより多くの場所で干渉されずに使うことができます。
$enable-grid-classesはコンテナクラスの生成を無効にしなくなりました。#29146を参照。
make-colmixinが指定されたサイズなしで同じ列をデフォルトで使うように更新されました。

Content, Reboot, etc

RFSがデフォルトで有効になりました。 font-size() mixinを使用している見出しは、ビューポートに合わせてfont-sizeが自動的に調整されます。この機能はv4ではオプトインでした。
Breaking $display-*変数と$display-font-sizesSassマップを置き換えるために、ディスプレイのタイポグラフィをオーバーホールしました。また、個々の$display-*-weight変数を削除し、単一の$display-font-weightとfont-sizeを調整しました。
2つの新しい.display-*ヘッディングサイズ、.display-5と.display-6を追加しました。
リンクは、特定のコンポーネントの一部でない限り、デフォルトで下線が引かれます（ホバー時だけでなく）。
テーブルを新しくデザインしてスタイルを更新し、CSS変数を使用して再作成してスタイルをよりよく制御することができます。
Breaking ネストされたテーブルはもうスタイルを継承しません。
Breaking .thead-lightと.thead-darkが廃止され、すべてのテーブル要素（thead、tbody、tfoot、tr、th、td）に使用できる.table-*バリアントクラスが採用されました。
Breaking table-row-variant()mixinの名前がtable-variant()に変更され、$color(色名) と$value(色コード) の2つのパラメータのみを受け付けるようになりました。ボーダーカラーとアクセントカラーは、テーブル要素変数に基づいて自動的に計算されます。
テーブルセルのパディング変数を-yと-xで分割します。
Breaking .pre-scrollableクラスを削除しました。参照 #29135
Breaking .text-*ユーティリティは、リンクにホバーとフォーカスの状態を追加しなくなりました。代わりに.link-*ヘルパークラスを使用できます。参照 #29267
Breaking .text-justifyクラスを削除しました。参照 #29793
Breaking <hr>要素はsize属性をより良くサポートするためにborderの代わりにheightを使うようになりました。これにより、パディング・ユーティリティを使用して、より太い仕切りを作成できるようになりました（例：<hr class="py-1">）。
<ul>と<ol>要素のデフォルトの水平余白padding-leftをブラウザのデフォルト値40pxから2remにリセットします。
scroll-behavior: smoothをグローバルに適用する$enable-smooth-scrollを追加しました（ただし、ユーザーがprefers-reduced-motionメディアクエリを介して縮小された動作を要求する場合を除く）。#31877参照

RTL

水平方向に関連する変数、ユーティリティ、mixinはすべて、フレックスボックスのレイアウトで見られるような論理的な属性 (例えば、leftとrightではなくstartとend) を使用するように名前が変更されました。

フォーム

新しいフローティングフォームを追加しました！ フローティングラベルのサンプルを完全にサポートされたフォームコンポーネントに昇格させました。新しいフローティング・ラベルのページをご覧ください。
Breaking デフォルトとカスタムフォーム要素が統合されました。v4では、デフォルトとカスタムクラスがあったCheckboxes、radios、selects、その他の入力が統合されました。これで、ほぼすべてのフォーム要素が完全にカスタマイズされ、ほとんどの場合、カスタムHTMLは必要ありません。
- .custom-control.custom-checkboxは.form-checkになりました。
- .custom-control.custom-custom-radioは.form-checkになりました。
- .custom-control.custom-switchは.form-check.form-switchになりました。
- .custom-selectは.form-selectになりました。
- .custom-fileと.form-fileは、.form-controlの上のカスタムスタイルに置き換えられました。.custom-rangeは.form-rangeになりました。
- .custom-rangeは.form-rangeになりました。
- ネイティブの.form-control-fileと..form-control-rangeが削除されました。
Breaking .input-group-appendと.input-group-prependを削除しました。ボタンと.input-group-textを入力グループの直接の子として追加するだけでよくなりました。
長年の問題であった検証フィードバックがある入力グループのボーダー半径が欠落するバグが、検証がある入力グループに.has-validationクラスを追加して最終的に修正されました。
Breaking グリッド・システム用のフォーム固有のレイアウト・クラスを廃止しました。.form-group、.form-row、.form-inline の代わりに、私たちのグリッドとユーティリティを使用してください。
Breaking フォームラベルに.form-labelが必要になりました。
Breaking .form-textはもうdisplayを設定しないので、HTML要素だけを変更して、インラインまたはブロックのヘルプテキストを自由に作成することができます。
フォームコントロールは、可能な限り固定heightを使用しなくなり、代わりにカスタマイズ性と他のコンポーネントとの互換性を向上させるためにmin-heightを使用するようになりました。
バリデーションアイコンがmultipleの<select>に適用されなくなりました。
入力グループスタイルを含めてソースSassファイルをscss/forms/で再配置しました。

コンポーネント

アラート、パンくず、カード、ドロップダウン、リストグループ、モーダル、ポップオーバー、ツールチップのpadding値を $spacer変数に統一しました。#30564を参照してください.。

Accordion

新しいアコーディオンコンポーネントを追加しました。

Alerts

アラートにアイコンの例が追加されました。
各アラート内の<hr>はすでにcurrentColorを使用しているため、カスタムスタイルを削除しました。

Badges

Breaking 背景ユーティリティ用のすべての.badge-*カラークラスを削除しました（例：.badge-primaryの代わりに.bg-primaryを使用）。
Breaking 削除された.badge-pillの代わりに.rounded-pillユーティリティを使用してください。
Breaking <a>と<button>要素のホバーとフォーカスのスタイルを削除しました。
バッジのデフォルトの余白を.25em/.5emから.35em/.65emに増やしました。

Breadcrumbs

padding、background-color、border-radiusを削除し、パンくずのデフォルトの外観をシンプルにした。
CSSのカスタムプロパティ--bs-breadcrumb-dividerを追加し、CSSを再コンパイルすることなく簡単にカスタマイズできるようにした。

Buttons

Breaking チェックボックスやラジオなどのトグルボタンは、JavaScriptを必要としなくなり、新しいマークアップが追加されました。<input>に.btn-checkを追加し、<label>の任意の.btnクラスと組み合わせます。#30650を参照してください。このドキュメントはボタンのページから新しいフォームのセクションに移動しました。
Breaking ユーティリティの.btn-blockを廃止。.btnに.btn-blockを使用する代わりに、ボタンを.d-gridと.gap-*ユーティリティで囲み、必要に応じて間隔をあけてください。レスポンシブ・クラスに切り替えると、さらにコントロールしやすくなります。いくつかの例についてはドキュメントを読んでください。
button-variant()およびbutton-outline-variant()mixinを更新し、追加パラメータをサポートしました。
ホバリングとアクティブ状態のコントラストを高めるためにボタンを更新しました。
無効化されたボタンはpointer-events: none;を持つようになりました。

Card

Breaking .card-deckを廃止し、グリッドを採用しました。カードをカラムクラスでラップし、親となる.row-cols-*コンテナを追加することで、カードデッキを再現できます（ただし、レスポンシブな配置をより制御できます）。
Breaking Masonryのために.card-columnsを削除しました。#28922を参照してください。
Breaking .cardベースのアコーディオンを新しいアコーディオン・コンポーネントに置き換えました。

Carousel

暗いテキスト、コントロール、インジケーター用の新しい.carousel-darkバリアントが追加されました（明るい背景に適しています）。
カルーセルコントロールのシェブロンアイコンをBootstrap Iconsの新しいSVGに置き換えました。

Close button

Breaking .closeの名前を.btn-closeに変更して、あまり一般的でない名前を使用しました。
閉じるボタンは、HTMLの×の代わりにbackground-image（埋め込みSVG）を使用するようになり、マークアップに触れることなく簡単にカスタマイズできるようになりました。
filter: invert(1)を使用して、暗い背景でより高いコントラストの解除アイコンを有効にする新しい.btn-close-whiteバリアントを追加しました。

Collapse

アコーディオンのスクロールアンカーを削除しました。

Dropdowns

オンデマンドのダークドロップダウンのための新しい.dropdown-menu-darkバリアントと関連する変数を追加しました。
$dropdown-padding-x用の新しい変数を追加した。
コントラストを改善するため、ドロップダウンの仕切りを暗くしました。
Breaking ドロップダウンのすべてのイベントは、ドロップダウンのトグルボタンでトリガーされ、親要素にバブルアップされるようになりました。
ドロップダウン・メニューは、ドロップダウンのポジショニングが静的な場合、またはドロップダウンがナビバーにある場合に、data-bs-popper="static"属性が設定されるようになりました。これはJavaScriptによって追加され、ポッパーのポジショニングを妨げることなくカスタムポジションスタイルを使用するのに役立ちます。
Breaking ドロップダウンプラグインのflipオプションを廃止し、Popperネイティブの設定を採用しました。flipモディファイアのfallbackPlacementsオプションに空の配列を渡すことで、フリップ動作を無効にできるようになりました。
ドロップダウンメニューがクリック可能になり、自動クローズ動作を処理する新しいautoCloseオプションが追加されました。このオプションを使用して、ドロップダウンメニューの内側または外側でクリックを受け付け、インタラクティブにすることができます。
ドロップダウンが<li>でラップされた.dropdown-itemをサポートするようになりました。

Jumbotron

Breaking ユーティリティで複製できるので、ジャンボトロン・コンポーネントを削除しました。デモは新しいジャンボトロンのサンプルをご覧ください。

List group

グループを一覧表示する新しい.list-group-numbered modifierを追加しました。

Navs and tabs

.nav-linkクラスにfont-size、font-weight、color、:hover colorに新しいnull変数を追加しました。

Navbars

Breaking ナバーは、コンテナ内を必要とするようになりました（スペースの要件と必要なCSSを大幅に簡素化するため）。
Breaking .activeクラスはもはや.nav-itemには適用できず、.nav-linkに直接適用する必要があります。

Offcanvas

新しいオフキャンバスコンポーネントを追加しました。

Pagination

ページネーションリンクは、カスタマイズ可能なmargin-left余白を持つようになり、互いに分離されたときにすべての角が動的に丸くなります。
ページネーションリンクにtransitionを追加しました。

Popovers

Breaking デフォルトのポップオーバー・テンプレートの.arrowを.popover-arrowにリネームしました。
whiteListオプションの名前をallowListリストに変更しました。

Spinners

スピナーはアニメーションを遅くすることで、prefers-reduced-motion: reduceを尊重するようになりました。#31882を参照。
スピナーの垂直方向の位置合わせが改善されました。

Toasts

位置決めユーティリティの助けを借りて、トーストを.toast-container内に配置できるようになった。
基本トーストの長さを5秒に変更しました。
トーストからoverflow: hiddenを削除し、calc()関数で適切なborder-radiusに置き換えた。

Tooltips

Breaking 基本ツール説明テンプレートの.arrowの名前を.tooltip-arrowに変更しました。
Breaking fallbackPlacementsのデフォルト値が[top、right、 bottom、left]に変更され、より良いポッパー要素を配置することができます。
Breaking whiteListオプションの名前をallowListに変更しました。

ユーティリティ

Breaking RTLサポートを追加し、方向名の代わりに論理プロパティ名を使用するようにいくつかのユーティリティの名前を変更しました：
- .left-*と.right-*の名前を.start-*と.end-*に変更しました。
- .float-leftと.float-rightの名前を.float-startと.float-endに変更しました。
- .border-leftと.border-rightの名前を.border-startと.border-endに変更しました。
- .rounded-leftと.rounded-rightの名前を.rounded-startと.rounded-endに変更しました。
- .ml-*と.mr-*の名前を.ms-*と.me-*に変更しました。
- .pl-*と.pr-*の名前を.ps-*と.pe-*に変更しました。
- .text-leftと.text-rightの名前を.text-startと.text-endに変更しました。
Breaking 基本的に負の余白は無効になっています。
<body>の背景を追加要素として素早く設定できる新しい.bg-bodyクラスを追加しました。
top、right、bottom、leftに新しい位置ユーティリティを追加しました。値は各属性に対して0、50%、100%を含みます。
絶対/固定位置の要素を水平/垂直方向にセンタリングする新しいユーティリティ.translate-middle-xと.translate-middle-yを追加しました。
新しいborder-widthユーティリティを追加しました。
Breaking .text-monospaceの名前を.font-monospaceに変更しました。
Breaking .text-hideはテキストを隠すための時代遅れの方法であり、もう使うべきではないので削除した。
.fs-*ユーティリティにfont-sizeユーティリティ（RFS有効）を追加。これらはHTMLのデフォルトの見出し（1～6、大～小）と同じスケールを使用し、Sassマップを介して変更できます。
Breaking 簡潔さと一貫性のために、.font-weight-*ユーティリティの名前を.fw-*に変更しました。
Breaking 簡潔さと新しい.fst-normalユーティリティとの整合性を保つため、.font-italicユーティリティの名前を.font-italicに変更しました。
CSSグリッドとフレックスボックスレイアウトのためのユーティリティと新しいgapユーティリティ(.gap)を表示する.d-gridを追加しました。
Breaking .rounded-smとrounded-lgを削除し、.rounded-0から.rounded-3までの新しいスケールのクラスを導入しました。#31687を参照。
新しいline-heightユーティリティを追加：.lh-1、.lh-sm、.lh-base、.lh-lg。こちらをご覧ください。
他の表示ユーティリティより多くの重みを与えるためにCSSで.d-noneユーティリティを移動しました。
Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

Breaking 反応型埋め込みヘルパーの名前がratioヘルパーに変更され、新しいクラス名と改善された動作、便利なCSS変数が追加されました。
- クラス名が変更され、アスペクト比のbyがxに変更されました。例えば、.ratio-16by9は.ratio-16x9になりました。
- .embed-responsive-itemと要素グループセレクタを廃止し、よりシンプルな.ratio > *セレクタを採用しました。クラスは必要なくなり、ratioヘルパーはどのHTML要素でも動作するようになりました。
- Sassマップの$embed-responsive-aspect-ratiosの名前が$aspect-ratiosに変更され、その値が簡素化され、key: valueのペアとしてクラス名とパーセンテージが含まれるようになりました。
- CSS変数が生成され、Sassマップの各値に含まれるようになりました。.ratioの--bs-aspect-ratio変数を変更して、任意のカスタム縦横比を作成してください。
Breaking “Screen reader"クラスは“visually hidden"クラスになりました。
- Sassファイルをscss/helpers/_screenreaders.scssからscss/helpers/_visually-hidden.scssに変更しました。
- .sr-onlyおよび.sr-only-focusableの名前を.visually-hiddenおよび.visually-hidden-focusableに変更しました。
- sr-only()とsr-only-focusable()のmixinsの名前をvisually-hidden()とvisually-hidden-focusable()に変更しました。
bootstrap-utilities.cssにヘルパーも含まれるようになりました。カスタムビルドでヘルパーをインポートする必要はなくなりました。

JavaScript

jQueryへの依存をやめ、プラグインを通常のJavaScriptに書き直した。
Breaking すべてのJavaScriptプラグインのData属性は、サードパーティや独自のコードとBootstrapの機能を区別するために、名前空間化されました。例えば、data-toggleの代わりにdata-bs-toggleを使用します。
すべてのプラグインで、第一引数に CSS セレクタを指定できるようになりました。DOM要素を渡すことも、有効なCSSセレクタを渡してプラグインの新しいインスタンスを作成することもできます：
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigは、BootstrapのデフォルトPopperコンフィグを引数として受け取る関数として渡すことができます。ドロップダウン、ポップオーバー、ツールチップに適用されます。
fallbackPlacements のデフォルト値が ['top'、'right'、'bottom'、'left']に変更されました。ドロップダウン、ポップオーバー、ツールチップに適用されます。
_getInstance() → getInstance()のような公開静的メソッドから下線を削除しました。

v5で変更された内容

Migrating to v5

v5.3.0

Helpers

Utilities

v5.3.0-alpha2

CSS variables

Color modes

Typography

Components

Helpers

Utilities

Docs

Tooling

v5.3.0-alpha1

カラーモードについて!

CSS変数

コンポーネント

Alert

List group

Dropdowns

Close button

Navbar

Progress bars

Forms

ユーティリティ

v5.2.0

デザインも一新

その他のCSS変数

新しい_maps.scss

新規ユーティリティ

追加変更点

v5.1.0

依存関係

ブラウザー対応

ドキュメントの変更

Sass

カラーシステム

グリッド更新

Content, Reboot, etc

RTL

フォーム

コンポーネント

Accordion

Alerts

Badges

Breadcrumbs

Buttons

Card

Carousel

Close button

Collapse

Dropdowns

Jumbotron

List group

Navs and tabs

Navbars

Offcanvas

Pagination

Popovers

Spinners

Toasts

Tooltips

ユーティリティ

Helpers

JavaScript

新しい`_maps.scss`