Bootstrap5設置ガイド

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

【導入】

• 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 にはユーティリティだけでなく、ヘルパーも組み込まれるようになった。
• ツールの構築：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.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.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でバックポート）

【導入】

• Popper v2に対応（バージョンが1.16.1から2.5.4に）
• ツールの構築：RTLCSSを追加
• RTL（右書き）モードを導入
  それに伴い、水平方向に依存する変数、ユーティリティ、mixinは、より論理的な名前に名称変更 — left（左）と right（右）の代わりに start（行頭）と end（行末）を使用

【カスタマイズ】

• カラー関数：scale-color() 関数を shift-color() 関数に変更

【コンポーネント】

• 他のライブラリとの競合を防ぐため、すべてのJavaScriptプラグインの data 属性に名前空間 bs を追加（例：data-toggle ⇒ data-bs-toggle）
• パンくずリスト
  • .breadcrumb の設定で padding を 0 に、background-color と border-radius の設定を削除して外観を簡素化
  • 仕切り（旧セパレータ）の変更や削除をするのに、--bs-breadcrumb-divider CSSカスタムプロパティを入れる方法などが追加
• ドロップダウン
  • ドロップレフト：.dropleft ⇒ .dropstart（RTL導入に伴いクラス名変更）
  • ドロップライト：.dropright ⇒ .dropend（RTL導入に伴いクラス名変更）
  • ドロップメニューの配置（RTL導入に伴いクラス名変更）
    • .dropdown-menu(-{breakpoint})-left ⇒ .dropdown-menu(-{breakpoint})-start
    • .dropdown-menu(-{breakpoint})-right ⇒ .dropdown-menu(-{breakpoint})-end
  • Popper v2対応に伴い、offset オプションを削除（popperConfig パラメータを使用すれば引き続き実行可能）
• モーダル：show オプションを廃止
• ポップオーバー、ツールチップ
  • customClass オプションが追加（v4.6.0でバックポート）
  • Popper v2対応に伴い、offset オプションを削除（popperConfig パラメータを使用すれば引き続き実行可能）し、fallbackPlacement オプションは、 fallbackPlacements に名称変更
• トースト
  • 縦積み用のコンテナとして .toast-container を追加
  • 位置ユーティリティクラスを使用した位置設定が可能に

【ユーティリティ】

• ユーティリティAPIに state, rtl オプションが追加
  ユーティリティの削除にRTLのユーティリティを削除が追加
• 枠の罫線ユーティリティ（RTL導入に伴いクラス名変更）
  • .border-left ⇒ .border-start
  • .border-right ⇒ .border-end
  • .border-left-0 ⇒ .border-start-0
  • .border-right-0 ⇒ .border-end-0
• 境界の角丸ユーティリティ（RTL導入に伴いクラス名変更）
  • .rounded-left ⇒ .rounded-start
  • .rounded-right ⇒ .rounded-end
• 横の配置ユーティリティ（RTL導入に伴いクラス名変更）
  • .float(-{breakpoint})-left ⇒ .float(-{breakpoint})-start
  • .float(-{breakpoint})-right ⇒ .float(-{breakpoint})-end
• 位置ユーティリティ
  • .left-{position} ⇒ .start-{position}（RTL導入に伴いクラス名変更）
  • .right-{position} ⇒ .end-{position}（RTL導入に伴いクラス名変更）
  • 要素を中央に配置：.translate-middle-x, .translate-middle-y が追加
• マージンユーティリティ（RTL導入に伴いクラス名変更）
  • .ml(-{breakpoint})-{size} ⇒ .ms(-{breakpoint})-{size}
  • .mr(-{breakpoint})-{size} ⇒ .me(-{breakpoint})-{size}
• パディングユーティリティ（RTL導入に伴いクラス名変更）
  • .pl(-{breakpoint})-{size} ⇒ .ps(-{breakpoint})-{size}
  • .pr(-{breakpoint})-{size} ⇒ .pe(-{breakpoint})-{size}
• 文字の配置ユーティリティ（RTL導入に伴いクラス名変更）
  • .text(-{breakpoint})-left ⇒ .text(-{breakpoint})-start
  • .text(-{breakpoint})-right ⇒ .text(-{breakpoint})-end

【実例】

• チートシートとRTL版チートシートを新設（左書きと右書きの配置の違いを比較）
• 各CDNファイルの提供元をBootstrapのCDNに合わせてjsDelivrに変更

【導入】

• CDNの提供元：StackPathからjsDelivrに変更（v4.5.3でバックポート）
• サポート対応ブラウザ：Microsoft Edge Legacyのサポートを終了

【カスタマイズ】

• カラー関数：color-level(), lighten(), darken() の各関数と $level, $theme-color-interval の各変数などを廃止し、tint-color(), shade-color(), scale-color() の各関数と $weight 変数などを使用
• テーマカラー：$dark の設定：$gray-800 ⇒ $gray-900
  これに伴い、.table-dark, .btn-dark, .btn-outline-dark, .alert-dark, .list-group-item-dark, .link-dark, .border-dark, .text-dark, .bg-dark のカラー設定も変更
• root変数の --bs-font-sans-serif や基準のフォントスタックに "Liberation Sans" が追加（v4.6.0でバックポート）

【フォーム】

• フォームのファイル選択：.form-control クラスを使用するようにし、.form-file-* クラスは廃止、任意のJavaScriptは不要に
• フォームの入力コントロール、選択メニューの無効化設定の解説が追加
• フォームのチェックボックス切替ボタンとラジオ切替ボタンの無効化の設定が可能に
• フローティングラベル（.form-floating）を完全にサポートしたので実例からフォームコンポーネントに昇格
• 検証フィードバックのインプットグループで境界線の角丸が欠落するバグを解消（v4.6.0でバックポート）

【コンポーネント】

• アコーディオン
  • 「折り畳み」から独立した項目に移動。
  • カードコンポーネントクラス（.card-*）から独自のアコーディオンコンポーネントクラスの設定に変更（.accordion-* を新設）
  • 外枠線のない設定が可能に（.accordion-flush を使用）
• ブロックボタン：.btn-block を廃止し .d-grid.gap-{size} を使用した設定に変更
• ページ送りの現在の位置：span.visually-hidden は不要に（v4.6.0でバックポート）

【ユーティリティ】

• ユーティリティAPIにAPIの使用を追加
• 境界の角丸
  • 正円の設定を調整（変換ユーティリティクラス等を使用）
  • 角丸の大きさ： .rounded-{0|sm|lg} から .rounded-{0|1|2|3} にクラス名を変更
• CSS Gridレイアウトに対応した .d(-{breakpoint})-grid（グリッド表示ユーティリティ）と .gap(-{breakpoint})-{size}（ギャップユーティリティ）クラスを追加
• はみ出しユーティリティ：.overflow-visible, .overflow-scroll を追加
• 文字の太さとイタリック体：font-{style} ユーティリティは .fst-{style} と、.font-weight-{weight} ユーティリティは .fw-{weight} クラス名を変更

【導入】

• Popper.jsのバージョンが1.16.0から1.16.1に（v4.5.1でバックポート）
• JavaScriptのHTMLサニタイザーの whitelist を allowlist に名称変更し、これに伴いポップオーバーとツールチップのオプション whiteList も allowList に名称変更
• webpackの設定で postcssOptions キーに対応

【カスタマイズ】

• $theme-colors マップにカラーを追加する場合は、一旦カスタムカラーの変数を設定する必要あり
• 全てのカラー：Sassマップの $green（#28a745 ⇒ #198754）と $cyan（#17a2b8 ⇒ #0dcaf0）の color が変更
  それに伴い {xxx}-success と {xxx}-info の color も変更

【フォーム】

• フォームの入力検証：サーバー側の検証設定でアクセシビリティの設定を追加（v4.5.1でバックポート）

【コンポーネント】

• ボタングループでのチェック/ラジオ切替ボタンをボタンプラグインからボタングループに移動し、アクセシビリティの設定の追加と切替ボタンの設定を変更
• カルーセルのダーク・バージョン用に .carousel-dark を新設
• 閉じるボタン：.close を .btn-close にクラス名変更し、span[aria-hidden="true"] > × が不要に（アラート、モーダル、トーストも同様）
  暗めの背景に対応するホワイト・バージョン用に .btn-close-white を新設
• カードコンポーネントによるアコーディオンの設定を調整
• ドロップダウンメニューのダーク・バージョン用に .dropdown-menu-dark を新設
• 縦積みピルナビゲーション：グリッドクラスからFlexユーティリティクラスによる設定に変更
• スクロールスパイ：<body> 以外の要素に [data-spy="scroll"] を設定する場合は [tabindex="0"] を入れる
• トースト：delay（非表示の遅延時間）のデフォルトが 500（0.5秒）から 5000（5秒）に変更

【ヘルパー】

• 動画の埋め込みなどアスペクト比を維持するヘルパークラスが .embed-responsive.embed-responsive-**by* から .ratio.ratio-**x* にクラス名変更し、子要素のクラス設定は不要になり、.embed-responsive-item は廃止（項目も「動画の埋め込み」から「比率ヘルパー」に名称変更）。
  Sassマップも $embed-respond-aspect-ratio から $ratio-aspect-ratios に名称変更
  Sassファイルも scss/helpers/_embed.scss から scss/helpers/_ratio.scss に名称変更
• 支援技術を除くすべてのデバイスの要素を非表示にするクラスを .sr-only, .sr-only-focusable から .visually-hidden, .visually-hidden-focusable にクラス名変更（項目も「スクリーンリーダー」から「視覚的に非表示」に名称変更）
  Sassファイルも scss/helpers/_screenreaders.scss から scss/helpers/_visually-hidden.scss に名称変更

【ユーティリティ】

• ポインターイベント：アクセシビリティの設定が追加
• 罫線の太さユーティリティクラス（.border-{size}）を新設

【拡張】

• アイコン：オプションのアイコンライブラリにCoreUI Iconsが追加（v4.5.3でバックポート）

【項目の移動】

• 「導入」のテーマの解説を「カスタマイズ」として独立した項目に変更
• 「レイアウト」の概要をブレークポイント、コンテナ、Z-indexに分離し、グリッドの一部を列アイテム、ガターに分離
• フォームの解説を「コンポーネント」より独立した項目に変更
  • インプットグループを「コンポーネント」から「フォーム」に移動
• コード（コード表示、コードブロック、変数、ユーザー入力、サンプル出力）の解説を「コンテンツ」の独立した項目からReboot内に移動
• ボタンの「ボタンのアクティブ化」の項目はボタングループに移動
• ボタンプラグインのチェックボックスとラジオボタンは、「フォーム」のチェックボックスとラジオボタンの切替ボタンに移動
• 閉じるアイコンボタンを「ユーティリティ」から「コンポーネント」に移動（名称も「閉じるボタン」に変更）
• 画像置換は .text-hide クラスとmixinの削除とともに削除
• 「ユーティリティ」のうち、クリアフィックス、動画の埋め込み、位置ユーティリティの一部、スクリーンリーダー、伸長リンク、テキストの省略を「ヘルパー」として別項目に分離
  ※おそらくCSSプロパティが単一のクラスは「ユーティリティ」に、別途mixinが必要だったりCSSプロパティが複数（レスポンシブを除く）のクラス（ユーティリティAPIが使用できないもの）は「ヘルパー」に分離したと考えられる

【導入】

• 基本のテンプレート
  • レスポンシブ・メタタグの設定で shrink-to-fit=no が不要に
  • jQueryの設置が不要に
• ファイルの内容
  • ユーティリティクラスのみ組み込んだCSSファイル（bootstrap-utilities.css と bootstrap-utilities.min.css）を提供
  • ES Modulesに対応したJSファイル（bootstrap.esm.js と bootstrap.esm.min.js）を提供
• ツールのセットアップ：ドキュメントの構築ツールがJekyllからHugoに変更（それに伴い構築システムでのRubyのインストールも不要に）（v4.6.0でバックポート）
• webpackにJavaScriptをインポートする場合、必要なプラグインが指定可能に
• デフォルトでRFSが有効に
• ブラウザとデバイス：「iOSでの焦点」「印刷での注意点」「Androidの標準ブラウザ」の各項目は削除
• JavaScript：データ属性APIの無効と data-api の名前空間とともに名前空間としてプラグインの名前を組み込む方法は削除

【カスタマイズ】

• Sassのカスタマイズ
  • $grays, $colors, $theme-colors, $spacers, $embed-responsive-aspect-ratios, $form-validation-states の各変数から map-merge を削除
  • color(), theme-color(), gray() 関数を削除
• Sassオプション
  • $enable-grid-classes（グリッドシステム用のCSSクラスの生成を有効/無効）を無効にしてもコンテナクラス（.container(-{fluid｜breakpoint})）の生成は無効にならなくなった
  • $enable-prefers-reduced-motion-media-query（特定のアニメーション遷移の抑制を有効/無効） ⇒ $enable-reduced-motion に名称変更
  • $enable-pointer-cursor-for-buttons（非無効のボタン要素での指カーソルの表示の有効/無効） ⇒ $enable-button-pointers に名称変更
  • $enable-responsive-font-sizes（レスポンシブ・フォントサイズの有効/無効）は $enable-rfs に名称変更し、デフォルトでtrueに設定
  • $enable-hover-media-query と $enable-print-styles（印刷を最適化するスタイル）を削除
• 全てのカラー
  • Sassマップの $blue（#007bff ⇒ #0d6efd）と $pink（#e83e8c ⇒ #d63384）の color が変更
    それに伴い {xxx}-primary と <code> の color も変更
  • Sassで定義される各カラーの陰影に応じたマップと変数を提供
• root変数
  • 背景をグラデーション化する変数（--bs-gradient）が追加
  • ブレークポイント変数（--breakpoint-**）を削除

【レイアウト】

• ブレークポイント
  • ブレークポイントに1400pxのビューポートに対応した超特大（xxl）が追加
  • media-breakpoint-down() は、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
  • media-breakpoint-between() の2番目のパラメーターは、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
• コンテナ
  • レスポンシブ・コンテナに .container-xxl が追加
  • Sassのカスタマイズ等の解説を新設
• グリッド
  • グリッドのデフォルトのガター幅が 30px（それぞれの端に15pxずつ）から 1.5rem（それぞれの端に0.75remずつ）に変更
  • .col-xxl(-*) が追加
  • 行列グリッドクラスに .row-cols(-{breakpoint})-auto と .row-cols-xxl-* が追加
  • 「複数行の等幅」の解説は削除
• 列アイテム
  • 水平方向の配置クラスに .justify-content-evenly（列の間隔を両端から均等に配置）が追加
  • グリッド列の順序変更：.order(-{breakpoint})-* の設定できる整数が、0～12より0～5に変更され、.order-last の設定も order：13 から order：6 に変更
  • .row を設定せず、.col(-{breakpoint})-* + .col(-{breakpoint})-*...だけでグリッドの設定が可能に
• ガター
  • グリッドにレスポンシブでガター（列間の余白）を設定する .g({x|y})(-{breakpoint})-{size} を新設
  • ガターなしの設定：.no-gutters から .g(-{breakpoint})-0 に変更（レスポンシブな設定が可能に）

【コンテンツ】

• Reboot
  • ページデフォルト
    • <body> の text-align の設定：left から scss/_variables.scss の $body-text-align 変数で設定可能に
    • <body> の font-size の設定：scss/_variables.scss の $font-size-root 変数で設定可能に
  • 基本のフォントスタック：system-uiを追加し、BlinkMacSystemFontを削除
  • リンク（<a>）： text-decoration の設定が none から underline に変更（リンク部分に下線がつくことに）
  • リスト（<ul>, <ol>）：padding-left をブラウザのデフォルトの 40px から 2rem にリセット
  • コードブロック：.pre-scrollable は廃止
  • フォーム：<legend> ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
  • 引用：引用元の属性を <blockquote> の外側に配置
• 文字の体裁
  • 見出し（<h1>～<h4>, .h1～.h4）、表示見出し（.display-1～.display-6）ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
  • 表示見出しに .display-5 と .display-6 が追加
  • <small>, .small の font-size が 80% から 0.875rem に変更
  • 引用
    • </blockquote> の手前の <p> で .mb-0 は不要に
    • <blockquote> を <figure> や <figcaption> と組み合わせる設定に変更
    • 引用の配置：blockquote.blockquote.text-{center|right} から figure.text-{center|right} に変更
• テーブル
  • セルの border-top の設定がなくなったので、<thead> と <tbody> の境界線の太さで2pxの設定がなくなり、セルの padding が0.75rem⇒0.5remに変更
  • <tr> に .table-dark を追加した場合と、<th>, <td> に.table-dark を追加した場合では背景色、枠線色が異なる現象が解消
  • .table-{themecolor} 独自の border-color の設定がなくなった
  • カラーバリエーション・テーブルやアクセント付きテーブルの設定にCSSカスタムプロパティを使用
  • テーブルを入れ子にしても子テーブルは親テーブルのスタイルを継承しなくなった（子テーブル独自のスタイル設定が可能に）
  • テーブルの罫線：table.table.table-bordered に .border-{themecolor}（罫線の色ユーティリティクラス）を追加すれば罫線の色が変更可能に
  • <table>, <tr>, <th>, <td> にそれぞれ .align-**を入れてテーブルの垂直方向の配置設定が可能に
  • テーブルの見出し：thead.thead-{dark|light} から thead.table-{themecolor} に変更
  • テーブルのキャプションを上部に配置する .caption-top が新設

【フォーム】

• フォームの概要
  • フォームテキスト（旧ヘルプテキスト）：.form-text にあらかじめフォントサイズや色などを組み込んだので、<small> や .text-muted の設定は不要に
• フォームコントロール
  • 基本の設定
    • .form-group を廃止（.mb-3 などを使用）
    • フォームのラベル（<label>）には .form-label の設定が必要に
  • カラーピッカー用の設定：input[type="color"].form-control に .form-control-color を追加
  • データリスト：input.form-control で <datalist> に対応可能に
• 従来のフォーム設定（.form-xxx）とカスタム・フォーム設定（.custom-xxx）を一本化し、設定は従来的（.form-xxx）に、スタイルはカスタム・フォーム的に統一
  • 選択メニュー：select.form-control をカスタム選択メニュー（select.custom-control）のスタイルにして、新たに select.form-select に統一
  • チェックボックスとラジオボタン：チェックボックスとラジオボタン（.form-check > [input.form-check-input + label.form-check-label]）をカスタムチェックボックスとラジオボタン（div.custom-control.custom-{checkbox|radio} > [input.custom-control-input + label.custom-control-label]）のスタイルにして、.form-check > [input.form-check-input + label.form-check-label] に統一
  • ファイル選択：.form-control-file をカスタム・ファイル選択（.custom-file）のスタイルにして、新たに .form-file に統一し、さらに設定変更（label.form-file-label 内に span.form-file-text と span.form-file-button を設定）
  • レンジ入力：.form-control-range をカスタム・レンジ入力（.custom-range）のスタイルにして、新たに .form-range に統一
• チェックボックスとラジオボタン
  • ラベル無し：div.form-check > input.form-check-input.position-static から div > input.form-check-input に変更
  • 切替ボタン：.btn-group-toggle と data-toggle="buttons" は不要になり、label.btn.btn-{themecolor} > <input> から input.btn-check + label.btn.btn-{themecolor} に変更
• ファイル選択：大きめと小さめのサイズとして、.form-file-lg と .form-file-sm が追加
• レンジ入力：無効化状態に、pointer-events: none が追加
• インプットグループ
  • アドオン部分を囲む div.input-group-prepend や div.input-group-append が不要に（.input-group-prepend, .input-group-append は廃止）
  • アドオン内をチェックボックスやラジオボタンする場合：<input> に .form-check-input を入れる
• フォーム・レイアウト：グリッドクラスやユーティリティクラスでより簡潔に設定が可能なため .form-row, .form-group, .form-inline は廃止
• 入力検証：検証フィードバックをツールチップにする場合は、各 .col-md-* に .position-relative を追加し、.mb-3 を削除

【コンポーネント】

• 全てのJavaScriptの設定をjQueryに依存しない方法に変更（jQueryが検出された場合は従来の設定でも使用可）
• ソースファイルからJavaScriptを構築するのに util.js は必要でなくなった模様
• ボタングループ、ドロップダウン、リストグループ、ナビゲーション、ナビゲーションバーの各リンクをアクティブ化する場合は、.active で同じ要素に aria-current="true" を入れる
• ボタン、閉じるボタン、ページ送りの無効化状態に、pointer-events: none が追加
• アラート、カルーセル、折り畳み、ドロップダウン、モーダル、ポップオーバーの各メソッドに getInstance が追加
• アラート：.alert-{themecolor} 内の <hr> 要素ではcolorに rgba() を使用
• バッジ
  • 通常のバッジの設定：span.badge.badge-{themecolor} ⇒ span.badge.bg-{themecolor}
  • ピルバッジの設定：span.badge.badge-{themecolor}.badge-pill ⇒ span.badge.bg-{themecolor}.rounded-pill
  • リンクのfocusとhoverのスタイルを廃止
• パンくずリスト：セパレータの設定のうち、SVGアイコンのBASE64へのエンコードが不要に
• カード
  • v4のカードデッキは、グリッドカードによる設定に変更（.card-deck は廃止）
  • カードコラム：.card-columns による設定からMasonryのJSファイルを使用した設定方法に変更（.card-columns は廃止）
• カルーセル
  • ride オプションは slide に名称変更し、タイプに boolean が追加
  • number メソッドは、to に名称変更
  • nextWhenVisible メソッドが追加
• 閉じるボタン：.closeではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
• 折り畳み：カードコンポーネントによるアコーディオンのタイトルのリンク部分が .text-body から .link-dark.text-decoration-none に変更
• ドロップダウン
  • ドロップダウンボタンの設定で aria-haspopup="true" 属性が不要に
  • セマンティックなHTMLマークアップを促進するためドロップメニューの設定を div.dropdown-menu > a.dropdown-item から ul.dropdown-menu > li > a.dropdown-item に変更
  • 横仕切り線：div.dropdown-divider から <li> > hr.dropdown-divider に変更
• リストグループ
  • アクティブなアイテムにアクセシビリティの設定を追加（v4.6.0でバックポート）
  • チェックボックスとラジオボタンをリストグループアイテム内に配置可能に
• モーダル：フルスクリーン・モーダルクラス（.modal-fullscreen(-{breakpoint}-down)）を新設
• ナビゲーションバー
  • すべてのナビゲーションバーにおいて、.navbar の直下を .container(-{fluid｜breakpoint})（コンテナクラス）で囲む必要がある
  • アクティブメニューのリンク：li.nav-item.active > a.nav-link > span.sr-only から li.nav-item > a.nav-link.active[aria-current="page"] に変更
• ポップオーバー：template オプション：.arrow ⇒ .popover-arrow
• ツールチップ：template オプション：.arrow ⇒ .tooltip-arrow
• ジャンボトロン：他のユーティリティクラスで構築可能なので、ジャンボトロンのクラス（.jumbotron, .jumbotron-fluid）は廃止（本サイトでは設定例のみ表示）
• メディアオブジェクト：他のユーティリティクラスで構築可能なので、メディアオブジェクトのクラス（.media, .media-body）は廃止（本サイトでは設定例のみ表示）

【ヘルパー】

• ホバー状態のリンクの色を強調するリンクヘルパークラス（.link-{themecolor}）を新設
• 動画の埋め込み
  • [title] の設定を追加
  • $embed-respond-aspect-ratio の記載方法がリストからSassマップに変更
• 位置ヘルパー：レスポンシブで最上部に達すると固定する .sticky-{breakpoint}-top を新設
• スクリーンリーダーのフォーカス時には表示：.sr-only.sr-only-focusable ⇒ .sr-only-focusable
• 伸張リンクをグリッドに設定する場合、.col-* に .position-static は不要に

【ユーティリティ】

• ブレークポイントに超特大（xxl）が追加されたので、各 .{property}-xxl(-{value}) クラスが追加
• scss/_utilities.scss ファイルにある $utilities マップにユーティリティクラスの設定を移動し、クラス設定の解説としてユーティリティAPIを新設
• カラーユーティリティ
  • 文字色：<a> タグに .text-{themecolor} を入れてもホバー時に濃いめに強調表示されなくなった⇒リンクヘルパークラス（.link-{themecolor}）を使用
  • 背景色
    • .bg-body が追加
    • <a> タグに .bg-{themecolor} を入れてもホバー時に濃いめに強調表示されなくなった
  • 背景色のグラデーション化： .bg-{themecolor} に .bg-gradient（デフォルトで生成済み）を追加して設定が可能になったので、.bg-gradient-{themecolor} は廃止
• Flexユーティリティ
  • 主軸方向のアイテムの整列クラスに .justify-content(-{breakpoint})-evenlyが追加
  • Flexアイテムの表示順：.order(-{breakpoint})-* の設定できる整数が、0～12より0～5に変更され、.order(-{breakpoint})-last の設定も order：13 から order：6 に変更
• 相互作用ユーティリティ：ポインターイベントクラスとして、.pe-{auto|none} を新設
• 空白ユーティリティ：マイナスのマージンユーティリティクラス（.m{sides}(-{breakpoint})-n{size}）はデフォルトで生成されなくなった
• テキストユーティリティクラス
  • テキストの太さユーティリティクラスにフォントスタイルなし（.font-normal）を追加
  • 行間ユーティリティクラスとして、.lh-{size} を新設
  • 等幅フォントの設定：.text-monospace から .font-monospace に名称変更
  • テキストの装飾ユーティリティクラスに下線（.text-decoration-underline）と取消線（.text-decoration-line-through）を追加
  • 文字の均等割付ユーティリティクラス（.text-justify）を廃止（単語の間隔がよりランダムになり、読みにくくなるため）

【拡張】

• アイコン：オプションのアイコンライブラリにicofontが追加（v4.5.3でバックポート）