Bootstrapフォームの差分を徹底解説！custom-*廃止から新フォームコントロールへの移行手順

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

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

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

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

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

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. ファイル入力の移行方法

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. チェックボックスとラジオボタン

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フォームへの移行のコツ

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>