Bootstrap v5の主な変更点

脱jQuery
IE非対応
CSS変数
ブレークポイントxxl
Bootstrap Icons

HTMLサイトの場合

Bootstrap v4.1.1からBootstrap v5.3.0への移行方法のメモです。
自作のHTML5テンプレートを例にしています。

読み込みファイルの変更

v4
bootstrap.min.css　　
bootstrap.min.js
popper.min.js　　ツールチップとポップオーバーに必要。

v5
bootstrap.min.css　　
bootstrap.bundle.min.js　　Popper.jsをインクルードしている。

主なCSSクラス名の変更

v4：　text-left
v5：　text-start

v4：　text-right
v5：　text-end

v4：custom-select
v5：form-select

v4：　embed-responsive embed-responsive-16by9
v5：　ratio ratio-16x9

メニュー

HTMLの「data-」を「data-bs-」へ変更
v4：　data-toggle=""
v5：　data-bs-toggle=""

v4：　data-target=""
v5：　data-bs-target=""

ツールチップ

HTMLの「data-」を「data-bs-」へ変更
v4：　data-toggle="" data-placement=""
v5：　data-bs-toggle="" data-bs-placement=""

v5 JSコード追加
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

ポップオーバー

HTMLの「data-」を「data-bs-」へ変更
v4：　data-container="" data-toggle="" data-placement="" data-content=""
v5：　data-bs-container="" data-bs-toggle="" data-bs-placement="" data-bs-content=""

v5 JSコード追加
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

アラート

v4のHTML
<div class="alert alert-white alert-dismissible fade show" role="alert"> alert-white
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
 
v5のHTML
<div class="alert alert-white alert-dismissible fade show" role="alert"> alert-white
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  </button>
</div>

CSSの変更
v4：　.alert-dismissible .close { padding: 0.75rem 1.25rem; }
v5：　.alert-dismissible .btn-close { padding: 0.5rem; }

ボタンがクリック時に白くなる

詳細度が高いので優先されます。
v4: .btn:active
v5： .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show

WordPressテーマとプラグインの場合

本テーマの場合は、以下の理由からBootstrap v5への移行は見送りとしました。

①. Bootstrap v5.3.0（bootstrap.bundle.min.js）は複数読み込み時に問題が発生する
WordPressテーマとプラグインでそれぞれbootstrap.bundle.min.js（Tooltip等バンドル）を読み込むと、Bootstrapのモバイルメニューや2ndレベルのドロップダウンメニュー等が機能しません。
※bootstrap.min.jsを使用する場合は問題ないようです。

②. WP Bootstrap Navwalker v4.3.0
Bootstrap v5へ手動での対応方法は紹介されていますが、正式な対応はまだされていません。

/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute( $atts, $item, $args ) {
    if ( is_a( $args->walker, 'WP_Bootstrap_Navwalker' ) ) {
        if ( array_key_exists( 'data-toggle', $atts ) ) {
            unset( $atts['data-toggle'] );
            $atts['data-bs-toggle'] = 'dropdown';
        }
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'prefix_bs5_dropdown_data_attribute', 20, 3 );