Bootstrap5設置ガイド

【導入】

• はじめに：コミュニティのツールを一部追加
• ダウンロード：代替CDNを新設
• JavaScript：JavaScriptフレームワークでの使用パッケージにVue 3用のBootstrapVueNextを追加

【カスタマイズ】

• CSS変数：
  • デフォルトのroot変数に --bs-highlight-color を追加
  • ダークモードのroot変数に --bs-highlight-color, --bs-highlight-bg を追加

【コンテンツ】

• 文字の体裁：文字の装飾の <mark> のダークモード用の背景色設定を追加

【導入】

• Javascript：イベントの設定例で if (!data) {} を削除
• Webpackでの使用：BootstrapのインポートのPostCSSでCSSを処理するためのwebpack用ローダーで plugins: () => [ を plugins: [ に変更

【カスタマイズ】

• Sassのカスタマイズ：コンパイルと組み込みを追加
• カラーモード：$body-color-dark を $gray-500 から $gray-300 に変更し、ダークモードのカラーコントラストを向上
• CSS変数：ダークモードのroot変数の --bs-body-color, --bs-body-color-rgb, --bs-secondary-color, --bs-secondary-color-rgb, --bs-tertiary-color, --bs-tertiary-color-rgb の色設定を変更

【フォーム】

• フォームテキスト：<input> の [aria-labelledby] の設定を [aria-describedby] に戻す
• チェック＆ラジオ：チェックボックス切替ボタンとラジオ切替ボタンに基本クラスボタンの設定を追加

【コンポーネント】

• アイコン付きアラートのアイコンを繰り返し使用する場合の設定：svg[style="display: none;"] を svg.d-none に変更
• ボタン：
  • 常にブロックボタンの <a> タグの場合の設定を変更
  • ボタンプラグインの切替ボタンに基本クラスボタンの設定を追加
• カードのナビゲーション、ドロップメニューアイテムの無効化、リンク付きリストグループ、ナビゲーションバーのナビゲーション、基本のナビゲーション、プレースホルダ：それぞれリンクが無効の場合（a.disabled）で、v5.1.1で不要になった aria-disabled="true" の設定が復活
• 折り畳み：基本の設定と複数の切替とターゲットのボタンの間隔の設定を追加
• ナビゲーションバー：ダーク・ナビゲーションバーの罫線の設定を変更
• ナビ&タブ：タブの移動で Home キーと End キーに対応
• スピナー：ボタンに設定する場合の role="status" の設定箇所を変更

【ヘルパー】

• 縦仕切り線：Sass変数の変数を $vr-border-width 変数に変更

各解説の"v5.3.0"での変更はv5.3.0-alpha版での変更も含むので、v5.3.0-alpha1, v5.3.0-alpha2, v5.3.0-alpha3の各変更も合わせて参照して下さい。

【導入】

• クイックスタート：Popperのバージョンが2.11.6から2.11.8に
• webpackでの使用：src/index.html の設定：src="./main.js" の設定を削除
• Viteでの使用：vite.config.js の設定：server から hot: true の設定を削除

【カスタマイズ】

• カラーモード：
  • JavaScript：color-modes.js の設定、カラーモードの切替の設定方法を変更
  • テーマカラーを追加を新設
• CSS変数：デフォルトのroot変数に --bs-heading-color: inherit; を追加

【コンテンツ】

• テーブル：カラーバリエーションで背景色ユーティリティクラス .bg-{color}（文字色ユーティリティクラス .text-{color}）や文字&背景色ヘルパークラス .text-bg-{themecolor} を入れても反映されなくなった

【コンポーネント】

• ドロップダウン：ダークドロップダウンのナビゲーションバーで使用する場合の設定を変更
• ナビゲーションバー：ダークナビゲーションバー、外部コンテンツの設定をそれぞれ変更

【ユーティリティ】

• 位置ユーティリティ：マーカーの設定の *-dark を *-secondary に変更

各解説ではv5.3.0-alpha3版での変更も"v5.3.0"と記載しています。

• webpackでの使用：
  • src/index.html の設定：src="./main.js" の設定を削除
  • package.json の設定："build": "webpack build", ⇒ "build": "webpack build --mode=production",
• RFSのバージョンがv9.0.6からv10.0.0に
• アラート：ライブの実例でJavascriptの設定変更
• モーダル：様々なモーダルコンテンツでJavascriptの設定変更
• 表示ユーティリティ：インライン・グリッド表示として表示用に .d(-{breakpoint})-inline-grid、印刷用に .d-print-inline-grid を追加

各解説ではv5.3.0-alpha2版での変更も"v5.3.0"と記載しています。

• v5.3.0-alpha1では $headings-color-dark: #fff; の設定だったため見出し文字（<h*>, .h*）がダークモードでは白字になっていたが、v5.3.0-alpha2では $headings-color-dark: null; となりダークモードでも標準の文字色で表示される
• レイアウト、コンテンツ、フォーム、コンポーネント、ヘルパー、ユーティリティの各解説の以下の項目を名称変更（既に名称変更したものと統一）
  • 「Sass」⇒「CSS」
  • 「変数」⇒「Sass変数」
  • 「マップ」⇒「Sassマップ」
  • 「mixin」⇒「Sassミックスイン」
  • 「ループ」⇒「Sassループ」
  • 「ユーティリティAPI」⇒「SassユーティリティAPI」
• .text-muted は非推奨になったので、HTML設定内ではすべて .text-body-secondary に変更

【導入】

• JavaScript：Boottrapをモジュールとして使用する場合は "@popperjs/core" はESM Popper CDNリファレンスを使用
• webpackでの使用、Parcelでの使用、Viteでの使用の設定をそれぞれ更新

【カスタマイズ】

• カラーシステム：ユーティリティの生成でインポートするSassファイルに bootstrap/scss/variables-dark を追加
• カラーモード：カラーモードの入れ子の項目を削除
• CSS変数：
  • --bs-{themecolor}-text が --bs-{themecolor}-text-emphasis に変更
  • デフォルトのroot変数
    • フォーカスリンク関連の変数（--bs-focus-ring-*）を追加
    • 角丸の極大の大きさの変数：--bs-border-radius-2xl ではなく、--bs-border-radius-xxl を使用する仕様に変更
    • v5.3.0-alpha1でフォームコントロール関連の変数（--bs-form-control-bg, --bs-form-control-disabled-bg）を追加したが、--bs-body-bg, --bs-secondary-bg に再割り当てたのでv5.3.0-alpha2で削除
    • フォーム入力検証関連の変数（--bs-form-valid-*, --bs-form-invalid-*）を追加
  • フォーカス変数を新設

【コンテンツ】

• 文字の体裁：見出しのカスタマイズで補助文の設定が small.text-muted から small.text-body-secondary に変更

【フォーム】

• フォームコントロール：
  • フォームテキストがフォームの概要から移動し、<input> 内の [aria-describedby] を [aria-labelledby] に変更
  • 関連するCSS変数が削除されたので、CSSのCSS変数の項目も削除
• インプットグループ：基本のインプットグループのラベル付きアドオンにヘルプの例文を追加

【コンポーネント】

• アコーディオン：ヘッダとコンテンツの関連付けのアクセシビリティの設定は不要に
• ボタン：基本クラスを新設し、ボタンの設定はバリエーションに変更（裏技のv3のDefault風ボタンの設定をダークモード対応に変更）
• 閉じるボタン：CSS変数を使用した構築に移行
• リストグループ：リストグループの背景色から背景色バリエーションに名称変更
• ナビゲーションバー：オフキャンバス付きナビゲーションバーの button.navbar-toggler に [aria-label] を追加
• ナビ&タブ：アンダーラインナビゲーションを新設し、JavaScript動作にもアンダーラインナビゲーションの場合を追加
• オフキャンバス：ダークバージョンの従来の設定方法は非推奨に
• プレースホルダ：a.btn.btn-primary.disabled.placeholder から href="#", tabindex="-1" を削除
• プログレスバー：ラベルがバーより長い場合の設定方法が追加
• トースト：ライブの実例のJavaScriptの記述を修正

【ヘルパー】

• 色付きリンク：
  • リンクの色に強調文字カラー .link-body-emphasis を追加
  • リンクユーティリティと併用を新設
• フォーカスリングを新設
• アイコンリンクを新設

【ユーティリティ】

• ユーティリティAPI：APIの使用の際にインポートするSassファイルに、bootstrap/scss/variables-dark を追加
• 境界ユーティリティ：罫線の色に .border-black を追加
• 文字色ユーティリティ：.text-{themecolor}-emphasis（.text-dark-emphasis を除く） の color が若干暗めになる
• リンクユーティリティを新設

【実例】

• ダークモードでの表示に対応
• HTML設定内の .text-muted はすべて .text-body-secondary に変更
• スターターカテゴリを新設

各解説ではv5.3.0-alpha1での変更も"v5.3.0"と記載しています。

ダークモードに対応

※本サイトのライトモードとダークモードの切替は右上のナビゲーションバーで可能（デフォルトはオート（ブラウザの設定に準ずる））。

• light（デフォルト）とdarkのカラーモードをグローバルにサポート。カラーモードは :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 に新しく二次Bodyカラー、三次Bodyカラー、強調文字カラーを使用し、よりニュアンスのあるシステム全体のカラーパレットを実現。これらの新しいカラーは、Sass変数、CSS変数、ユーティリティクラスとして利用できる。
• テーマカラーのSass変数、CSS変数、ユーティリティクラスを拡張し、強調文字色、淡い背景色、淡い罫線色などを追加。これらはSass変数、CSS変数、ユーティリティクラスとして利用可能。
• ダークモード特有の再定義を格納するため、新しく _variables-dark.scss スタイルシートを追加。このスタイルシートは、インポートスタック内の既存の _variables.scss ファイルの直後にインポートする必要がある。

詳細は、新設のカラーモードに記載。

【カスタマイズ】

• Sassのカスタマイズ：
  • インポート：@import "../node_modules/bootstrap/scss/variables-dark";（ダークモードの設定）の設定を追加
  • 変数のデフォルト値：必須にインポートするSassファイルに bootstrap/scss/variables-dark（ダークモードの変数）を追加
• Sass オプション：$enable-dark-mode を追加
• カラーシステム：カラーパレットと新色を使用を新設
• カラーモードを新設
• CSS変数：root変数内にデフォルトとダークモードを新設し、デフォルトのroot変数に
  • カラーモードの新設に伴い、従来の変数をライトモード（[data-bs-theme=light]）用にし、ダークモード（[data-bs-theme=dark]）用の変数を追加
  • ブレークポイント関連の変数（--bs-breakpoint-**）が復活
  • テキストカラーの変数（--bs-{themecolor}-text）, 淡い背景色の変数（--bs-{themecolor}-bg-subtle）, 淡い罫線の色の変数（--bs-{themecolor}-border-subtle）, 強調文字カラーの変数（--bs-emphasis-color）, 二次カラーの変数（--bs-secondary-color）, 二次背景色の変数（--bs-secondary-bg）, 三次カラーの変数（--bs-tertiary-color）, 三次背景色の変数（--bs-tertiary-bg）, リンクの装飾の変数（--bs-link-decoration）, ボックスシャドウの変数（--bs-box-shadow-*）, フォームコントロールの変数（--bs-form-control-*-bg）などが追加

【フォーム】

• フォームコントロール：CSS変数を使用した構築に移行
• フローティングラベル：無効化を新設

【コンテンツ】

• Reboot：
  • 段落を見出しから分離
  • リンクの color スタイルをCSS変数を使用するように変換し、リンクカラーの不透明度がカスタマイズ可能に

【コンポーネント】

• アラート：Sass mixinの alert-variant() は非推奨に
• ボタングループ：ラジオボタングループの設定に name 属性の設定を入れ忘れてたので追加
• カード：グリッドマークアップの使用、ユーティリティの使用、テキストの配置にそれぞれカード間のマージンを追加
• カルーセル：
  • 基本の設定から [data-bs-ride] を外す（アクセシビリティの観点から、自動再生カルーセルの使用の回避を推奨）
  • カルーセルの自動再生を新設し、スライドのみを移設してコントロールなしの自動再生カルーセルに変更
  • ダークバージョンの .carousel-dark は非推奨に
• 閉じるボタン：ホワイト・バージョンをダーク・バージョンに変更し、.btn-close-white は非推奨に
• ドロップダウン：ダークドロップダウンの .dropdown-menu-dark は非推奨に
• リストグループ：
  • リストグループ・アイテムのカラーバリエーションは、SassループでCSS変数を再定義するようになり、Sass mixin（mixinから名称変更）の list-group-item-variant() は非推奨に
  • リストグループの背景色の中にリンクやボタンについてが独立の項目になり、アクティブ用の背景色の設定は廃止
  • ループからSassループに名称変更
• モーダル：ツールチップとポップオーバーでポップオーバーの起動ボタンの設定を <a> から <button> に変更
• ナビゲーションバー：カラーモードの新設に伴い、
  • デフォルトのナビゲーションの設定：nav.navbar.bg-light ⇒ nav.navbar.bg-body-tertiary
  • ダーク・ナビゲーションバーの設定：.navbar.navbar-dark.bg-dark ⇒ .navbar.bg-body-secondary[data-bs-theme="dark"]
  • 明るめの背景色のナビゲーションバーの設定：.navbar ⇒ .navbar[data-bs-theme="light"]
  • 暗めの背景色のナビゲーションバーの設定：.navbar.navbar-dark ⇒ .navbar[data-bs-theme="dark"]
  • .navbar-dark は非推奨に
• プログレスバー：
  • 基本の設定：各アクセシビリティ属性の設定要素が .progress-bar から .progress に変更
  • 複数バーの設定：.progress > (.progress-bar + .progress-bar) ⇒ .progress-stacked > ((.progress > .progress-bar) + (.progress > .progress-bar))
  • 長さと太さの項目をまとめてバーのサイズとして再構成

【ユーティリティ】

• 背景色ユーティリティ：.bg-{themecolor}-subtle, .bg-body-secondary, .bg-body-tertiary が追加
• 定義済の文字色ユーティリティクラスと背景色ユーティリティクラスの配色が背景ユーティリティのページに収まりきれないので子ページに分離
• 境界ユーティリティ：
  • 罫線の色に .border-{themecolor}-subtle を追加
  • 角丸の大きさに .rounded-{side}-{size} を追加
• 文字色ユーティリティ：
  • .text-{themecolor}-emphasis, .text-body-emphasis, .text-body-secondary, .text-body-tertiary を追加
  • .text-muted は非推奨に
• はみ出しユーティリティ：横方向のはみ出しクラス（.overflow-x-{value}）と縦方向のはみ出しクラス（.overflow-y-{value}）を新設
• オブジェクト・フィットユーティリティ（.object-fit-{breakpoint}-{value}）を新設
• 空白ユーティリティ：ギャップユーティリティが display: grid の要素だけでなく display: flex の要素でも使用可能になり、上下にギャップ（.row-gap(-{breakpoint})-{size}）、左右にギャップ（.column-gap(-{breakpoint})-{size}）を新設
• テキストユーティリティ：文字の太さに中間の太さの文字クラス（.fw-medium）を追加

大きな設定の変更は見られない。

【コンポーネント】

• ダークドロップダウンにナビゲーションバーで使用する場合の設定を追加

【コンポーネント】

• モーダルのタイトルの設定：h5.modal-title から h1.modal-title.fs-5 に変更
• ナビゲーションバーのオフキャンバス：form.d-flex に .mt-3 を追加

【導入】

• クイックスタート：Popperのバージョンが2.11.5から2.11.6に

【レイアウト】

• グリッドシステム：列とガターの変数に $grid-row-columns を追加

【コンポーネント】

• 折り畳み：parent オプションのタイプから jQuery object を外し、デフォルトを false から null に修正
• ポップオーバー：カスタム containerにモーダルダイアログ内のポップオーバーの設定方法を追加
• スクロールスパイのオプション
  • threshold を追加
  • rootMargin のデフォルトを 0px 0px -40% から 0px 0px -25% に修正
  • target のタイプから jQuery object を外し、デフォルトを null に修正

【実例】

• 注目事項にタイトル付き注目事項を追加

各解説の"v5.2.0"での変更はv5.2.0-beta1での変更も含むので、v5.2.0-beta1の変更も合わせて参照して下さい。

【導入】

• はじめに：コミュニティツールからSlackルームを外し（v5.2.0公開時に閉鎖）、GitHubディスカッションを追加
• JavaScript
  • JavaScriptフレームワークでの使用を新設
  • jQuery関連とJavaScriptを無効にする項目を後ろに回して更新
  • JavaScriptの記述：document.getElementById('ID') ⇒ document.querySelector('#ID')
• webpackでの使用とParcelでの使用を全面的に刷新し、Viteでの使用を新設

【カスタマイズ】

• Sassのカスタマイズのマップから削除：$theme-colors の設定位置を変更
• CSS変数：Root変数から --bs-heading-color を削除

【コンテンツ】

• 文字の体裁の表示見出し：設定するSass変数に $display-font-family と $display-font-style を追加

【フォーム】

• チェック＆ラジオ：チェックボックスの無効化に不確定チェックボックスでの実例を追加
• フローティングラベル：インプットグループを新設

【コンポーネント】

• 各コンポーネントのJavaScriptの記述：document.getElementById('ID') ⇒ document.querySelector('#ID')
• アラート：アイコン付きで使うアイコンの width と height を 24 ⇒ 1rem に変更
• ボタングループ：ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）
• カルーセル：.carousel の data-bs-interval="false" の設定は不可になり削除
• ドロップダウン：ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）
• リストグループのチェックボックスとラジオボタン
  • ラベルの設定が input.form-check-input 内の iaria-label 属性から⇒ input.form-check-input の後に label.form-check-label の追加に変更
  • ラジオボタンでの実例を追加
  • アイテム全体をクリックする際の設定：label.form-check-label に .stretched-link（伸長リンク）の追加に変更
• ナビゲーションバー
  • ドロップダウンの設定：リンクとドロップダウンを関連付けるための a.nav-link.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）
  • オフキャンバスのDarkバージョンを新設
• オフキャンバス
  • ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に
  • Darkオフキャンバスを新設
• プログレスバー：.progress-bar に aria-label を入れる
• スクロールスパイ：非表示要素を新設

【ユーティリティ】

• ユーティリティAPI
  • ユーティリティを追加、ユーティリティを変更、ユーティリティを削除で、bootstrap/scss/utilities/api の設定位置を変更
  • ユーティリティを削除で、map-remove() Sass関数を使用する方法を追加
  • ユーティリティを一度に追加、削除、変更を新設
• カラーユーティリティ：scss/_variables.scss 内の $text-muted の値（.text-muted の色）をv5.2.0-beta1で変更したが、.bg-dark 上では文字が全く見えないので元に戻した

【拡張】

• Bootstrapアイコン：Composerでインストール可能になったのでnpmをPackage managerに変更

各解説ではv5.2.0-beta1での変更も"v5.2.0"と記載しています。

サイトのデザインを刷新

• ナビゲーションバーなどの色がより鮮やかに
• サイドバーのセクションが折りたたまれないシンプルなレイアウトに（モバイルではオフキャンバスで表示）
• コピーボタンはアイコンのみに
• 一部の見本に"StackBlitzで編集"ボタンを設置

【導入】

• はじめに
  • ページを刷新
  • クイックスタート：Popperのバージョンが2.10.2から2.11.5に
• JavaScript：JavaScriptの記述をES6(ES2015)に変更
• webpack：コンパイル済SassのインポートのJavaScriptの記述をES6(ES2015)に変更
• Parcel
  • Bootstrapのインストール：構成ファイルの内容が一部変更
  • アプリケーションの構築：設定方法がParcel2に対応

• Sassのカスタマイズ
  • scss/_maps.scss を新設
  • Bootstrapを部分的に組み込む場合、必須でインポートするSassファイルに bootstrap/scss/maps を追加
• Sassオプション：$enable-grid-classes から $enable-container-classes を分離して追加
• カラーシステム
  • ユーティリティの生成でインポートするSassファイルに bootstrap/scss/maps を追加
  • カラーSassマップにblack（$black）を追加
• CSS変数
  • Root変数：--bs-black, --bs-border-*, --bs-heading-color, --bs-link-*, --bs-code-color, --bs-highlight-bg を追加
  • 接頭辞を新設、$variable-prefix 変数を $prefix に省略

【レイアウト】

• Z-index：$zindex-toast: 1090; を追加

【コンテンツ】

• Reboot
  • CSS変数：「CSS変数の追加」にもとの「CSS変数」を加えて更新し、--#{$variable-prefix} を --#{$prefix} に変更
  • 基準のフォントスタック：Arial（基本のwebフォールバック）の位置を移動し、Helvetica Neue（古いiOSとmacOSバージョンのUIフォント）のコメント表記を修正
  • 横仕切り線：「文字の体裁」から移動し、線の幅の設定を height から border-top プロパティにスタイル変更
  • ユーザー入力：<kbd> タグを入れ子にしても太字にならなくなった
• テーブル
  • デフォルトのテーブルでは、thead と tbody や tbody と tfoot の仕切り線の太さ(2px)の設定がなくなる。
  • 仕切り線のオプトインクラスとして、.table-group-divider を新設
  • 列が縞ストライブのテーブル用に .table-striped-columns を新設

【フォーム】

• チェック&ラジオ
  • 不確定チェックボックス：JavaScriptの記述をES6(ES2015)に変更
  • 順序を反転用に .form-check-reverse を新設
• フローティングラベル
  • 選択メニューとレイアウトの設定で .form-select 内の [aria-label] を削除
  • 読み取り専用プレーンテキストを新設
• 入力検証
  • カスタムスタイル：JavaScriptの記述をES6(ES2015)に変更

【コンポーネント】

• 各コンポーネントのJavaScriptの記述をES6(ES2015)に変更

• ほぼすべてのコンポーネントをCSS変数を使用するように更新。Sassは引き続きすべてをサポートするが、各コンポーネントは、コンポーネントの基本クラス（.btn など）にCSS変数を含めるように更新され、Bootstrapのよりリアルタイムのカスタマイズを可能にした。

  次のコンポーネントは、CSS変数を使用した構築に移行：

  • アコーディオン
  • アラート
  • バッジ
  • パンくずリスト
  • ボタン
  • カード
  • ドロップダウン
  • リストグループ
  • モーダル
  • ナビゲーションバー
  • ナビ＆タブ
  • オフキャンバス
  • ページ送り
  • ポップオーバー
  • プログレスバー
  • スピナー
  • トースト
  • ツールチップ

  CSS変数の使用法は、Bootstrap v6まではやや不完全であり、これらを全面的に実装したいが、重大な変更を引き起こすリスクがある。可能な限り、CSS変数の数を増やしていくが、v5では実装がわずかに制限される可能性がある。例えば、ソースコードで $alert-border-width: var(--bs-border-width) を設定した場合（デフォルトでは $alert-border-width: $border-width）、何らかの理由で $alert-border-width * 2 を実行していると、独自のコードで潜在的なSassが壊れる。

• すべてのコンポーネントのオプションで data-bs-config（JSON文字列として単純なコンポーネント構成が格納可能）をサポート
• バッジ
  • 背景色：文字&背景色ヘルパーが新設されたので、span.badge.text-bg-{themecolor} の設定も可能に
• ボタン
  • v3のDefault風ボタンの設定（裏技）をCSS変数を使用したものに変更
  • サイズの設定にCSS変数を使用した設定方法を追加
• カード
  • カードの背景と色：文字&背景色ヘルパーが新設されたので、.card.text-bg-{themecolor} の設定も可能に
• ドロップダウン
  • ドロップの方向に中央揃え（.dropdown-center）とドロップアップの中央揃え（.dropup-center）を新設
  • ドロップの方向のドロップライトをドロップエンドに、ドロップレフトをドロップスタートに名称変更
  • ドロップスタートの分離ボタンの設定：全体を div.btn-group で囲む必要がなくなり、.btn-group.dropstart の role="group" も不要に
  • ドロップメニューのフォーム：button.btn.dropdown-toggle に [data-bs-auto-close="outside"] を入れる
• モーダル
  • モーダルでトースト表示（裏技）：.modal-dialog.modal-sm ⇒ .modal-dialog[style="max-width:350px"]
• ナビゲーションバー
  • .navbar-light が非推奨に（.navbar の中にスタイル設定が組み込まれたため）
  • フォーム：<form> 要素にアクセシビリティとして role="search" を入れる
  • ナビゲーションバーの配置に最下部に達するまで固定されるナビゲーションバーを新設
• ナビ&タブ
  • JavaScript動作
    • div.tab-pane に、tabindex="0" 属性を入れる
    • 各ナビゲーションに無効状態のタブ/ピルを追加
• オフキャンバス
  • オフキャンバスを閉じるボタン：設定が .btn-close.text-reset から .btn-close に変更
  • 実例の項目を整理し、静的な背景を新設
  • レスポンシブ（.offcanvas-{breakpoint}）を新設
  • オプション：backdrop のタイプに "string'static'" を追加
  • イベント：hidePrevented.bs.offcanvas を追加
• ポップオーバー
  • 実例の項目を整理し、カスタムポップオーバーを新設
  • Sass変数：使用する変数の削減により $popover-arrow-color, $popover-arrow-outer-color は非推奨に
  • setContent メソッドを追加
• スクロールスパイ
  • 交差オブザーバー API(Intersection Observer API)を使用するように書き直され、相対的な親ラッパーが不要に（設定がナビゲーションとリストグループに限定する必要がなくなった）
  • 実例の項目を整理し、単純なアンカーでの設定を新設
  • オプション：offset と method を廃止し、rootMargin と smoothScroll を追加
• トースト
  • ライブの実例の設定：div.position-fixed に .toast-container を追加し、$zindex-toast を追加したので z-index の設定は不要に
  • 縦積みの設定：div.toast-container に .position-static を追加
  • 配色：文字&背景色ヘルパーが新設されたので、.toast.text-bg-{themecolor} の設定も可能に
  • 配置の設定：不要なため .toast から .position-absolute を外す
  • isShown メソッドを追加
• ツールチップ
  • 実例の項目を整理し、カスタムツールチップを新設
  • Sass変数：使用する変数の削減により $tooltip-arrow-color は非推奨に
  • setContent メソッドを追加

【ヘルパー】

• 文字&背景色ヘルパーとして .text-bg-{themecolor} を新設
• 位置ヘルパー：最下部に達するまで固定 .sticky-bottom とレスポンシブで最下部に達するまで固定 .sticky-{breakpoint}-bottom を新設

【ユーティリティ】

• ユーティリティAPI
  • CSS変数名の変更用に css-variable-name オプションを追加
  • クラスの設定：class: null の場合、values キーごとにクラスを生成できるように
  • ユーティリティの追加、変更、削除する際のインポートするSassファイルに、bootstrap/scss/maps, bootstrap/scss/mixins, bootstrap/scss/utilities/api を追加
• 背景ユーティリティ：RGBカラーと不透明度のマップの設定が scss/_variables.scss から新設の scss/_maps.scss に変更
• 境界ユーティリティ
  • CSS変数を使用しての構築に移行
  • 罫線の色にコンポーネント内での設定の実例を追加
  • 不透明度を新設
  • scss/_variables.scss 内の $border-radius を 0.25rem ⇒ 0.375rem、$border-radius-sm を 0.2rem ⇒ 0.25rem、$border-radius-lg を 0.3rem ⇒ 0.5rem にそれぞれ変更し、関連する以下も若干丸みを帯びたデザインに変更
    • サムネイル
    • フォームコントロール
    • アコーディオン
    • アラート
    • バッジ
    • ボタン
    • カード
    • ドロップダウン
    • リストグループ
    • モーダル
    • タブナビゲーション/ピルナビゲーション
    • ページ送り
    • ポップオーバー
    • プログレスバー
    • トースト
    • ツールチップ
    • 角丸ユーティリティクラス
  • 角丸の大きさに .rounded-4, .rounded-5 を追加
• カラーユーティリティ
  • scss/_variables.scss 内の $text-muted の値を変更し、.text-muted の色合いが .text-secondary と同じから .text-body より薄めなものに
  • RGBカラーと不透明度のマップの設定：scss/_variables.scss から新設の scss/_maps.scss に変更
• テキストユーティリティ：文字の太さユーティリティクラスに若干太めの文字（.fw-semibold）を追加

【拡張】

• アイコン：オプションのアイコンライブラリにTabler Iconsを追加
• Bootstrapアイコンを新設

【実例】

• オフキャンバス付きナビゲーションバーとスクロールして最下部に達するまで最下部に固定されるナビゲーションバーを新設
• リストグループスニペットに設定例を追加

• 設定上の変更は見られない

【コンポーネント】

• ボタンの設定：v5.1.2で .btn のスタイルに align-self: center を追加していたのを削除

【導入】

• クイックスタート：Popperのバージョンが2.10.1から2.10.2に

【フォーム】

• 切替スイッチ：input.form-check-input に role="switch" 属性の設定が必要に

【コンポーネント】

• モーダルの切替：モーダル1にある「モーダル2を開く」ボタンの設定からも data-bs-dismiss="modal" を削除

• bootstrap.css だけでなく、bootstrap-reboot.css, bootstrap-grid.css にも :rootCSS変数を組み込むことになった

【導入】

• クイックスタート：Popperのバージョンが2.9.2から2.10.1に
• webpack：JavaScriptのインポートに全てをインポートする方法を追加

【カスタマイズ】

• Sass オプション：$enable-smooth-scroll を追加
• CSS変数：:root CSS変数に --bs-body-color-rgb を追加し、--bs-body-bg-rgb の値を変更

【コンテンツ】

• Reboot：CSS変数の追加を追加

【コンポーネント】

• ボタン
  • ボタンの無効化：a.btn.btn-{themecolor}.disabled の場合には、href 属性とtabindex="-1" の設定が不要に（v4.6.1でバックポート）
  • リンク機能の警告を注意書きから拡張更新（v4.6.1でバックポート）
• ナビゲーション付きカード、ドロップダウン、リンク付きリストグループ、ナビゲーション、ナビゲーションバー、ページ送りの無効リンクの場合には、href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に（v4.6.1でバックポート）
•  モーダル
  • モーダルの切替：v5.1.0でモーダル2にある「モーダル1に戻る」ボタンを押してもモーダル1に戻らないバグが発生していたのを修正（設定の変更あり）
  • YouTube動画の埋め込み：YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例を追加
• プレースホルダ：使い方の見本で a.btn.btn-{themecolor}.disabled.placeholder に tabindex="-1" が抜けていたので追加

【ヘルパー】

• 積み重ねヘルパー：実例の横並びフォームの設定を変更

【ユーティリティ】

• 背景ユーティリティ：v5.1.0で .bg-body の color が .text-body と同一になるバグが発生していたのを修正（設定の変更なし）

【導入】

• クイックスタート：Popperのバージョンが2.9.2から2.9.3に
• ツールの構築を開発に貢献に名称変更（構築ツールは、Bootstrapを依存関係として使用することとは関係なく、貢献するためのものであることを明確にするためらしい）

【カスタマイズ】

• BootstrapのソースSassファイルをインポートする際にrootの設定がオプションから必須に、オプションの設定例はコンポーネントだけでなく、ユーティリティやヘルパーも表示
• カラーシステムにユーティリティの生成を追加
• CSS変数
  
  • :root CSS変数にグレースケールカラーの変数（--bs-gray-*）, RGBカラーの変数（--bs-{color}-rgb）, <body> スタイルの変数（--bs-body-*）を追加
  • グリッドブレークポイントを追加

【レイアウト】

• CSSグリッド（.grid > .g-col-*）を新設
• グリッド：行列グリッドに行によって列数を変えるを削除⇒それに伴い横並びフォームで各インプットが幅100%に表示されるバグも解消
• Z-indexの設定を一部変更

【コンテンツ】

• Reboot：CSS変数を新設
• 文字の体裁：横仕切り線を追加

【コンポーネント】

• プレースホルダを新設
•  アラート
  • ライブの実例を新設
  • JavaScriptの動作のトリガーの一部を初期化に分離
• ボタン：モバイルのみブロック表示（<a> タグの場合）の設定を変更
• 折り畳み：水平方向に折り畳む（.collapse.collapse-horizontal）を新設
• モーダル：データ属性経由にモーダルを閉じる設定も追加
• ナビゲーションバー：オフキャンバスナビゲーションバーを新設
• オフキャンバス：データ属性経由にオフキャンバスを閉じる設定も追加
• トースト
  • 非表示にする際に .toast に .hide の追加は不要に
  • 使用方法にトリガーを追加

【ユーティリティ】

• 不透明度ユーティリティクラス（.opacity-{value}）を新設
• ユーティリティAPI
  • APIのオプションに css-var, local-vars を追加
  • APIの説明にプロパティ、値、CSS変数ユーティリティ、ローカルCSS変数を追加し、カスタム・クラスプレフィックスはクラスに、レスポンシブ・ユーティリティはレスポンシブに、印刷ユーティリティは印刷時に変更し、ユーティリティの変更は削除
  • APIの使用に再定義ユーティリティを追加
• 背景ユーティリティ・カラーユーティリティ
  • CSS変数を使用しての構築に移行（.bg-{color} と .text-{color} の {color} のプロパティがHEX値からRGBテーマカラーCSS変数と透明度アルファ値CSS変数に）
  • 背景ユーティリティとカラーユーティリティのそれぞれ不透明度を新設
  • .bg-black と .text-black を追加
  • .text-black-50 と .text-white-50 はv5.1.0で非推奨となり、v6.0.0で削除予定

【ヘルパー】

• 積み重ねヘルパー（.vstack, .hstack）を新設
• 縦仕切り線（.vr）を新設
• 各ヘルパーにSassの項目を追加

【実例】

• スニペットカテゴリにフッタ、ドロップダウン、リストグループ、モーダルを新設

【レイアウト】

• グリッド：行列グリッドに行によって列数を変えるを追加

【フォーム】

• フォームコントロール：読み取り専用コントロール（[readonly]）にテキストを入れる場合は、[placeholder] ではなく [value] で設定

【コンポーネント】

• ボタン、トーストの各プラグインに getInstance メソッドを追加
• アラート、ボタン、カルーセル、折り畳み、ドロップダウン、リストグループ、モーダル、ナビ&タブ、オフキャンバス、ポップオーバー、スクロールスパイ、トースト、ツールチップの各プラグインに getOrCreateInstance メソッドを追加
• バッジ：バッジの設定を見出しとボタンに分け、さらに位置付けを新設
• カード：水平スタイルのイメージの設定を img.card-img から img.img-fluid.rounded-start に変更

【ユーティリティ】

• ユーティリティAPI
  • 優先度を追加し、一部の設定例の出力CSSに !important を追加
  • ユーティリティの変更にレスポンシブを有効にするを追加

• 設定上の変更は見られない

【導入】

• クイックスタート：Popperのバージョンが2.9.1から2.9.2に

【レイアウト】

• グリッド：mixinの設定に @include make-col(); を追加
• Z-index：$zindex-modal-backdrop を1040に、$zindex-offcanvas を1050に入れ替え

【コンポーネント】

• アコーディオン：常時開示を新設
• アラート：アイコン付きを新設
• ドロップダウン：autoClose オプションを追加し、自動で閉じる動作を新設
• オフキャンバス：配置に上側にオフキャンバス（.offcanvas.offcanvas-top）を追加

• ほとんどすべてのコンテンツ、フォーム、コンポーネント、ユーティリティの各解説に「Sass」の項目を追加
• Emmetショートハンド集を新設

【導入】

• クイックスタート：Popperのバージョンが2.6.0から2.9.1に
• ブラウザとデバイス：サポート対応ブラウザの変更（Legacy Edgeの表記を削除など）
• Parcelを使用してプロジェクトにBootstrapを組み込む方法を追加
• JavaScript：コンストラクタのCSSセレクタを追加（すべてのプラグインで最初の引数としてCSSセレクタの受け入れが可能になり、DOM要素か任意の有効なCSSセレクタを渡して、プラグインの新しいインスタンスが作成可能に）

【カスタマイズ】

• Sassのカスタマイズ：インポート、変数のデフォルト値で変数、mixinの設置場所の変更（4.6.1でバックポート）
• ノンブロッキング・ファイルを更新

【レイアウト】

• Z-index：オフキャンバス・コンポーネントの新設に伴い $zindex-offcanvas を追加し、それより手前に表示されるものの値が10ずつ増える

【コンポーネント】

• オフキャンバス（.offcanvas-*）を新設
• v5でクラス廃止となったメディアオブジェクトをFlexユーティリティに移動
• ドロップダウン：flip オプションを廃止
• リストグループ：番号付きを新設
• モーダル：モーダルの切替を新設
• ナビゲーションバー
  • ブランドの項目をテキスト、イメージ、イメージとテキストに分割
  • イメージとテキスト：img.align-top から img.align-text-top に変更

【実例】

• スニペットカテゴリを新設
• オフキャンバスをオフキャンバスナビゲーションバーに名称変更し、カテゴリを実験からナビゲーションバーに移動（実験カテゴリは削除）

【導入】

• クイックスタート：Popperのバージョンが2.5.4から2.6.0に
• ファイルの内容：bootstrap-utilities.css にはユーティリティだけでなく、ヘルパーも組み込まれるようになった。
• JavaScript：コンポーネント間でロジックを相互化できるようにするベースコンポーネント用に js/dist/base-component.js を新設
• ツールの構築：SassコンパイラのツールがNode SassからDart Sassに変更され、解説（v4.6.0でバックポート）も追加
• 右書き：左書きと右書きの同時使用を追加

【カスタマイズ】

• カスタマイズの概要：CSPと組み込みSVGを追加（v4.6.0でバックポート）
• Sass オプション：$enable-deprecation-messages のデフォルトの設定が false から true に変更
• 常にHTTPSを使用を更新

【フォーム】

• インプットグループ：チェックボックスとラジオボタンの設定で .form-check-input に .mt-0 を追加
• フォームの検証状態のカスタマイズ：form-validation-state mixinに新しく3つのオプションパラメータ tooltip-color, tooltip-bg-color, focus-box-shadow を追加

【コンポーネント】

• カルーセル
  • スライドコントロールの設定をリンクボタンからボタンに変更（v4.6.1でバックポート）
  • インジケータの設定をリストからボタンに変更
  • タッチスワイプを無効にするを新設（v4.6.0でバックポート）
  • slide オプションの名称を ride に戻す
• ドロップダウン
  • ドロップダウンメニューには、ドロップダウンの位置が静的な場合は data-bs-popper="static" 属性が設定され、ドロップダウンがナビゲーションバーにある場合は data-bs-popper="none" が設定されることになった。これはJavaScriptによって追加され、Popperのポジショニングに干渉することなくカスタムのポジショニングスタイルを使用するのに役立つ。
  • ドロップダウンのすべてのイベントがドロップダウン切替ボタンで発動され、親要素にバブルアップされることになった
  • ドロップメニューの配置に配置オプションを追加
  • オプション
    • boundary のデフォルトの設定が scrollParent から clippingParent に変更
    • reference のタイプに object を追加
    • v5.0.0-beta1で廃止された offset が復活
    • popperConfig のタイプに function を追加
• ナビ&タブ：JavaScript動作のタブ/ピル部分が a.nav-link[href] から button.nav-link[data-bs-target type="button"] に変更（v4.7.0でバックポート）
• ナビゲーションバー：スクロールを新設（v4.6.0でバックポート）
• ポップオーバー
  • 無効な要素の設定方法を変更
  • オプション
    • fallbackPlacements の設定タイプとデフォルト値を変更
    • boundary のデフォルトの設定が scrollParent から clippingParent に変更
    • v5.0.0-beta1で廃止された offset が復活
    • popperConfig のタイプに function を追加
• トースト：設定例にライブを新設（v4.6.0でバックポート）
• ツールチップ
  • 無効な要素の設定方法を変更
  • オプション
    • fallbackPlacements の設定タイプとデフォルト値を変更
    • boundary のデフォルトの設定が scrollParent から clippingParent に変更
    • v5.0.0-beta1で廃止された offset が復活
    • popperConfig のタイプに function を追加

【ヘルパー】

• 比率のカスタマイズ：CSSカスタムプロパティを --aspect-ratio から --bs-aspect-ratio に名称変更
• 伸長リンク：テーブルの場合（裏技）は、機能しない場合があるため削除（v4.6.0でバックポート）
• 視覚的に非表示ヘルパー：:focus-within を使用して、.visually-hidden-focusable をコンテナでも機能するように拡張

【ユーティリティ】

• ユーティリティAPI
  • APIを使用してユーティリティの追加、変更、削除の設定で @import "bootstrap/scss/functions";, @import "bootstrap/scss/variables"; の追加が必要に
  • ユーティリティの変更にユーティリティの名前を変更を追加
• 背景ユーティリティがカラーユーティリティから分離
• 背景ユーティリティ、カラーユーティリティ、表示ユーティリティにSassの項目を追加

【拡張】

• アプローチ：コード規約を追加（v4.6.0でバックポート）