bootstrap-v5-v6-migration

Bootstrap v5 から v6 への移行

ワークフロー

各手順を順番に進めてください。次の手順に進む前に、毎回コードベースを検索し、v5 のパターンが残っていないか確認してください。

• 手順 1：依存関係とビルド設定を更新する
• 手順 2：CSS クラスとデータ属性の名前を変更する
• 手順 3：コンポーネントの HTML を再構成する
• 手順 4：JavaScript を更新する
• 手順 5：Sass を更新する
• 手順 6：検証する

---

手順 1：依存関係とビルド

1. package.json を更新します："bootstrap": "6.0.0-alpha.1"
2. @popperjs/core を @floating-ui/dom に置き換えます
3. Datepicker を使用する場合は、peer dep vanilla-calendar-pro を追加します
4. Sass：すべての @import を @use に置き換えます（Node Sass はサポート対象外になりました）

bootstrap.bundle.js には Floating UI と Vanilla Calendar Pro が含まれています。スタンドアロンの bootstrap.js では、両方の peer dependency が外部依存として扱われます。スタンドアロンビルドをブラウザーから直接読み込むには、import map が必要です。

// v5
@import "bootstrap/scss/bootstrap";

// v6
@use "bootstrap/scss/bootstrap";

// v6 with overrides — customize CSS tokens through the token maps
@use "bootstrap/scss/bootstrap" with (
  $root-tokens: (
    --spacer: 1rem,
  )
);

従来の Sass スカラーではなく、CSS トークンマップ（グローバルトークン用の $root-tokens と、各コンポーネントの $*-tokens マップ）をオーバーライドしてカスタマイズしてください。カスタマイズ › Sass を参照してください。Sass ではトークン名に プレフィックスを付けずに記述します（例：--spacer、--border-radius）。Bootstrap の dist/CDN CSS では PostCSS が実行され、--bs- プレフィックスが追加されます（--bs-spacer）。そのため、ソースを自分でコンパイルすると、プロパティはプレフィックスなしのままになります。

---

手順 2：CSS クラスと属性の名前変更

レスポンシブおよび状態のプレフィックス構文

v6 では、ブレークポイントと擬似状態がインフィックス／サフィックスから、コロン付きのプレフィックスに変更されます。また、xxl は 2xl に変更されます。

パターン： .{class}-{bp}-{value} は .{bp}:{class}-{value} に、.{class}-{bp} は .{bp}:{class} に変更されます

v5	v6
.d-md-none、.p-lg-3	.md:d-none、.lg:p-3
.col-md-6	.md:col-6
.row-cols-md-3	.md:row-cols-3
.offset-md-2	.md:offset-2
.g-md-3、.gx-md-3	.md:g-3、.md:gx-3
.g-col-md-4	.md:g-col-4
.container-sm	.sm:container
.navbar-expand-md	.md:navbar-expand
.offcanvas-md	.md:drawer
.table-responsive-md	.md:table-responsive
.list-group-horizontal-md	.md:list-group-horizontal
.sticky-md-top	.md:sticky-top
.vstack-md	.md:vstack
.dialog-fullscreen-sm-down	.sm-down:dialog-fullscreen
.d-print-none	.print:d-none
.opacity-50-hover	.hover:opacity-50

プレフィックスはクエリの種類を示すものではありません。ユーティリティ、グリッド列、コンテナー、ドロワー、レスポンシブテーブルはビューポートクエリを使用します。スタック、CSS Grid 列、ナビバーの展開、横方向のリストグループ、カードグループ、縦積みテーブルはコンテナークエリを使用します。各コンポーネントのドキュメントで指定されているクエリコンテナーを追加してください。

コンポーネントの名前変更

3 つのコンポーネントが全面的に改名されました。クラス、データ属性、イベント、JS インポート、CSS 変数全体で、これらのプレフィックスを検索して置換してください。

Modal -> Dialog

対象	v5	v6
クラス	.modal、.modal-header/body/footer/title	.dialog、.dialog-header/body/footer/title
サイズ	.modal-sm/lg/xl/fullscreen	.dialog-sm/lg/xl/fullscreen
データ属性	data-bs-toggle="modal"、data-bs-dismiss="modal"	data-bs-toggle="dialog"、data-bs-dismiss="dialog"
JS エクスポート	Modal	Dialog
イベント	*.bs.modal	*.bs.dialog
CSS 変数	--modal-*	--dialog-*
body クラス	<body> の .modal-open	<html> の .dialog-open

.modal-dialog と .modal-content のラッパーは完全に削除してください。手順 3 を参照してください。

Offcanvas -> Drawer

範囲	v5	v6
クラス	.offcanvas, .offcanvas-start/end/top/bottom/header/body/title	.drawer, .drawer-start/end/top/bottom/header/body/title
データ属性	data-bs-toggle="offcanvas", data-bs-dismiss="offcanvas"	data-bs-toggle="drawer", data-bs-dismiss="drawer"
JS エクスポート	Offcanvas	Drawer
イベント	*.bs.offcanvas	*.bs.drawer
CSS 変数	--offcanvas-*	--drawer-*
Sass	$zindex-offcanvas	$zindex-drawer

Dropdown -> Menu

範囲	v5	v6
クラス	.dropdown-menu, .dropdown-item, .dropdown-divider, .dropdown-header	.menu, .menu-item, .menu-divider, .menu-header
データ属性	data-bs-toggle="dropdown"	data-bs-toggle="menu"
JS エクスポート	Dropdown	Menu
イベント	*.bs.dropdown	*.bs.menu
Sass	$zindex-dropdown	$zindex-menu

また、.dropdown-toggle（不要になりました）、.dropdown ラッパー、.dropdown-toggle-split を削除してください。新しいマークアップについてはステップ 3 を参照してください。

ボタンとバッジのバリエーション -> テーマトークン

色ごとのクラスは、バリエーションと .theme-* の組み合わせに置き換えられます。組み込みのテーマキーは primary、accent、success、danger、warning、info、inverse、secondary です。両方のクラスを同じ要素に適用してください。

v5	v6
.btn-primary	class="btn-solid theme-primary"
.btn-outline-primary	class="btn-outline theme-primary"
.alert-primary	class="alert theme-primary"
.badge.bg-primary	class="badge theme-primary"

新しいボタンバリエーション：.btn-solid、.btn-outline、.btn-subtle、.btn-text、.btn-styled、.btn-link。

ネストされたサブツリーで .theme-reset を使用すると、継承された --theme-* トークンを解除し、コンポーネントのデフォルトに戻せます。

.theme-light クラスや .theme-dark クラスはありません。v5 のライトおよびダークのバリエーションを手動で確認してください。適切にニュートラルなサーフェスユーティリティ、カラーモード、または .theme-inverse を使用してください。

プレースホルダーのアニメーション

標準の読み込みアニメーションには .placeholder-wave を使用してください。従来の不透明度アニメーションを使う場合は、.placeholder-glow を .placeholder-pulse に置き換えてください。.placeholder-glow は互換性エイリアスとして引き続き使用できます。

ユーティリティクラスの名称変更

v5	v6
.text-primary、.text-danger など	.fg-primary、.fg-danger など
.text-muted	.fg-secondary
.mh-*	.max-h-*
.mw-*	.max-w-*
.form-select	.form-control（<select> に適用）
.clearfix	.d-flow-root
.has-validation	削除（不要になりました）
.lh-base	.lh-md
.text-bg-primary	class="bg-primary fg-contrast-primary"
.link-offset-*、.link-underline-*	.underline-offset-*、.underline-*

.display-1 から .display-6 までのクラスと .lead を削除してください。.fs-* および .fw-* ユーティリティを組み合わせてスタイルを適用してください。.bg-light、.bg-dark、.bg-body-* を確認し、移行ガイドで説明している v6 のニュートラルなサーフェスとカラーモードを使用してください。

フォントサイズクラス

v6 では、数値スケールが T シャツサイズ（小さい順）に置き換えられます。v6 の全スケールは xs sm md lg xl 2xl 3xl 4xl 5xl 6xl です。以下の rem 値は、各クラスを対応させる際の参考として示したv5のサイズです。

v5（サイズ）	v6
.fs-1（2.5rem）	.fs-4xl
.fs-2（2rem）	.fs-3xl
.fs-3（1.75rem）	.fs-2xl
.fs-4（1.5rem）	.fs-xl
.fs-5（1.25rem）	.fs-lg
.fs-6（1rem）	.fs-md

注：v6 では、lg 以上のサイズは流動的な clamp() 値で、ビューポートに応じて最小値から最大値の間で変化します（例：4xl は clamp(2.25rem, 1.75rem + 2.5vw, 3rem)）。xs／sm／md は固定です。そのため、サイズは v5 と正確には一致しません。この対応関係が維持するのは相対的なスケールであり、正確な rem 値ではありません。

スペーサースケール

キー 2〜5 の値が変更されました。v5 の間隔を維持するには、.p-2（0.5rem）を .p-3 に、.p-3（1rem）を .p-5 に、.p-4（1.5rem）を .p-7 に、.p-5（3rem）を .p-12 に置き換えます。

キー	v5	v6
2	0.5rem	0.375rem
3	1rem	0.5rem
4	1.5rem	0.75rem
5	3rem	1rem
6-12	—	1.25rem から 3rem まで、0.25rem 刻み

負のマージンは .ms--1、.ms--2、.me--1、.me--2（-0.25rem、-0.5rem）に制限されています。v5 の .m*-n* クラス（例：.mt-n1、.ms-n3）は廃止されました。これらのいずれか、またはカスタムスタイルを使用してください。

フォームのバリデーション

v5	v6
<form> の .needs-validation	<form> の data-bs-validate
JS による .was-validated	削除 — :user-invalid で処理されます
<div class="valid-tooltip">	<div class="tooltip valid-tooltip">
<div class="invalid-tooltip">	<div class="tooltip invalid-tooltip">

---

ステップ 3：HTML 構造の変更

これらのコンポーネントでは、クラス名の変更だけでなく、マークアップが根本的に新しくなっています。

ダイアログ（旧 Modal）

.modal-dialog と .modal-content のラッパーを削除します。単一の <dialog> 要素を使用してください。バックドロップはネイティブの ::backdrop になりました。

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<dialog class="dialog" id="exampleDialog">
  <div class="dialog-header">
    <h5 class="dialog-title">Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
  </div>
  <div class="dialog-body">Content</div>
  <div class="dialog-footer">
    <button class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
  </div>
</dialog>

ドロワー（旧 Offcanvas）

ネイティブの <dialog> 要素を使用してください。名前を変更した <div class="drawer"> では動作しません。

<div class="offcanvas offcanvas-start" id="menu">...</div>


<dialog class="drawer drawer-start" id="menu">...</dialog>

レスポンシブナビバーでは、data-bs-toggle="collapse" を data-bs-toggle="drawer" に変更します。.collapse.navbar-collapse を .drawer-header と .drawer-body を含む <dialog class="drawer"> に置き換えます。.navbar-expand-md を .md:navbar-expand に変更し、.navbar-light または .navbar-dark を削除します。

アコーディオン

Collapse JS をネイティブの <details>／<summary> に置き換えます。name 属性で排他的なグループを作成します（data-bs-parent の代わり）。.accordion-icon SVG を <summary> 内に追加します。.accordion-button と .accordion-collapse を削除します。新しいモディファイアは、コンパクトなパディングと文字組みにする .accordion-sm と、各項目を独立した角丸カードとして間隔を空ける .accordion-gap です。

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
      <div class="accordion-body">Content</div>
    </div>
  </div>
</div>


<div class="accordion">
  <details class="accordion-item" name="myAccordion" open>
    <summary class="accordion-header">
      Item 1
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">Content</div>
  </details>
</div>

カード

カードのマークアップとカスタムカード CSS を確認します。v6 ではカードのボーダー、レイアウト、および複数のヘルパークラスが変更されています。

• .card が背景、外枠のボーダー、角丸、シャドウ、高さを担います。ヘッダーとフッターには区切り線のボーダーのみが表示されます。
• .card-body は省略可能です。現在はフレックス列になり、直下の子要素のブロックマージンをなくし、間隔に --card-body-gap を使用します。横方向の本文には .flex-row を追加します。
• カード内のリストグループには .list-group-flush を維持します。.card-list は使用できないクラスなので、追加しないでください。
• .card-title と .card-text にはスタイルが適用されなくなりました。プロジェクト内のフックとしてのみ使用してください。.card-subtitle は引き続き、サブタイトルの上の間隔を狭めます。
• .card-link は削除されました。リンクの行が必要な場合は、通常のリンクとフレックスまたは gap ユーティリティを使用してください。
• 横型カードには .card-row を使用します。新しいビジュアルバリエーションには .card-subtle または .card-translucent を使用します。
• カードグループではコンテナークエリが使用されるようになりました。親要素に .contains-inline を追加しないと、カードは縦に並んだままになります。

メニュー（旧 Dropdown）

.dropdown ラッパーと .dropdown-toggle を削除します。<ul><li><a> を <div><a> にフラット化します。トグルと .menu は兄弟要素にします。

<div class="dropdown">
  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Other</a></li>
  </ul>
</div>


<button class="btn-solid theme-secondary" data-bs-toggle="menu">Menu</button>
<div class="menu">
  <a class="menu-item" href="#">Action</a>
  <hr class="menu-divider">
  <a class="menu-item" href="#">Other</a>
</div>

閉じるボタン

マークアップに変更はありません — .btn-close は空の要素のままです。子 SVG を追加しないでください（アイコンが二重に描画されます）。変更されたのは内部の仕組みです。v6 では CSS の mask（--btn-close-icon）を background-color: currentcolor の上に適用してアイコンを描画するため、固定画像ではなく、ボタンが現在のテキストの color を継承するようになりました。

<button type="button" class="btn-close" aria-label="Close"></button>

アイコンが currentcolor になったため、v5 の .btn-close-white バリエーションは削除されました。明るい色の閉じるボタンにするには、テキストの色を設定します（たとえば、暗い .theme-* コンテキスト内に配置するか、.fg-*／color ユーティリティを追加します）。

チェックボックス

.check を <input> に直接適用します。ラッパーとインライン SVG は不要です。チェックマークは ::before 上の CSS mask で描画されます。ラジオボタン（.radio）も同じパターンに従います。スイッチでは、引き続き入力要素の周囲に .switch ラッパーを使用します。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Check me</label>
</div>


<div class="form-field">
  <input type="checkbox" id="check1" class="check">
  <label for="check1">Check me</label>
</div>

ラジオボタンとスイッチも同様です：

<div class="form-field">
  <input type="radio" id="radio1" class="radio">
  <label for="radio1">Pick me</label>
</div>


<div class="form-field">
  <div class="switch">
    <input type="checkbox" id="switch1" role="switch" switch>
  </div>
  <label for="switch1">Toggle me</label>
</div>

トグルボタン

入力要素はラベル内にネストされるようになりました。.btn-check はラベルに付けます。id／for は不要です。

<input type="checkbox" class="btn-check" id="toggle1" autocomplete="off">
<label class="btn btn-outline-primary" for="toggle1">Toggle</label>


<label class="btn-check btn-solid theme-primary">
  <input type="checkbox" autocomplete="off">
  Toggle
</label>

レンジ

.form-range はラッパー兼 JavaScript フックになりました。クラスを入力要素からラッパーに移し、入力要素に .form-range-input を追加します。

<input type="range" class="form-range">


<div class="form-range">
  <input type="range" class="form-range-input">
</div>

パンくずリスト

<a> 要素に .breadcrumb-link を追加します。項目の間に空の .breadcrumb-divider 区切り要素を追加します（::before 疑似要素の置き換えです）。空の区切り要素には、CSS マスクによってデフォルトのシェブロンが表示されます。デフォルトの下マージンはなくなりました（v5 では $spacer を使用していました）。

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>


<ol class="breadcrumb">
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a></li>
  <li class="breadcrumb-divider"></li>
  <li class="breadcrumb-item"><a class="breadcrumb-link active" href="#">Library</a></li>
</ol>

---

ステップ 4：JavaScript

ESM のみ

すべての dist ファイルが ES モジュールになりました。UMD バンドルや window.bootstrap グローバルはなくなりました。

<script src="bootstrap.bundle.min.js"></script>


<script type="module" src="bootstrap.bundle.min.js"></script>

グローバル名前空間へのアクセスをインポートに置き換えます。

// v5 — global namespace
const tooltip = bootstrap.Tooltip.getOrCreateInstance(el)

// v6 — explicit import
import { Tooltip } from './bootstrap.bundle.min.js'

const tooltip = Tooltip.getOrCreateInstance(el)

type="module" を追加すると、Data API の初期化は引き続き自動的に実行されます。このスキルでコンポーネント名とデータ属性名を変更します。バンドラーでのインポート（import { X } from 'bootstrap'）は、これまでどおり機能します。

バンドル版ビルドには Floating UI と Vanilla Calendar Pro が含まれています。スタンドアロン版ビルドでは、インストール済みのピア依存関係か、ブラウザーのインポートマップが必要です。

名前が変更された JS エクスポート

v5	v6
Modal	Dialog
Offcanvas	Drawer
Dropdown	Menu

Popper から Floating UI へ

@popperjs/core を @floating-ui/dom に置き換えます。Tooltip、Popover、Menu の popperConfig オプションを floatingConfig に変更します。

ライフサイクルメソッドが Promise を返す

show()、hide()、toggle()、close() は、トランジションが終了したときに解決される Promise を返すようになりました。shown.bs.*／hidden.bs.* をリッスンする代わりに、これらを await できます。イベントも引き続き発火します。

ホバーまたはフォーカスで表示されるツールチップは、ポインターまたはフォーカスがツールチップ自体にある間、開いたままになります（WCAG 1.4.13）。Escape キーを押すか、トリガーとツールチップの両方から離れると非表示になります。

ポップアップ形式の日付選択 UI は、外部を操作したとき、Escape を押したとき、または入力欄とカレンダーの両方からフォーカスが外れたときに閉じます。

TypeScript 宣言

Bootstrap のソースは TypeScript になりました。パッケージに型宣言が含まれるため、@types/bootstrap を削除してください。深い階層の .js インポートは、コンパイル済みの js/dist ファイルを参照します。

削除されたもの

• jQuery のサポート
• bootstrap.esm.js／bootstrap.esm.min.js — bootstrap.js を使用してください
• js/index.umd.js

Validation JS

// v5
document.querySelectorAll('.needs-validation')
form.classList.add('was-validated')

// v6
document.querySelectorAll('form[data-bs-validate]')
// Remove the was-validated line entirely

---

ステップ 5：Sass

名前が変更されたファイル

v5	v6
_variables.scss	_config.scss
_variables-dark.scss	削除（_theme.scss に統合）
_maps.scss	削除
_placeholders.scss	_placeholder.scss
_spinners.scss	_spinner.scss
_form-check.scss	_check.scss、_radio.scss、_switch.scss
mixins/_forms.scss	mixins/_form-validation.scss
forms/_form-variables.scss	削除
vendor/_rfs.scss	削除

名前が変更された変数と関数

v5	v6
$grid-breakpoints	$breakpoints
$border-radius、$border-radius-sm/lg/xl/xxl、$border-radius-pill	削除 — 下記の角丸スケールを参照してください
$text-muted	セカンダリカラーを使用
$hr-bg-color	$hr-border-color
$hr-height	$hr-border-width
$zindex-dropdown	$zindex-menu
$zindex-offcanvas	$zindex-drawer
$form-validation-states	$validation-states
$btn-close-white-filter	削除 — アイコンでは currentcolor を使用
$enable-negative-margins	削除 — 負のマージンは常に生成されます。$negative-spacers をカスタマイズしてください
add()／subtract()	calc()
breakpoint-infix()	breakpoint-prefix()（"-md" ではなく "md\:" を返します）
$infix（ループミックスイン内）	$prefix
$prefix（CSS 変数のプレフィックス）	削除 — 代わりに PostCSS を使用してください

角丸スケール

$border-radius-* 変数は廃止されました。v6 では、単一の基本値 $radius: .5rem と $radii マップ（キーは 0～9、例：5: $radius、9: $radius * 2）を使用し、これらは --radius-0～--radius-9 トークン（および --radius-pill）として公開されます。.rounded-* ユーティリティは 0～9 に拡張され、v5 とは異なる値に対応するため、同じ角丸を保つにはクラス番号を大きくしてください（例：.rounded-1 → .rounded-3、.rounded-3 → .rounded-5）。以前のサイズごとの変数ではなく、基本値またはマップのエントリーを上書きしてください。

// $radius lives in _config.scss, so configure that module before loading Bootstrap
@use "bootstrap/scss/config" with (
  $radius: .375rem // scales the whole map
);
@use "bootstrap/scss/bootstrap";

削除（代替なし）

• $nested-kbd-font-weight
• $enable-dark-mode — ダークモードは常にコンパイルされます
• $enable-validation-icons
• $enable-caret、$caret-width、$caret-vertical-align、$caret-spacing
• $accordion-button-focus-border-color、$tooltip-arrow-color
• $popover-arrow-color、$popover-arrow-outer-color
• $alert-bg-scale、$alert-border-scale、$alert-color-scale
• $list-group-item-bg-scale、$list-group-item-color-scale
• $carousel-dark-indicator-active-bg、$carousel-dark-control-icon-filter
• $dropdown-header-padding
• すべての *-focus-box-shadow 変数 — --focus-ring-* CSS カスタムプロパティと focus-ring() ミックスインを使用してください
• RFS ミックスイン — レスポンシブなサイズ指定には clamp() を使用してください
• create-css-vars() ミックスイン
• キャレットのミックスイン（caret()、caret-down()、caret-up()、caret-end()、caret-start()）— 代わりにトグルのマークアップにアイコンを追加してください
• テキストカラーのユーティリティマップから muted、black-50、white-50 を削除

ユーティリティ API

css-var、css-variable-name、local-vars オプションは削除されました。代わりに property マップと variables を使用してください。

テーママップのマージ

$theme-colors、$theme-bgs、$theme-fgs、$theme-borders、$badge-variants およびその他のグローバルマップは defaults() を使用します。@use ... with () を通じて、変更したいキーだけを渡してください。キーに null を設定すると、そのキーを削除できます。ネストされたテーマカラーのマップは 1 段階の深さまでマージされます。1 つのロールを変更する場合は、サブマップ全体を渡してください。

ルートトークンは :root, :host に出力されます。Shadow DOM を使用する場合は、:root の上書きを :host にも適用してください。

---

動作の再構築と新しいコンポーネント

上記の名称変更に加えて、v5 プロジェクトの動作や利用できる機能にもいくつか変更があります。マークアップとオプションの詳細については、ドキュメントを確認してください。

カルーセル — CSS scroll-snap を使って再構築

マークアップ（.carousel → .carousel-inner → .carousel-item）と JS API（next／prev／to／cycle／pause、slide／slid イベント）は維持されていますが、いくつか変更があります。

• ride → autoplay（ブール値、オプトイン）。 data-bs-ride="carousel" は data-bs-autoplay="true" に、{ ride: 'carousel' } は { autoplay: true } になります。デフォルトは autoplay: false なので、自動で進んでいた v5 のカルーセルは、オプトインするまで停止したままになります。自動再生中のカルーセルを操作すると、再生が恒久的に停止します（WCAG 2.2.2）。
• wrap → ends。 wrap: true は ends: "wrap"（または新しいデフォルトの "loop"）に、wrap: false は ends: "stop" になります。data-bs-ends で設定してください。touch オプションは削除されました（ネイティブスクロールで処理されます）。
• 削除されたクラス： .carousel-control-prev/next（.btn-icon、data-bs-slide、.carousel-icon-prev/next を組み合わせてください）、.carousel-caption（独自のマークアップを使用してください）、.carousel-dark（data-bs-theme="dark" を使用してください）、.carousel-stacked（現在はデフォルトです）、および移行用の .carousel-item-start/end/next/prev。コントロールを重ねて表示するには、.carousel-overlay が必要になりました。コントロールアイコンのクラスは .carousel-control-prev-icon → .carousel-icon-prev（および -next）に変更されました。

ScrollSpy — IntersectionObserver を使用して再構築

data-bs-spy="scroll" のマークアップと activate.bs.scrollspy イベントに変更はありませんが、検出はアクティベーションラインを基準に行うようになりました（スクロール位置のポーリングは行いません）。オプションも変更されています。

• 非推奨の offset オプションと method オプションを削除しました（v5.1.3 以降、非推奨）— 解析されなくなりました。
• topMargin を追加しました（デフォルトは 12%）— スクロールルートの上端からの値（% または px）でアクティベーションラインの位置を指定します（例：固定ナビバーの下に配置するには 96px）。通常はこちらを使用し、rootMargin の代わりに指定してください。
• rootMargin は高度な設定用のオーバーライドになりました（デフォルトは null、以前は '0px 0px -25%'）。設定すると topMargin より優先され、オブザーバーにそのまま渡されます。
• threshold のデフォルトが [0.1, 0.5, 1] から [0] に変更されました。
• smoothScroll を使用すると、リンクをクリックした際に URL ハッシュが復元され（history.replaceState）、スクロールが落ち着いた後にターゲットへフォーカスが移動します（キーボードや支援技術でのナビゲーションが改善されます）。
• ターゲットの id は getElementById で解決されるため、ドット、コロン、スラッシュ、パーセントエンコーディングを含む ID も手動でエスケープせずに使用できます。

Collapse — 状態とトランジションを簡素化

• .collapsing に依存するセレクターとテストを削除します。Collapse は .show を切り替え、ネイティブのサイズ補間を使用するようになりました。
• トリガーの .collapsed セレクターを [aria-expanded="false"] に置き換えます。
• toggle コンストラクターオプションを削除します。初期化時に状態を変更する必要がある場合は、show() または hide() を呼び出してください。

新しいコンポーネント（v5 にはありませんでした）

コンポーネント	トリガー／フック	目的
Combobox	data-bs-toggle="combobox"	Menu を基盤とする、フィルター／オートコンプリート対応の選択
Chip / Chip input	.chip, .chip-input (data-bs-chips)	タグ／トークンと対話式の入力
Datepicker	data-bs-toggle="datepicker"	日付選択（peer dep vanilla-calendar-pro）
Range	.form-range（および data-bs-bubble、目盛り）	値の吹き出しを備えた拡張レンジスライダー
Strength	data-bs-strength	パスワード強度メーター
OTP input	data-bs-otp	ワンタイムコード入力
Nav overflow	.nav を囲む .nav-overflow ラッパー	あふれたナビ項目をメニューにまとめます
Toggler	data-bs-toggle="toggler"	汎用のクラス／属性切り替え
Submenu	.submenu（Menu 内）	入れ子メニュー（submenuTrigger、submenuDelay）
Stepper	.stepper	マルチステップのワークフロー（CSS のみ）
Avatar	.avatar	サイズ、ステータス、.avatar-stack に対応したアバター（CSS のみ）
Form adorn	.form-adorn	入力欄へのアイコン／テキスト装飾（CSS のみ）
Prose	.prose / .not-prose	リッチタイポグラフィのスコープ設定（CSS のみ）

削除／変更された内部実装

• util/backdrop.js、util/focustrap.js、util/scrollbar.js を削除しました。 Dialog と Drawer はネイティブの <dialog> 要素を使用します。これにより、バックドロップ（::backdrop）、フォーカストラップ、不活性なトップレイヤーが提供されます。body のスクロールロックは CSS（:root.dialog-open）で行うようになりました。bootstrap/js/src/util/backdrop、.../focustrap、.../scrollbar を直接インポートしていた場合、これらは使用できなくなっています。
• CSS の @layer。 コンポーネントのスタイルはカスケードレイヤー（colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities）で囲まれるようになりました。どのレイヤーにも属さない作成者 CSS は、ソース順にかかわらず Bootstrap より優先されます。v5 のオーバーライドが詳細度や読み込み順に依存していた場合は、再確認してください。
• --bs-*-rgb 変数を削除しました。 $*-rgb Sass 変数と --bs-*-rgb カスタムプロパティはなくなりました。rgba(var(--bs-primary-rgb), .5) は color-mix(in oklab, var(--bs-primary), transparent 50%) に置き換えるか、色をそのまま使用してください。

---

ステップ 6：検証

1. プロジェクトをビルドし、コンパイルエラーがあれば修正します。
2. 残っている v5 のパターンを検索します。
   • modal クラス／属性（dialog にする必要があります）
   • offcanvas（drawer にする必要があります）
   • dropdown（menu にする必要があります）
   • d-md-、d-lg-、col-md- など（md: プレフィックス構文を使用する必要があります）
   • btn-primary、btn-outline-（.btn-solid .theme-* を使用する必要があります）
   • .text-primary、.text-danger（.fg-* にする必要があります）
   • Sass の @import（@use にする必要があります）
   • form-select（form-control にする必要があります）
   • was-validated、needs-validation（data-bs-validate にする必要があります）
   • popperConfig（floatingConfig にする必要があります）
   • form-check（check、radio、または switch にする必要があります）
   • var(--bs-*-rgb) ／ rgba(var(--bs-…-rgb)（削除されています。color-mix() を使用してください）
   • Sass 変数 $border-radius（削除されています。$radius ／ $radii ／ --radius-* を使用してください）
   • .btn-close 内の子 <svg>（空にする必要があります。アイコンは CSS マスクです）
   • .btn-close-white（削除されています。代わりにテキストの color を設定してください）
   • <div class="drawer">（ネイティブの <dialog class="drawer"> にする必要があります）
   • data-bs-ride（data-bs-autoplay に改称されています）。カルーセルの wrap: オプション（現在は ends: です）
   • .carousel-control-prev/next、.carousel-caption、.carousel-dark、.carousel-stacked（すべて削除されています）
   • .fs-1～.fs-6（.fs-4xl ～ .fs-md にする必要があります）
   • .link-offset-* ／ .link-underline-*（現在は .underline-offset-* ／ .underline-* です）
   • ScrollSpy の offset ／ method オプション（削除されています。topMargin を使用してください）
   • .check 内のインライン SVG（アイコンは入力要素上の CSS マスクです）
   • $theme-colors のマップ全体の置き換え（v6 では defaults() を使ってマージします）
   • .collapsing、.collapsed のトリガーセレクター、および Collapse の toggle オプション
   • クエリーコンテナーを使用していないレスポンシブなスタック、CSS Grid、ナビバー、リストグループ、カードグループ、スタックテーブル
3. ブラウザーでテストします。v6 では oklch() と color-mix() のサポートが必要です。