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

生徒

「先生、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にするだけです。

5. Bootstrap5フォームへの移行のコツ

フォーム関連のcustom-*クラスはすべて廃止され、form-control、form-select、form-checkといった統一的な名前に整理されました。

移行のときは、まずHTMLの中に古いクラスが残っていないか確認し、それぞれ対応する新しいクラスに置き換えることが大切です。クラス名を正しく直すだけで、見た目がBootstrap5の最新デザインに変わります。

プログラミング未経験の方でも、クラス名を変えるだけなら難しくありません。書き換えながらブラウザで確認していけば、安心して移行できます。

まとめ

Bootstrapフォーム移行で押さえておきたい全体像

今回の記事では、Bootstrapフォームにおける大きな変更点として、 Bootstrap4まで使われていたcustom-*クラスが廃止され、 Bootstrap5では新しいフォームコントロールに統一された流れを詳しく解説しました。フォームはお問い合わせ、ログイン、会員登録、管理画面など、ほとんどのWebサイトで必ず使われる重要な要素です。そのため、Bootstrapのバージョンアップに伴うフォーム仕様の違いを正しく理解しておくことは、初心者にとっても非常に大切なポイントになります。

Bootstrap4では、見た目を整えるためにcustom-select、 custom-file、custom-checkboxなど、多くの専用クラスが用意されていました。しかしクラスが増えすぎることで、HTML構造が複雑になり、学習コストが高くなってしまうという課題がありました。そこでBootstrap5では設計が見直され、 form-control、form-select、 form-checkといった分かりやすい名前に整理されています。

この変更により、フォームのHTMLは以前よりもシンプルになり、初心者でも読みやすく、書きやすい構造になりました。また、ブラウザ標準の挙動を活かしたデザインに近づいたことで、環境差による表示崩れも起こりにくくなっています。 Bootstrap5フォームへの移行は、見た目の刷新だけでなく、保守性や安定性の向上にもつながっています。

custom-*廃止後の正しい置き換え方

移行作業で重要なのは、「何をどう置き換えるか」を正しく理解することです。セレクトボックスはcustom-selectからform-selectへ、ファイル入力はcustom-fileからform-controlへ、チェックボックスやラジオボタンはcustom-control系から form-checkへと変更します。基本的にはクラス名を置き換えるだけで動作するケースが多く、 HTMLやJavaScriptの知識が少ない方でも対応しやすい点が特徴です。

古いサンプルコードをそのままコピーしてしまうと、 Bootstrap5ではスタイルが当たらず戸惑うことがあります。その場合は、まずcustom-という名前が残っていないかを確認し、新しいフォームクラスに書き換えてみましょう。それだけで、最新のBootstrapフォームデザインが適用されるはずです。

まとめ用サンプルプログラム


<form class="container py-4">
    <h1 class="mb-3">Bootstrap5フォーム確認サンプル</h1>

    <div class="mb-3">
        <label class="form-label">名前</label>
        <input type="text" class="form-control" placeholder="名前を入力">
    </div>

    <div class="mb-3">
        <label class="form-label">選択肢</label>
        <select class="form-select">
            <option selected>選択してください</option>
            <option value="1">選択肢1</option>
            <option value="2">選択肢2</option>
        </select>
    </div>

    <div class="mb-3">
        <input class="form-control" type="file">
    </div>

    <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" id="checkSample">
        <label class="form-check-label" for="checkSample">
            内容に同意する
        </label>
    </div>

    <button class="btn btn-primary">送信</button>
</form>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「Bootstrap5ではフォームのクラスがかなり整理されているんですね。 custom-*がなくなった理由がよく分かりました。」

先生

「そうですね。初心者でも扱いやすくするために、クラス名や構造がシンプルになっているんです。」

生徒

「古いサンプルが動かなくても、クラス名を置き換えれば対応できると分かって安心しました。」

先生

「その理解で大丈夫です。今回学んだフォーム移行の考え方は、 Bootstrapを使ったWeb制作で必ず役に立ちますよ。」