form関係のBootstrap5への対応方法

2021-10-12 (最終更新: 2021-10-12)

概要

Bootstrap 5のベータ版がリリースされました。ベータ版ということで、Bootstrap 4で作成されたWebアプリケーションをBootstrap 5へと対応させるという作業をしてみました。

ここでは、form周りでBootstrap 5へ対応するために私が行った変更を紹介します。

ほとんどのBootstrapのクラスはバージョンが4のままでも動きましたが、ユーザーが入力をするフォーム関係では、想定通りに動かないものがいくつかありました。

私が確認した限りで、動かなかったものはform-groupやcontrol-labelです。

Bootstrap 5への移行で、上記のform-groupやcontrol-labelは次のようにしました。

最初にform-groupですが、調べた限りでは直接代わりとなるようなクラスはなさそうでした。そこで、form-groupで行っているmargin-bottomへの設定に近いものということで、form-groupをmb-3へと置き換えました。

次にcontrol-labelですが、これは対応する別のクラスがありました。別のクラスの名前はform-labelなので、control-labelをそのままform-labelへと置き換えました。

これで、私が作成したWebアプリケーションにおけるフォーム周りのBootstrap5への対応が完了しました。

Bootstrap 5の情報はあまり多くないので、情報を探すのに少し苦労しました。