form関係のBootstrap5への対応方法

スポンサーリンク

概要

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

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

スポンサーリンク

環境

  • Bootstrap 5.0.0-beta1
スポンサーリンク

想定通りにならなかったクラス

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

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

スポンサーリンク

変更後のクラス

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

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

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

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

スポンサーリンク

さいごに

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

コメント

タイトルとURLをコピーしました