Bootstrap３から５への変更点まとめ（デザイナー視点）

※当サイトにはプロモーションが含まれています。

最近、Bootstrap３で作成されていたサイトを、Bootstrap５に更新しました。

その時にメモした備忘録です。

この記事の目次
  1. Bootstrap3からBootstrap5への変更点
  2. よく使用するクラスのまとめ

Bootstrap3からBootstrap5への変更点

Bootstrap３から、Bootstrap５への変更点になります。

1.グリッドシステム

Bootstrap３で使用していたクラス

.col-xs-_, .col-sm-_, .col-md-_, .col-lg-_

Bootstrap５で使用することになったクラス

.col-_, .col-sm-_, .col-md-_, .col-lg-_, .col-xl-_, .col-xxl-_

 Bootstrap５でのコード例

<div class="col-12 col-md-6">...</div>

変更点

  • xsブレークポイントの指定が不要。
  • xlとxxlの新しいブレークポイントが追加。
  • ギャップ（間隔）を設定するクラスが追加（例:g-3）。

2. ボタン

Bootstrap３で使用していたクラス

.btn-xs, .btn-sm, .btn-lg

Bootstrap５で使用することになったクラス

.btn-sm, .btn-lg

 Bootstrap５でのコード例

<button class="btn btn-sm">Small Button</button>

変更点

  • btn-xsは削除され、使用不可。

3. ナビゲーションバー

Bootstrap３で使用していたクラス

.navbar-default, .navbar-fixed-top, .navbar-fixed-bottom, .navbar-inverse

Bootstrap５で使用することになったクラス

.navbar, .fixed-top, .fixed-bottom, .navbar-dark, .navbar-light

 Bootstrap５でのコード例

<nav class="navbar navbar-light bg-light fixed-top">...</nav>

4. フォームコントロール

Bootstrap３で使用していたクラス

.input-lg, .input-sm, .form-horizontal, .form-group

Bootstrap５で使用することになったクラス

.form-control-lg, .form-control-sm, .row

 Bootstrap５でのコード例

<div class="row">
<div class="col-md-6">
<input type="text" class="form-control-lg">
</div>
</div>

変更点

  • .form-horizontalと、.form-groupがシンプル化。

5. ユーティリティクラス

Bootstrap３で使用していたクラス

.pull-left, .pull-right, .center-block

Bootstrap５で使用することになったクラス

.float-start, .float-end, .mx-auto

 Bootstrap５でのコード例

<div class="float-end">右寄せ</div>

変更点

  • レスポンシブ対応のため、float-{size}-startやfloat-{size}-endが追加。

6. アラート

Bootstrap３で使用していたクラス

.close

Bootstrap５で使用することになったクラス

.btn-close

 Bootstrap５でのコード例

<div class="alert alert-danger">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

7. モーダル

Bootstrap３で使用していたクラス

.modal-sm, .modal-lg

Bootstrap５で使用することになったクラス

.modal-dialog-scrollable, .modal-dialog-centered, .modal-fullscreen

 Bootstrap５でのコード例

<div class="modal-dialog modal-dialog-scrollable">
...
</div>

8. クラス well

Bootstrap３で使用していたクラス

.well

 Bootstrap５での代替方法

<div class="p-3 border bg-light">...</div>

変更点

  • wellクラスは削除され、ユーティリティクラスで代替。

9. クラス visible

Bootstrap３では、特定のブレークポイントで要素を表示または非表示にするためにvisible-* クラスが提供されていましたが、Bootstrap 4以降（Bootstrap 5を含む）ではこの方法が廃止されました。

Bootstrap５では、d-*（displayプロパティ）クラスが導入されました。

Bootstrap３でのコード例

<!-- 小さい画面で表示 -->
<div class="visible-xs">小さい画面でのみ表示</div>
<!-- 中くらいの画面で表示 -->
<div class="visible-md">中くらいの画面でのみ表示</div>

 Bootstrap５でのコード例

<!-- 小さい画面で表示 -->
<div class="d-block d-sm-none">小さい画面でのみ表示</div>
<!-- 中くらいの画面で表示 -->
<div class="d-none d-md-block d-lg-none">中くらいの画面でのみ表示</div>

代替クラス

  • d-* クラスで表示スタイルを制御します。
  • 非表示にする場合: d-none または d-{size}-none
  • 表示にする場合: d-{size}-block, d-{size}-inline, d-{size}-inline-block

ブレークポイントの例

{size} は以下のいずれかを指定

  • sm: 小さい画面（≥576px）
  • md: 中くらいの画面（≥768px）
  • lg: 大きい画面（≥992px）
  • xl: 非常に大きい画面（≥1200px）
  • xxl: 超大きい画面（≥1400px）

10. アイコンの扱い

Bootstrap３で使用していた方法

<span class="glyphicon glyphicon-search"></span>

Bootstrap５での代替方法

Glyphiconsは廃止。代わりに外部ライブラリやSVGを使用。

1. Bootstrap Icons

<i class="bi bi-search"></i>

2. SVGアイコン

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="..."></path>
</svg>

よく使用するクラスのまとめ

○背景色

bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white

○文字揃え

text-start, text-center, text-end

○マージンとパディング

m-{0-5}, p-{0-5}, mx-auto, my-3, mt-5

○レスポンシブ画像

img-fluid

○レスポンシブ表示

d-none, d-block, d-{size}-none, d-{size}-block

Bootstrap３から、Bootstrap５へ変更になった点の備忘録でした。