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

生徒

「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>

ブラウザ表示