v5への移行 Migrating to v5

v4からv5への移行を支援するために、Bootstrapのソースファイル、ドキュメント、コンポーネントの変更を追跡およびレビューします。

On this page

v5.3.6

依存関係

ドキュメントのビルドをHugoからAstroに移行しました

v5.3.0

v5.3.0の以前のアルファリリースから移行する場合は、このセクションに加えてそれらの変更をレビューしてください。

ヘルパー

カラーリンクに再び !important が追加され、新しく追加されたリンクユーティリティとより良く連携するようになりました。

ユーティリティ

新しい .d-inline-grid 表示ユーティリティを追加しました。

v5.3.0-alpha2

v5.3.0の以前のアルファリリースから移行する場合は、以下にリストされている変更をレビューしてください。

CSS変数

重複および未使用のルートCSS変数をいくつか削除しました。

カラーモード

ダークモードの色は、色固有のティントやシェード（例: $blue-300）ではなく、Sassのテーマカラー（例: $primary）から派生するようになりました。これにより、デフォルトのテーマカラーをカスタマイズする際に、より自動化されたダークモードが可能になります。
ダークモードのテキスト、サブトル背景、サブトルボーダー用のテーマカラーを生成するためのSassマップを追加しました。
スニペットの例が、更新されたマークアップと削減されたカスタムスタイルでダークモードに対応しました。
ダークモードのCSSに color-scheme: dark を追加して、スクロールバーなどのOSレベルのコントロールを変更できるようにしました
フォーム検証の border-color とテキストの color の状態が、新しいSassとCSS変数のおかげでダークモードに対応するようになりました。
最近追加されたフォームコントロールの背景CSS変数を削除し、代わりにCSS変数を使用するようにSass変数を再割り当てしました。これにより、カラーモード全体でのスタイリングが簡素化され、ダークモードでフォームコントロールが適切に更新されない問題が回避されます。
box-shadow は、ダークモードで白に反転する代わりに、再び常にダークのままになります。
カラーモードトグルスクリプトのHTMLとJavaScriptを改善しました。アクティブなSVGを変更するためのセレクターが改善され、ARIA属性でマークアップがよりアクセシブルになりました。
ライトモードとダークモードにおけるドキュメントのコード構文の色などを改善しました。

タイポグラフィ

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

コンポーネント

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

ヘルパー

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

ユーティリティ

SassとCSS変数 ${color}-text を、関連するユーティリティに合わせて ${color}-text-emphasis に名前変更しました。
カラーリンクと並んで新しい .link-body-emphasis ヘルパーを追加しました。これは、カラーモードに対応した強調色を使用してカラーリンクを作成します。
リンクの色の不透明度、下線のオフセット、下線の色、下線の不透明度のための新しいリンクユーティリティを追加しました。新しいリンクユーティリティを探索してください。
CSS変数ベースの border-width ユーティリティは、プロパティを直接設定するように戻されました（v5.2.0以前と同様）。これにより、テーブルを含むネストされた要素間の継承の問題が回避されます。
.text-black と .bg-black ユーティリティに合わせて新しい .border-black ユーティリティを追加しました。
非推奨 .text-muted ユーティリティと $text-muted Sass変数は非推奨となり、.text-body-secondary と $body-secondary-color に置き換えられました。

ドキュメント

例は、ドキュメントの設定に従って適切なライトまたはダークのカラーモードで表示されるようになりました。各例には個別のカラーモードピッカーがあります。
ライブToastデモに含まれるJavaScriptを改善しました。
Examplesページの上部に twbs/examples リポジトリの内容を追加しました。

ツール

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

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

v5.3.0-alpha1

カラーモード対応！

新しいカラーモードのドキュメントを読んで詳細を確認してください。

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

非推奨カラーモードがコンポーネントのダークバリアントを置き換えるため、.btn-close-white、.carousel-dark、.dropdown-menu-dark、.navbar-dark は非推奨です。
新しい拡張カラーシステム。 より微妙でシステム全体のカラーパレットのために、新しいセカンダリ、ターシャリ、および color と background-color の強調色を含む新しいテーマカラー（ただし $theme-colors には含まれません）を追加しました。これらの新しい色は、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-emphasis のための新しいユーティリティを追加しました。これらの新しい色は、ライトやダークなどの複数のカラーモードにわたるカスタマイズを容易にするという明確な目標を持って、SassとCSS変数を通じて利用できます（ただし、カラーマップには含まれません）。
アラート、.btn-close、.offcanvas の追加変数を追加しました。
--bs-heading-color 変数が更新とダークモードのサポートとともに復活しました。まず、CSS変数を出力しようとする前に、関連するSass変数 $headings-color の null 値をチェックするようになったため、デフォルトではコンパイルされたCSSに存在しません。次に、フォールバック値 inherit を持つCSS変数を使用することで、元の動作を維持しながら、オーバーライドも可能にします。
リンクは 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 が含まれます。

コンポーネント

アラート

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

リストグループ

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

ドロップダウン

非推奨 .dropdown-menu-dark クラスは非推奨になり、ドロップダウンまたは任意の親要素の data-bs-theme="dark" に置き換えられました。例についてはドキュメントを参照してください。

閉じるボタン

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

ナビゲーションバー

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

プログレスバー

プログレスバーのマークアップは、v5.3.0で更新されました。内側の .progress-bar 要素に role と様々な aria- 属性が配置されていたため、一部のスクリーンリーダーがゼロ値のプログレスバーを読み上げませんでした。現在、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>

複数のプログレスバーを単一のスタックされたプログレスバーにより論理的にラップするための新しい .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>

フォーム

.form-control は、カラーモードをサポートするためにCSS変数でスタイル設定されるようになりました。これには、デフォルトおよび無効なフォームコントロールの背景用の2つの新しいルートCSS変数の追加が含まれます。
.form-check と .form-switch コンポーネントは、background-image を設定するためにCSS変数で構築されるようになりました。ここでの使用方法は、各コンポーネントの様々なフォーカス、アクティブなどの状態がベースクラスに設定されていないという点で、他のコンポーネントとは異なります。代わりに、状態は1つの変数（例: --bs-form-switch-bg）をオーバーライドします。
フローティングフォームラベルに、<textarea> 要素のサポートを修正するための background-color が追加されました。無効な状態などもサポートするために追加の変更が行われました。
WebKitベースのブラウザでの日付と時刻の入力の表示を修正しました。

ユーティリティ

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

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

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

v5.2.0

デザインのリフレッシュ

Bootstrap v5.2.0では、プロジェクト全体のいくつかのコンポーネントとプロパティに対する微妙なデザインの更新が行われました。特にボタンとフォームコントロールの border-radius 値が洗練されました。また、ドキュメントも新しいホームページ、サイドバーのセクションが折りたたまれなくなったよりシンプルなドキュメントレイアウト、およびBootstrap Iconsのより目立つ例で更新されました。

より多くの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では、_maps.scss という新しいSassファイルが導入されました。 これは、元のマップへの更新がそれを拡張するセカンダリマップに適用されないという問題を修正するために、_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 Gridを有効にします。
ナビゲーションバーがoffcanvasをサポートするように更新されました。 レスポンシブな .navbar-expand-* クラスといくつかのoffcanvasマークアップを使用して、任意のナビゲーションバーにoffcanvasドロワーを追加します。
新しいプレースホルダーコンポーネントを追加しました。 最新のコンポーネントで、サイトやアプリでまだ何かが読み込まれていることを示すために、実際のコンテンツの代わりに一時的なブロックを提供する方法です。
Collapseプラグインが水平方向の折りたたみをサポートするようになりました。 .collapse に .collapse-horizontal を追加して、height の代わりに width を折りたたみます。min-height または height を設定することで、ブラウザの再描画を回避します。
新しいスタックと垂直ルールヘルパーを追加しました。 スタックを使用して、複数のflexboxプロパティを素早く適用し、カスタムレイアウトを素早く作成します。水平（.hstack）と垂直（.vstack）のスタックから選択できます。新しい .vr ヘルパーを使用して、<hr> 要素に似た垂直の区切り線を追加します。
新しいグローバル :root CSS変数を追加しました。 <body> スタイルを制御するために、:root レベルにいくつかの新しいCSS変数を追加しました。ユーティリティとコンポーネント全体を含め、さらに多くが進行中ですが、今のところはカスタマイズセクションのCSS変数を読んでください。
カラーと背景のユーティリティをオーバーホールしてCSS変数を使用し、新しいテキストの不透明度と背景の不透明度ユーティリティを追加しました。 .text-* と .bg-* ユーティリティは、CSS変数と rgba() 色の値で構築されるようになり、新しい不透明度ユーティリティで任意のユーティリティを簡単にカスタマイズできるようになりました。
コンポーネントのカスタマイズ方法を示すための新しいスニペットの例を追加しました。 新しいスニペットの例で、すぐに使用できるカスタマイズされたコンポーネントやその他の一般的なデザインパターンを取得します。フッター、ドロップダウン、リストグループ、モーダルが含まれます。
ポップオーバーとツールチップから未使用のポジショニングスタイルを削除しました。これらはPopperによってのみ処理されます。$tooltip-margin は非推奨となり、プロセスで null に設定されました。

詳細情報が必要ですか？v5.1.0のブログ投稿をお読みください。

v5.0.0

お知らせ！ Bootstrap 5の最初のメジャーリリースであるv5.0.0への変更を以下に記載しています。上記の追加変更は反映されていません。

依存関係

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

ブラウザサポート

Internet Explorer 10および11を削除しました
Microsoft Edge < 16（Legacy Edge）を削除しました
Firefox < 60を削除しました
Safari < 12を削除しました
iOS Safari < 12を削除しました
Chrome < 60を削除しました

ドキュメントの変更

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

Sass

デフォルトのSassマップのマージを廃止して、冗長な値を削除しやすくしました。$theme-colors のようなSassマップですべての値を定義する必要があることに注意してください。Sassマップの扱い方を確認してください。
破壊的変更 color-yiq() 関数と関連変数を color-contrast() に名前変更しました。これはもはやYIQ色空間に関連していないためです。#30168を参照してください。
- $yiq-contrasted-threshold は $min-contrast-ratio に名前変更されました。
- $yiq-text-dark と $yiq-text-light はそれぞれ $color-contrast-dark と $color-contrast-light に名前変更されました。
破壊的変更メディアクエリミックスインのパラメータがより論理的なアプローチのために変更されました。
- media-breakpoint-down() は次のブレークポイントの代わりにブレークポイント自体を使用します（例: media-breakpoint-down(md) の代わりに media-breakpoint-down(lg) を使用すると、lg より小さいビューポートをターゲットにします）。
- 同様に、media-breakpoint-between() の2番目のパラメータも次のブレークポイントの代わりにブレークポイント自体を使用します（例: media-breakpoint-between(sm, md) の代わりに media-breakpoint-between(sm, lg) を使用すると、sm と lg の間のビューポートをターゲットにします）。
破壊的変更印刷スタイルと $enable-print-styles 変数を削除しました。印刷表示クラスはまだ残っています。#28339を参照。
破壊的変更 color()、theme-color()、gray() 関数を削除し、変数を優先するようにしました。#29083を参照。
破壊的変更 theme-color-level() 関数を color-level() に名前変更し、$theme-color の色だけでなく、任意の色を受け入れるようになりました。#29083を参照 注意: color-level() は後に v5.0.0-alpha3 で削除されました。
破壊的変更 $enable-prefers-reduced-motion-media-query と $enable-pointer-cursor-for-buttons を簡潔にするために $enable-reduced-motion と $enable-button-pointers に名前変更しました。
破壊的変更 bg-gradient-variant() ミックスインを削除しました。生成された .bg-gradient-* クラスの代わりに .bg-gradient クラスを使用して要素にグラデーションを追加してください。
破壊的変更 以前に非推奨だったミックスインを削除しました:
- 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()
破壊的変更 scale-color() 関数を shift-color() に名前変更して、Sass自身の色のスケーリング関数との衝突を回避しました。
box-shadow ミックスインは null 値を許可し、複数の引数から none を削除するようになりました。#30394を参照。
border-radius() ミックスインにデフォルト値が追加されました。

カラーシステム

color-level() と $theme-color-interval で機能していたカラーシステムが削除され、新しいカラーシステムが採用されました。コードベースのすべての lighten() と darken() 関数は tint-color() と shade-color() に置き換えられました。これらの関数は、固定量で明度を変更する代わりに、色を白または黒と混合します。shift-color() は、ウェイトパラメータが正か負かによって、色をティントまたはシェードします。詳細については#30622を参照してください。
すべての色に新しいティントとシェードを追加し、各基本色に9つの個別の色を新しいSass変数として提供しました。
色のコントラストを改善しました。色のコントラスト比を3:1から4.5:1に引き上げ、WCAG 2.2 AAコントラストを確保するために青、緑、シアン、ピンクの色を更新しました。また、色のコントラスト色を $gray-900 から $black に変更しました。
カラーシステムをサポートするために、色を適切に混合するための新しいカスタム tint-color() と shade-color() 関数を追加しました。

グリッドの更新

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

コンテンツ、Rebootなど

RFSがデフォルトで有効になりました。 font-size() ミックスインを使用する見出しは、ビューポートに合わせて font-size を自動的に調整します。この機能は以前はv4でオプトインでした。
破壊的変更 $display-* 変数を $display-font-sizes Sassマップに置き換えて、ディスプレイタイポグラフィをオーバーホールしました。また、個別の $display-*-weight 変数を削除して単一の $display-font-weight にし、font-size を調整しました。
2つの新しい .display-* 見出しサイズ、.display-5 と .display-6 を追加しました。
リンクはデフォルトで下線が引かれます（ホバー時だけでなく）、特定のコンポーネントの一部でない限り。
テーブルを再設計して、スタイルをリフレッシュし、スタイリングをより細かく制御できるようにCSS変数で再構築しました。
破壊的変更ネストされたテーブルはスタイルを継承しなくなりました。
破壊的変更 .thead-light と .thead-dark は、すべてのテーブル要素（thead、tbody、tfoot、tr、th、td）に使用できる .table-* バリアントクラスを優先して削除されました。
破壊的変更 table-row-variant() ミックスインは table-variant() に名前変更され、2つのパラメータのみを受け入れます: $color（色名）と $value（カラーコード）。ボーダーの色とアクセントカラーは、テーブルファクター変数に基づいて自動的に計算されます。
テーブルセルのパディング変数を -y と -x に分割しました。
破壊的変更 .pre-scrollable クラスを削除しました。#29135を参照
破壊的変更 .text-* ユーティリティはリンクにホバーとフォーカス状態を追加しなくなりました。代わりに .link-* ヘルパークラスを使用できます。#29267を参照
破壊的変更 .text-justify クラスを削除しました。#29793を参照
破壊的変更 <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

水平方向固有の変数、ユーティリティ、ミックスインはすべて、flexboxレイアウトにあるような論理プロパティを使用するように名前変更されました。たとえば、left と right の代わりに start と end を使用します。

フォーム

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

コンポーネント

アラート、ブレッドクラム、カード、ドロップダウン、リストグループ、モーダル、ポップオーバー、ツールチップの padding 値を統一して、$spacer 変数に基づくようにしました。#30564を参照。

アコーディオン

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

アラート

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

バッジ

破壊的変更すべての .badge-* 色クラスを削除し、背景ユーティリティを優先するようにしました（例: .badge-primary の代わりに .bg-primary を使用）。
破壊的変更 .badge-pill を削除しました。代わりに .rounded-pill ユーティリティを使用してください。
破壊的変更 <a> と <button> 要素のホバーとフォーカススタイルを削除しました。
バッジのデフォルトのパディングを .25em/.5em から .35em/.65em に増やしました。

ブレッドクラム

padding、background-color、border-radius を削除して、ブレッドクラムのデフォルトの外観を簡素化しました。
CSSを再コンパイルせずに簡単にカスタマイズできるように、新しいCSSカスタムプロパティ --bs-breadcrumb-divider を追加しました。

ボタン

破壊的変更 チェックボックスまたはラジオボタンを使用するトグルボタンは、JavaScriptを必要とせず、新しいマークアップを持っています。 ラッパー要素は不要になり、<input> に .btn-check を追加し、<label> の任意の .btn クラスとペアにします。#30650を参照。このドキュメントはButtonsページから新しいFormsセクションに移動しました。
破壊的変更 .btn-block を削除し、ユーティリティを優先するようにしました。 .btn に .btn-block を使用する代わりに、ボタンを .d-grid でラップし、必要に応じて .gap-* ユーティリティでスペースを空けます。レスポンシブクラスに切り替えて、さらに細かく制御できます。いくつかの例についてはドキュメントを読んでください。
追加のパラメータをサポートするために button-variant() と button-outline-variant() ミックスインを更新しました。
ホバーとアクティブ状態でコントラストが向上するようにボタンを更新しました。
無効なボタンには pointer-events: none; が追加されました。

カード

破壊的変更 .card-deck を削除し、グリッドを優先するようにしました。カードを列クラスでラップし、親の .row-cols-* コンテナを追加してカードデッキを再作成します（ただし、レスポンシブな配置をより細かく制御できます）。
破壊的変更 .card-columns を削除し、Masonryを優先するようにしました。#28922を参照。
破壊的変更 .card ベースのアコーディオンを新しいアコーディオンコンポーネントに置き換えました。

カルーセル

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

閉じるボタン

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

コラプス

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

ドロップダウン

オンデマンドのダークドロップダウン用の新しい .dropdown-menu-dark バリアントと関連変数を追加しました。
$dropdown-padding-x の新しい変数を追加しました。
コントラストを向上させるためにドロップダウンの区切り線を暗くしました。
破壊的変更ドロップダウンのすべてのイベントは、ドロップダウントグルボタンでトリガーされ、その後親要素にバブルアップされるようになりました。
ドロップダウンメニューには、ドロップダウンの配置が静的である場合、またはドロップダウンがナビゲーションバー内にある場合に data-bs-popper="static" 属性が設定されるようになりました。これはJavaScriptによって追加され、Popperの配置に干渉することなくカスタム位置スタイルを使用するのに役立ちます。
破壊的変更ドロップダウンプラグインの flip オプションを削除し、ネイティブのPopper設定を優先するようにしました。flipモディファイアのfallbackPlacementsオプションに空の配列を渡すことで、反転動作を無効にできるようになりました。
ドロップダウンメニューは、自動閉じる動作を処理する新しい autoClose オプションでクリック可能になりました。このオプションを使用して、ドロップダウンメニューの内側または外側のクリックを受け入れてインタラクティブにできます。
ドロップダウンは <li> でラップされた .dropdown-item をサポートするようになりました。

ジャンボトロン

破壊的変更ジャンボトロンコンポーネントを削除しました。ユーティリティで再現できるためです。デモについては新しいJumbotronの例を参照してください。

リストグループ

リストグループに新しい.list-group-numbered 修飾子を追加しました。

ナビゲーションとタブ

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

ナビゲーションバー

破壊的変更ナビゲーションバーには内部にコンテナが必要になりました（スペーシング要件と必要なCSSを大幅に簡素化するため）。
破壊的変更 .active クラスは .nav-item に適用できなくなり、.nav-link に直接適用する必要があります。

オフキャンバス

新しいoffcanvasコンポーネントを追加しました。

ページネーション

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

ポップオーバー

破壊的変更デフォルトのポップオーバーテンプレートで .arrow を .popover-arrow に名前変更しました。
whiteList オプションを allowList に名前変更しました。

スピナー

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

トースト

トーストは、ポジショニングユーティリティの助けを借りて、.toast-container で配置できるようになりました。
デフォルトのトーストの期間を5秒に変更しました。
トーストから overflow: hidden を削除し、calc() 関数を使用した適切な border-radius に置き換えました。

ツールチップ

破壊的変更デフォルトのツールチップテンプレートで .arrow を .tooltip-arrow に名前変更しました。
破壊的変更 fallbackPlacements のデフォルト値が、popper要素のより良い配置のために ['top', 'right', 'bottom', 'left'] に変更されました。
破壊的変更 whiteList オプションを allowList に名前変更しました。

ユーティリティ

破壊的変更 RTLサポートの追加に伴い、いくつかのユーティリティを方向名の代わりに論理プロパティ名を使用するように名前変更しました:
- .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 に名前変更しました。
破壊的変更デフォルトでネガティブマージンを無効にしました。
<body> の背景を追加要素に素早く設定するための新しい .bg-body クラスを追加しました。
top、right、bottom、left 用の新しいポジションユーティリティを追加しました。各プロパティには 0、50%、100% の値が含まれます。
絶対/固定位置の要素を水平または垂直方向に中央揃えするための新しい .translate-middle-x と .translate-middle-y ユーティリティを追加しました。
新しいborder-width ユーティリティを追加しました。
破壊的変更 .text-monospace を .font-monospace に名前変更しました。
破壊的変更 .text-hide を削除しました。もはや使用すべきでないテキストを隠すための古い方法であるためです。
font-size ユーティリティ用の .fs-* ユーティリティを追加しました（RFSが有効）。これらはHTMLのデフォルトの見出しと同じスケール（1-6、大から小）を使用し、Sassマップを介して変更できます。
破壊的変更 .font-weight-* ユーティリティを簡潔さと一貫性のために .fw-* に名前変更しました。
破壊的変更 .font-italic ユーティリティを新しい .fst-normal ユーティリティとの簡潔さと一貫性のために .fst-italic に名前変更しました。
表示ユーティリティに .d-grid を追加し、CSS Gridとflexboxレイアウトのための新しい gap ユーティリティ（.gap）を追加しました。
破壊的変更 .rounded-sm と rounded-lg を削除し、新しいスケールのクラス .rounded-0 から .rounded-3 を導入しました。#31687を参照。
新しい line-height ユーティリティを追加しました: .lh-1、.lh-sm、.lh-base、.lh-lg。こちらを参照してください。
CSSの .d-none ユーティリティを移動して、他の表示ユーティリティよりも優先されるようにしました。
.visually-hidden-focusable ヘルパーを拡張して、:focus-within を使用してコンテナでも機能するようにしました。

ヘルパー

破壊的変更 レスポンシブ埋め込みヘルパーは比率ヘルパーに名前変更されました。新しいクラス名と改善された動作、および便利なCSS変数を持ちます。
- クラスは、アスペクト比の by を x に変更するように名前変更されました。たとえば、.ratio-16by9 は .ratio-16x9 になりました。
- .embed-responsive-item と要素グループセレクターを削除し、よりシンプルな .ratio > * セレクターを優先しました。クラスは不要になり、比率ヘルパーは任意のHTML要素で機能するようになりました。
- $embed-responsive-aspect-ratios Sassマップは $aspect-ratios に名前変更され、その値は key: value ペアとしてクラス名とパーセンテージを含むように簡素化されました。
- CSS変数がSassマップの各値に対して生成され、含まれるようになりました。.ratio の --bs-aspect-ratio 変数を変更して、任意のカスタムアスペクト比を作成します。
破壊的変更 「スクリーンリーダー」クラスは"視覚的に非表示"クラスになりました。
- 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() ミックスインを visually-hidden() と visually-hidden-focusable() に名前変更しました。
bootstrap-utilities.css にヘルパーが含まれるようになりました。カスタムビルドでヘルパーをインポートする必要はなくなりました。

JavaScript

jQuery依存関係を削除し、プラグインを通常のJavaScriptで書き直しました。
破壊的変更すべてのJavaScriptプラグインのデータ属性が名前空間化され、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設定を引数として受け入れる関数として渡すことができるため、独自の方法でこのデフォルト設定をマージできます。ドロップダウン、ポップオーバー、ツールチップに適用されます。
Popper要素のより良い配置のために、fallbackPlacements のデフォルト値が ['top', 'right', 'bottom', 'left'] に変更されました。ドロップダウン、ポップオーバー、ツールチップに適用されます。
_getInstance() → getInstance() のようなpublic staticメソッドからアンダースコアを削除しました。
util.js を削除し、その機能を個々のプラグインに統合しました。以前に util.js を手動で含めていた場合は、安全に削除できます。もはや必要ありません。各プラグインには、必要なユーティリティのみが含まれるようになり、モジュール性が向上し、依存関係が削減されました。

v5への移行 Migrating to v5

v5.3.6

依存関係

v5.3.0

ヘルパー

ユーティリティ

v5.3.0-alpha2

CSS変数

カラーモード

タイポグラフィ

コンポーネント

ヘルパー

ユーティリティ

ドキュメント

ツール

v5.3.0-alpha1

カラーモード対応！

CSS変数

コンポーネント

アラート

リストグループ

ドロップダウン

閉じるボタン

ナビゲーションバー

プログレスバー

フォーム

ユーティリティ

v5.2.0

デザインのリフレッシュ

より多くのCSS変数

新しい _maps.scss

新しいユーティリティ

追加の変更

v5.1.0

v5.0.0

依存関係

ブラウザサポート

ドキュメントの変更

Sass

カラーシステム

グリッドの更新

コンテンツ、Rebootなど

RTL

フォーム

コンポーネント

アコーディオン

アラート

バッジ

ブレッドクラム

ボタン

カード

カルーセル

閉じるボタン

コラプス

ドロップダウン

ジャンボトロン

リストグループ

ナビゲーションとタブ

ナビゲーションバー

オフキャンバス

ページネーション

ポップオーバー

スピナー

トースト

ツールチップ

ユーティリティ

ヘルパー

JavaScript

新しい `_maps.scss`