bootstrap4 から bootstrap5 への移行メモ

left/rightがstart/endに変更

クラス名にleftやrightがあるものは軒並みstart/endに変更
mr-1/ml-1とかもme-1/ms-1に変更

bs4	bs5
ml-*	ms-*
pl-*	ps-*
mr-*	me-*
pr-*	pe-*
pr-*	pe-*
dropdown-menu-left	dropdown-menu-start
dropdown-menu-right	dropdown-menu-end

input type="file"にもform-controlが適用

こちらは実装レイアウトがいろいろなので適宜改修。

data-toggle="modal"などのdata属性値が変更

data-toggle="modal"はdata-bs-toggle="modal"のようにbsが付くようになる
dropdownも同様

modal内のCloseボタン

以前の実装例

      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

bs5では以下のようになる

      <div class="modal-header">
        <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>

HTMLEditor(summernote)

bootstrap5は0.8.19から提供されているようだが
0.8.19(or 0.8.20)を入れるとnpm run dev(prod)でエラー

ERROR in ./node_modules/summernote/dist/summernote-bs4.min.js 2:85-102
Module not found: Error: Can't resolve 'jQuery' in '/node_modules/summernote/dist'

app.jsに含めるのは現段階では無理っぽいので
node_modules/summernote/dist配下を
public/vendor/summernote/
のようにコピーしてからカスタム

Datepicker

Bootstrap4ではTempus Dominusなどを利用していたが
Bootstrap5では脱jqueryになっているため別ライブラリのがよさげ
Bootstrap5ではないがjqueryなしのライブラリでは以下への置換
flatpickr