先生と生徒の会話形式で理解しよう

生徒

「先生、Bootstrapのフォームを作ろうとしたら、ネットのサンプルでcustom-selectとかcustom-fileっていうクラスを見つけました。でも、Bootstrap5では動かないみたいなんです。どうしてですか？」

先生

「いい観察ですね。Bootstrap4まではcustom-*というクラスが使われていましたが、Bootstrap5では廃止され、新しいフォーム用のクラスに統一されています。」

生徒

「廃止ってことは、もう使えないんですか？」

先生

「はい、Bootstrap5では使えません。代わりにform-controlやform-selectといったクラスで統一されていて、見た目もシンプルに扱えるようになっていますよ。」

1. custom-*が廃止された理由

Bootstrap4では、フォームの見た目を整えるためにcustom-selectやcustom-fileといった特別なクラスが存在しました。しかし、クラスが増えると初心者にとって覚えることが多くなり、またブラウザによって動作が不安定になることもありました。

そこでBootstrap5では、フォームのクラスが整理され、より直感的に使えるように改善されました。無駄なクラスを減らして、form-controlやform-selectといった統一された名前に変わったのです。

2. セレクトボックスの移行方法

Bootstrap4までは、ドロップダウン式のセレクトボックスにcustom-selectを使っていました。Bootstrap5ではこれがform-selectに変わりました。


<!-- Bootstrap4の例 -->
<select class="custom-select">
  <option selected>選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
</select>


<!-- Bootstrap5の例 -->
<select class="form-select">
  <option selected>選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
</select>

ブラウザ表示

このように、クラス名をcustom-selectからform-selectに書き換えるだけで、Bootstrap5に対応できます。

3. ファイル入力の移行方法

ファイル選択フォームも同じように変更されています。Bootstrap4ではcustom-fileとcustom-file-labelを組み合わせて使っていましたが、Bootstrap5ではよりシンプルになり、form-controlに一本化されました。


<!-- Bootstrap4の例 -->
<div class="custom-file">
  <input type="file" class="custom-file-input" id="fileUpload">
  <label class="custom-file-label" for="fileUpload">ファイルを選択</label>
</div>


<!-- Bootstrap5の例 -->
<input class="form-control" type="file" id="fileUpload">

ブラウザ表示

ラベルを別に書かなくても、ブラウザ標準のUIがBootstrap風にデザインされるようになりました。

4. チェックボックスとラジオボタン

Bootstrap4ではcustom-checkboxやcustom-radioを使っていましたが、Bootstrap5ではform-checkに統一されました。よりシンプルで、HTMLの構造も分かりやすくなっています。


<!-- Bootstrap4の例 -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="check1">
  <label class="custom-control-label" for="check1">チェックしてください</label>
</div>


<!-- Bootstrap5の例 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">チェックしてください</label>
</div>

ブラウザ表示

ラジオボタンも同じ書き方で、クラス名をform-checkにするだけです。