Bootstrap4から5のクラス名変更一覧！初心者向けdeprecatedと置き換えパターン早見表
生徒
「先生、Bootstrapを勉強しているんですが、バージョン4と5でクラス名が違うことがあって混乱します。どうやって確認すればいいですか？」
先生
「とても良い気づきですね。Bootstrap4から5にかけて、古いクラス名が使えなくなり、新しいクラスに置き換えられている部分がたくさんあります。こういう古い書き方は『deprecated（非推奨）』と呼ばれますよ。」
生徒
「非推奨ってなんですか？エラーになるんですか？」
先生
「非推奨は、今後使わないほうがいいという意味です。すぐにエラーにはならない場合もありますが、新しいバージョンでは動かなくなることがあるので、新しいクラスに直しておくことが大切です。」
生徒
「なるほど！じゃあ具体的にどのクラスをどう直せばいいのか知りたいです。」
先生
「では、Bootstrap4から5にかけてのクラス名変更を、早見表で見ていきましょう！」
1. Bootstrap4から5で変更された背景
Bootstrapは、Webページをきれいに整えるための便利な道具です。バージョンが変わるときには、より分かりやすい名前に統一されたり、最新のブラウザに合わせた仕様に調整されることがあります。その結果、古いクラスが廃止され、新しいクラスが登場しました。
例えば、昔の地図に載っていた町名が新しい地図では変わっているように、Bootstrapでもクラス名が刷新されるのです。
2. クラス名変更の代表例
ここでは代表的な変更例を紹介します。初心者でも混乱しやすい部分を中心にまとめました。
| Bootstrap4（deprecated） | Bootstrap5（新しいクラス） | 説明 |
|---|---|---|
.form-group |
.mb-3 |
フォームの余白設定。シンプルにマージン指定で代用。 |
.badge-pill |
.rounded-pill |
丸みを帯びたバッジ。角丸クラスに統合。 |
.input-group-append |
不要（構造を簡略化） | 追加ボタンはそのまま.input-group内に配置。 |
.input-group-prepend |
不要（構造を簡略化） | 同様にシンプルな構造へ。 |
.custom-select |
.form-select |
セレクトボックスの統一クラス。 |
.float-left |
.float-start |
左寄せがstartに変更。 |
.float-right |
.float-end |
右寄せがendに変更。 |
.ml-* |
.ms-* |
margin-leftがmargin-startに変更。 |
.mr-* |
.me-* |
margin-rightがmargin-endに変更。 |
3. 具体例で違いを確認しよう
それでは、実際にフォームとバッジのクラス変更を見比べてみましょう。
<!-- Bootstrap4の例 -->
<div class="form-group">
<label for="name">名前</label>
<input type="text" class="form-control" id="name">
</div>
<span class="badge badge-pill badge-primary">旧バッジ</span>
<!-- Bootstrap5の例 -->
<div class="mb-3">
<label for="name" class="form-label">名前</label>
<input type="text" class="form-control" id="name">
</div>
<span class="badge rounded-pill bg-primary">新バッジ</span>
4. float系の違い
Bootstrap4では.float-leftや.float-rightを使っていましたが、Bootstrap5では.float-startと.float-endに統一されました。これは、左右の表現を「開始」「終了」とすることで、右から左に読む言語（アラビア語など）にも対応しやすくなったためです。
<!-- Bootstrap4の例 -->
<div class="float-left">左寄せ</div>
<div class="float-right">右寄せ</div>
<!-- Bootstrap5の例 -->
<div class="float-start">新しい左寄せ</div>
<div class="float-end">新しい右寄せ</div>
このように、クラス名がより国際的で柔軟な書き方になっています。
5. マージンとパディングの書き方変更
Bootstrap4では.ml-3や.mr-2のように、左右を直接指定していました。しかしBootstrap5では、これが.ms-3（margin-start）、.me-2（margin-end）に置き換えられました。これも、右から左に読む言語を意識した変更です。
<!-- Bootstrap4の例 -->
<div class="ml-3 mr-2">古い余白指定</div>
<!-- Bootstrap5の例 -->
<div class="ms-3 me-2">新しい余白指定</div>
こうした細かい違いを一つずつ覚えていくと、移行作業がとてもスムーズになります。
6. 早見表を活用して効率的に移行しよう
すべてのクラス名を丸暗記する必要はありません。まずは代表的な置き換えを覚え、あとは早見表を参考にしながら直していけば十分です。Bootstrap公式ドキュメントにも移行ガイドがありますが、初心者にとってはシンプルな早見表が便利です。
このように、deprecatedと新しいクラスを対比させて覚えることで、少しずつ理解が深まり、Bootstrap5の最新の書き方に自然と慣れていけます。
