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

生徒

「Bootstrap3から5にアップグレードするときに、フォームのデザインが崩れるって聞いたんですがどうすればいいんですか？」

先生

「フォームのクラス名やバリデーション（入力内容のチェック方法）が変わっているので、その部分を確認して修正する必要があります。」

生徒

「バリデーションって何ですか？」

先生

「例えばメールアドレスを入力する欄で、間違った形式だとエラーを出す仕組みのことです。Bootstrap5では専用のクラスを使って見た目のエラー表示が簡単にできるんです。」

1. Bootstrap3と5でのフォーム構造の違い

Bootstrap3ではフォームを作成するときに「form-group」「control-label」「form-control」といったクラスを使っていました。Bootstrap5でも「form-control」は引き続き使いますが、ラベルやレイアウトの書き方に違いがあります。

特に「.form-group」は廃止され、「mb-3」などのマージンクラスを使ってスペースを調整する方式に変わりました。つまり「まとめ用の箱」を作るのではなく、直接ユーティリティクラスを使う形です。

2. フォームラベルの変更点

Bootstrap3ではラベルに「.control-label」を付けていましたが、Bootstrap5では不要になりました。単純に<label>タグを使えば自動的に適切なスタイルが適用されます。


<!-- Bootstrap3 -->
<div class="form-group">
  <label class="control-label">メールアドレス</label>
  <input type="email" class="form-control">
</div>


<!-- Bootstrap5 -->
<div class="mb-3">
  <label class="form-label">メールアドレス</label>
  <input type="email" class="form-control">
</div>

ブラウザ表示

3. バリデーション用クラスの変化

Bootstrap3ではJavaScriptと組み合わせてエラー表示を工夫していましたが、Bootstrap5では「is-valid」「is-invalid」というクラスを追加するだけで、入力欄に緑色や赤色の枠線を表示できます。

また、エラーメッセージには「.invalid-feedback」を使うことで、見た目が統一されたメッセージを簡単に表示できます。


<div class="mb-3">
  <label class="form-label">ユーザー名</label>
  <input type="text" class="form-control is-invalid">
  <div class="invalid-feedback">この欄は必須です。</div>
</div>

ブラウザ表示

4. 横並びフォーム（フォームレイアウト）の違い

Bootstrap3では「form-horizontal」を指定してラベルと入力欄を横並びにしていましたが、Bootstrap5ではグリッドシステムを使って表現します。つまり、レイアウト用のユーティリティを組み合わせる方式になったのです。


<!-- Bootstrap3 -->
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control">
    </div>
  </div>
</form>


<!-- Bootstrap5 -->
<form>
  <div class="row mb-3">
    <label class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control">
    </div>
  </div>
</form>

ブラウザ表示

5. チェックボックスとラジオボタンの変更

Bootstrap3では「checkbox」「radio」というクラスをラップ要素に使っていましたが、Bootstrap5では「form-check」を使います。そして、<input>には「form-check-input」、ラベルには「form-check-label」を付けます。


<!-- Bootstrap5 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">利用規約に同意する</label>
</div>

ブラウザ表示

6. 移行時のチェックリスト

最後に、Bootstrap3や4から5に移行する際にフォームやバリデーションで確認すべきチェック項目をまとめます。

「.form-group」は削除し、「mb-3」などのユーティリティクラスで余白を調整する。
ラベルは「.control-label」ではなく「.form-label」を使う。
エラーメッセージには「.invalid-feedback」、成功時には「.valid-feedback」を使う。
入力欄のエラースタイルは「is-invalid」「is-valid」を付与する。
横並びフォームは「form-horizontal」ではなくグリッドシステムで作成する。
チェックボックス・ラジオボタンは「form-check」を使って統一する。

これらを順番に確認すれば、フォームが崩れたりエラー表示が効かなくなったりする問題を防ぐことができます。

まとめ

ここまで、Bootstrapのフォームに関する基本的な考え方から、Bootstrap3とBootstrap5の違い、そしてバリデーションやフォームレイアウトの移行時に注意すべきポイントについて詳しく見てきました。フォームは、ログイン画面やお問い合わせ画面、会員登録画面など、ほとんどのWebサイトで必ず使われる重要なパーツです。そのため、Bootstrapのバージョンアップ時にフォームの見た目や動作が崩れてしまうと、ユーザーの使いやすさや信頼感に大きな影響を与えてしまいます。

Bootstrap3では「form-group」や「control-label」、「form-horizontal」といった専用のクラスを使ってフォーム全体の構造を組み立てていました。しかしBootstrap5では、こうした専用クラスの多くが整理・廃止され、よりシンプルで柔軟なユーティリティクラス中心の設計に変わっています。これにより、マージン調整は「mb-3」などのクラスで行い、横並びレイアウトはグリッドシステムを組み合わせて表現する形になりました。この考え方の違いを理解することが、移行作業をスムーズに進めるための大きなポイントです。

また、Bootstrap5のバリデーションは非常に分かりやすく、入力欄に「is-valid」や「is-invalid」を付けるだけで、ユーザーに直感的なフィードバックを与えることができます。エラーメッセージも「invalid-feedback」や「valid-feedback」を使えば、デザインが統一された状態で表示できるため、JavaScriptの処理と組み合わせることで、実用的で見やすいフォームを簡単に作成できます。初心者の方でも、クラス名の役割を理解すれば、複雑な処理を覚えなくてもフォームの完成度を高められる点は、Bootstrap5の大きな魅力といえるでしょう。

チェックボックスやラジオボタンについても、「form-check」を中心とした構造に統一され、HTMLの記述が分かりやすくなりました。ラベルと入力欄の関係が明確になることで、保守性や可読性が向上し、後から修正する際にも迷いにくくなります。Bootstrapでフォームを作る際は、単に見た目を整えるだけでなく、構造が整理されているかどうかを意識することが大切です。

まとめとしてのサンプルフォーム

最後に、ここまで学んだ内容を踏まえた、Bootstrap5のフォームとバリデーションを組み合わせたシンプルなサンプルを確認してみましょう。基本的な入力欄、エラー表示、レイアウトの考え方が一通り含まれています。


<form>
  <div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control is-invalid">
    <div class="invalid-feedback">正しいメールアドレスを入力してください。</div>
  </div>

  <div class="row mb-3">
    <label class="col-sm-3 col-form-label">パスワード</label>
    <div class="col-sm-9">
      <input type="password" class="form-control">
    </div>
  </div>

  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="agree">
    <label class="form-check-label" for="agree">利用規約に同意する</label>
  </div>

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

ブラウザ表示

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

生徒

「Bootstrap5のフォームって、最初はクラスが減って逆に難しく感じたんですけど、考え方が分かるとスッキリしますね。」

先生

「そうですね。Bootstrap5は、専用クラスに頼るというより、ユーティリティとグリッドを組み合わせて作る発想が大事なんです。」

生徒

「バリデーションも、クラスを付けるだけでエラー表示ができるのは便利だと思いました。実務でもすぐ使えそうです。」

先生

「その通りです。入力チェックはユーザー体験に直結するので、Bootstrapのバリデーションを正しく使えると、フォームの品質が一気に上がりますよ。」

生徒

「Bootstrap3から5への移行も、チェックリストを見ながら進めれば怖くない気がしてきました。」