Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Bootstrap5 への移行

Bootstrap のソース、ドキュメント、およびコンポーネントの変更を要約し、具体的な変更内容を記すことで、v4 から v5 への移行をサポートします。

On this page

依存関係

  • 脱jQuery
  • Popper.js を v1.x から v2.x にアップグレード
  • LibSassは非推奨になったため、DartSassに切り替え
  • ドキュメントのビルドを Jekyll から Hugo に切り替え

ブラウザサポート

  • Dropped Internet Explorer 10 and 11
  • Dropped Microsoft Edge < 16 (Legacy Edge)
  • Dropped Firefox < 60
  • Dropped Safari < 10
  • Dropped iOS Safari < 10
  • Dropped Chrome < 60
  • Dropped Android < 6

ドキュメントの変更

  • トップページ、レイアウト、フッターのデザインを変更しました。
  • 新しい Percel ガイドを追加しました。
  • v4のテーマページに代わり、新しいCustomizeセクションを追加しました。Sass、グローバルな設定オプション、カラースキーム、CSS変数などの新しい詳細が含まれています。
  • すべてのフォームドキュメントをForms セクションに再編成し、コンテンツをより焦点の定まったページに分割しました。
  • 同様に、[Layoutト]セクション(/docs/5.0/layout/breakpoints/)を更新し、グリッドの内容をより明確にしました。
  • 「Navs」ページの名前を「Navs & Tabs」に変更しました。
  • 「Checks」ページの名称を「Checks & radios」に変更しました。
  • ナビバーのデザインを変更し、新しいサブナビを追加して、サイトやドキュメントのバージョンを簡単に操作できるようにしました。
  • 検索フィールドに新しいキーボードショートカットを追加しました。Ctrl + /。

Sass

  • 冗長な値を容易に削除できるように、デフォルトの Sass マップのマージを廃止しました。今後は、$them-colors のように、すべての値を Sass マップで定義する必要があります。Sassマップの扱い方を確認してください。

  • Breaking YIQ色空間は使わないので、color-yiq() 関数と関連する変数を color-contrast() に改名しました。＃30168

    • $yiq-contrasted-thresholdは$min-contrast-ratio` に名前を変更しました。
    • $yiq-text-dark と $yiq-text-light はそれぞれ $color-contrast-dark と $color-contrast-light に名前を変更しました。

  • Breaking 印刷スタイルと $enable-print-styles 変数を削除しました。印刷表示クラスはまだ残っています。#28339。

  • Breaking 関数の color(), theme-color(), gray() を廃止し、変数を使用するようにしました。#29083。

  • Breaking theme-color-level() 関数を color-level() に改名し、$theme-color 色のみではなく、任意の色を受け付けるようになりました。#29083 Watch out: color-level() は後に v5.0.0-alpha3 で削除されました。

  • Breaking 簡潔にするために、$enable-prefers-reduced-motion-media-query と $enable-pointer-cursor-for-buttons の名前を $enable-reduced-motion と $enable-button-pointers に変更しました。

  • Breaking mixin の bg-gradient-variant() を削除しました。要素にグラデーションを追加するために、生成された .bg-gradient-* クラスの代わりに、.bg-gradient クラスを使用します。

  • Breaking **以前に非推奨とされた mixin を削除しました。

    • hover, hover-focus, plain-hover-focus, hover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide() (関連するユーティリティクラスである .text-hide も削除)
    • visibility()
    • form-control-focus()

  • Breaking Sass自身のカラースケーリング関数との衝突を避けるために、scale-color() 関数の名前を shift-color() に変更しました。

  • box-shadow mixin が null 値を許容し、複数の引数から none を取り除くようになりました。#30394。

  • {border-radius() mixin がデフォルト値を持つようになりました。

カラーシステム

  • color-level() と $theme-color-interval で動作していたカラーシステムは削除され、新しいカラーシステムが採用されました。コードベースにあるすべての lighten() と darken() 関数は、 tint-color() と shade-color() に置き換えられました。これらの関数は、色の明度を一定量変更する代わりに、その色を白や黒と混ぜ合わせます。shift-color() は、weight パラメータが正か負かに応じて、色の色合いを変えたり、陰影をつけたりします。#30622を参照してください。

  • すべての色に新しい色合いとシェードを追加し、各ベースカラーに 9 つの別々の色を、新しい Sass 変数として提供しました。

  • 色のコントラストを改善しました。カラーコントラスト比を 3:1 から 4.5:1 に変更し、WCAG 2.1 AA コントラストを確保するために、ブルー、グリーン、シアン、ピンクの色を更新しました。また、カラーコントラストの色を $gray-900 から $black に変更しました。

  • カラーシステムをサポートするために、新しいカスタムの tint-color() と shade-color() 関数を追加して、色を適切に混合するようにしました。

グリッドアップデート

  • 新しいブレークポイント！ 1400px 以上の場合の新しいブレークポイント xxl を追加しました。その他のブレークポイントは変更ありません。

  • 改善されたガター は rem で設定されるようになり、v4 よりも狭くなりました（1.5rem、約 24px で 30px から減少）。これにより、グリッドシステムのガターとスペーシングユーティリティーが一致します。

    • 新しい gutter class (.g-*, .gx-*, .gy-*) を追加し、水平/垂直ガター、水平ガター、垂直ガターを制御します。
    • Breaking 新しいガターユーティリティーに合わせて、.no-gutters を .g-0 に名前を変更しました。

  • カラムはもう position: relative が適用されないので、いくつかの要素に .position-relative を追加する必要があるかもしれません。

  • Breaking あまり使わないいくつかの .order-* クラスを削除しました。現在は .order-1 から .order-5 までのクラスのみを提供しています。

  • Breaking ユーティリティで簡単に実現できるので、.media コンポーネントを削除しました。#28265 と flex utilities page for an example を参照してください。)

  • Breaking bootstrap-grid.css は、グローバルなボックスサイジングをリセットする代わりに、box-sizing: border-box をカラムにのみ適用するようになりました。このことにより、グリッドスタイルをより多くの場所で干渉なく使用することができます。

  • enable-grid-classes では、コンテナクラスの生成を無効にしなくなりました。#29146

  • make-col mixin を更新して、サイズを指定しなくてもデフォルトで均等な列になるようにしました。

コンテンツ、リブート、その他

  • RFS がデフォルトで有効になりました。 font-size() mixin を使用した見出しは、ビューポートに合わせて自動的に font-size が調整されます。この機能は、以前の v4 ではオプションでした。

  • Breaking $display-* 変数と $display-font-sizes Sass マップを置き換えるために、ディスプレイのタイポグラフィをオーバーホールしました。また、個々の $display-*-weight 変数を削除して、単一の $display-font-weight にし、font-size を調整しました。

  • 見出しサイズ .display-* に、2つの新しい .display-5 と .display-6 を追加しました。

  • リンクは、特定のコンポーネントの一部でない限り、デフォルトで（ホバー時だけでなく）下線が引かれます。

  • テーブルのデザインを変更 スタイルを更新し、CSS 変数を使って再構築することで、スタイリングをよりコントロールできるようになりました。

  • Breaking ネストされたテーブルはスタイルを継承しなくなりました。

  • Breaking .thead-light と .thead-dark は廃止され、すべてのテーブル要素 (thead, tbody, tfoot, tr, th, td) に使用可能な .table-* バリアントクラスが採用されました。

  • Breaking table-row-variant() mixin は table-variant() に名前が変更され、2 つのパラメータのみを受け取ります。color (カラー名) と $value (カラーコード) です。ボーダーカラーとアクセントカラーは、テーブルファクター変数に基づいて自動的に計算されます。

  • テーブルセルのパディング変数を -y と -x に分割します。

  • Breaking .pre-scrollable クラスを廃止しました。#29135

  • Breaking .text-* ユーティリティはリンクに hover と focus の状態を追加しなくなりました。代わりに .link-* ヘルパークラスを使うことができます。#29267

  • Breaking .text-justify クラスが廃止されました。＃29793

  • <ul> と <ol> 要素の水平方向のデフォルトの padding-left を、ブラウザのデフォルトの 40px から 2rem にリセットしました。

  • これは scroll-behavior: smooth をグローバルに適用します。ただし、prefers-reduced-motion メディアクエリで動きを抑えるように指定したユーザーは除きます。#31877

RTL

  • 水平方向に特化した変数、ユーティリティ、mixin の名前が変更され、フレックスボックスレイアウトに見られるような論理的なプロパティが使用されるようになりました。

フォーム

  • 新しいフローティングフォームを追加しました！ フローティングラベルの例を、完全にサポートされたフォームコンポーネントに昇格させました。新しいフローティングフォームを参照

  • Breaking ネイティブとカスタムのフォーム要素の統合 チェックボックス、ラジオ、セレクト、および v4 でネイティブとカスタムのクラスを持っていたフォームが統合されました。これにより、ほぼすべてのフォーム要素が完全にカスタム化され、そのほとんどがカスタム HTML を必要としません。

    • .custom-check は .form-check になりました。
    • .custom-check.custom-switch は .form-check.form-switch になりました。
    • .custom-select は .form-select になります。
    • .custom-file と .form-file は .form-control の上のカスタムスタイルに置き換えられました。
    • .custom-range は .form-range になりました。
    • ネイティブの .form-control-file と .form-control-range は廃止されました。

  • Breaking .input-group-append と .input-group-prepend を廃止しました。ボタンや .input-group-text を入力グループの直接の子要素として追加すれば OK です。

  • 長年続いていた Missing border radius on input group with validation feedback bug は、バリデーション付きの入力グループに .has-validation クラスを追加することで、ようやく修正されました。

  • Breaking グリッドシステムのために、フォーム固有のレイアウトクラスを廃止しました。 .form-group, .form-row, .form-inline の代わりに、グリッドとユーティリティを使用してください。

  • Breaking フォームラベルは .form-label を必要とするようになりました。

  • Breaking .form-text は display を設定しなくなり、HTML 要素を変更するだけで、インラインやブロックのヘルプテキストを自由に作成できるようになりました。

  • バリデーションアイコンは、<select> に multiple をつけても適用されなくなりました。

  • 入力グループのスタイルを含む、scss/forms/ の下の Sass ファイルのソースを再編成しました。

コンポーネント

  • アラート、パンくず、カード、ドロップダウン、リストグループ、モーダル、ポップオーバー、ツールチップの padding 値を、$spacer 変数に基づいて統一しました。#30564。

Accordion

Alerts

  • アラートにアイコン付きの例が追加されました。)

  • 各アラートの <hr> にはすでに currentColor が使用されているので、カスタムスタイルを削除しました。

Badges

  • Breaking 背景ユーティリティのためのすべての .badge-* カラークラスを廃止しました (例: .badge-primary の代わりに .bg-primary を使用します)。

  • Breaking .badge-pill を廃止し、代わりに .rounded-pill ユーティリティを使用するようになりました。

  • Breaking <a> と <button> 要素の hover と focus スタイルを削除しました。

  • バッジのデフォルトのパディングを .25em/.5em から .35em/.65em に増やしました。

  • padding, background-color, border-radius を削除し、パンくずのデフォルトの外観をシンプルにしました。

  • 新しい CSS カスタムプロパティ --bs-breadcrumb-divider を追加し、CSS を再コンパイルすることなく簡単にカスタマイズできるようになりました。

Buttons

  • Breaking トグルボタンのチェックボックスやラジオは JavaScript を必要としなくなり、新しいマークアップが追加されました。 wrapping 要素を必要としなくなり、<input> に .btn-check を追加し、<label> にある任意の .btn クラスと組み合わせます。#30650。このドキュメントは、ボタンページから新しいフォームセクションに移動しました。

  • Breaking ユーティリティのために .btn-block を捨てました。 .btn に .btn-block を使う代わりに、ボタンを .d-grid と .gap-* ユーティリティでラップして、必要に応じてスペースを確保します。レスポンシブクラスに切り替えると、さらにコントロールしやすくなります。いくつかの例については、ドキュメントを読んでください。

  • 追加のパラメータをサポートするために、button-variant() と button-outline-variant() mixin を更新しました。

  • ボタンを更新し、ホバーやアクティブな状態ではコントラストが高くなるようにしました。

  • 無効化されたボタンには pointer-events: none; が適用されるようになりました。

Card

  • Breaking .card-deck を廃止し、グリッドを採用しました。カードをカラムクラスで囲み、親となる .row-cols-* コンテナを追加することで、カードデッキを再現することができます (ただし、レスポンシブ・アライメントをよりコントロールすることができます)。

  • Breaking .card-columns を廃止し、Masonry を採用しました。#28922。

  • Breaking .card ベースのアコーディオンを 新しいアコーディオンコンポーネントで置き換えました。)

  • 新しい .carousel-dark variant が追加され、暗い色のテキスト、コントロール、インジケータに対応しました (明るい背景に最適)。

  • カルーセルコントロールのシェブロンアイコンを Bootstrap Icons の新しい SVG で置き換えました。

Close buttton

  • Breaking 汎用化するために、.close を .btn-closeに改名しました。

  • 閉じるボタンは、HTML 中の &times; の代わりに、background-image (埋め込み SVG) を使用するようになり、マークアップに手を加えることなく、簡単にカスタマイズできるようになりました。

  • 新しい .btn-close-white バリアントを追加しました。これは filter: invert(1) を使用して、暗い背景に対してより高いコントラストの閉じるアイコンを有効にします。

Collapse

  • アコーディオンのスクロールアンカリングを削除しました。

  • オンデマンドのダークドロップダウン用に、新しい .dropdown-menu-dark バリアントと関連する変数を追加しました。

  • $dropdown-padding-x の新しい変数を追加しました。

  • ドロップダウンのディバイダーを暗くして、コントラストを改善しました。

  • Breaking ドロップダウンのすべてのイベントは、ドロップダウントグルボタンでトリガーされ、親要素にバブリングされるようになりました。

  • ドロップダウンメニューには、ドロップダウンの位置が静的な場合は data-bs-popper="static" 属性が設定され、ドロップダウンがナビバーにある場合は data-bs-popper="none" 属性が設定されるようになりました。これは、私たちのJavaScriptによって追加され、Popper のポジショニングに干渉することなく、カスタムポジションスタイルを使用するのに役立ちます。

  • Breaking ドロップダウンプラグインの flip オプションを廃止し、ネイティブの Popper 設定を採用しました。flip モディファイアの fallbackPlacements オプションに空の配列を渡すことで、反転動作を無効にできるようになりました。

  • ドロップダウンメニューは、新しい autoClose オプションで [auto close behavior](/docs/5.0/components/dropdowns/#auto-close-behavior を処理することで、クリッカブルにすることができるようになりました。) このオプションを使用すると、ドロップダウンメニューの内側または外側でクリックを受け付けて、インタラクティブなメニューにすることができます。

  • ドロップダウンは、<li> で囲まれた .dropdown-item をサポートするようになりました。

Jumbotron

List group

  • .nav-link クラスに、font-size, font-weight, color, :hover color の新しい null 変数を追加しました。
  • Breaking ナバーは、内部にコンテナを必要とするようになりました（スペーシングの要件と必要な CSS を大幅に簡素化します）。

Offcanvas

Pagination

  • ページネーションのリンクにカスタマイズ可能な margin-left が追加され、リンクが離れているときには動的にすべての角が丸くなります。

  • ページネーションのリンクに「トランジション」を追加しました。

Popovers

  • Breaking デフォルトのポップオーバーのテンプレートで、.arrow の名前が .popover-arrow に変更されました。

  • オプションの whiteList の名前を allowList に変更しました。

Spinners

  • スピナーが prefers-reduced-motion: reduce に従い、アニメーションを遅くするようになりました。#31882。

  • スピナーの垂直方向の配置を改善しました。

Toasts

  • 位置決めユーティリティ](/docs/5.0/utilities/position/)を使って、.toast-container の中でトーストを position できるようになりました。

  • デフォルトのトースト時間を5秒に変更しました。

  • トーストから overflow: hidden を削除し、calc() 関数で適切な border-radius に置き換えました。

Tooltips

  • Breaking デフォルトのツールチップのテンプレートで、.arrow を .tooltip-arrowに改名しました。

  • Breaking fallbackPlacements のデフォルト値を ['top', 'right', 'bottom', 'left'] に変更し、ポッパー要素の配置を改善しました。

  • Breaking whiteList オプションを allowList に改名しました。

ユーティリティ

  • Breaking RTL サポートの追加に伴い、いくつかのユーティリティの名前を変更し、prefix に論理的なプロパティ名を使用するようにしました。

    • .left-* と .right-* の名前を .start-* と .end-* に変更しました。
    • float-left と .float-right の名前が .float-start と .float-end に変更されました。
    • .border-left と .border-right の名前を .border-start と .border-end に変更しました。
    • .rounded-left と .rounded-right の名前を .rounded-start と .rounded-end に変更しました。
    • .ml-* と .mr-* の名前を .ms-* と .me-* に変更しました。
    • .pl-* と .pr-* の名前を .ps-* と .pe-* に変更しました。
    • .text-left と .text-right の名前を .text-start と .text-end に変更しました。

  • Breaking デフォルトでネガティブマージンを無効にしました。

  • 新しい .bg-body クラスを追加しました。これは <body> の背景を追加の要素に素早く設定するためのものです。

  • top, right, bottom, left に新しい position utilities を追加しました。値はそれぞれのプロパティに対して、0、50%、100% を含みます。

  • 新しい .translate-middle-x と .translate-middle-y ユーティリティを追加しました。

  • 新しい border-width ユーティリティーを追加しました。

  • Breaking .text-monospace の名前を .font-monospace に変更しました。

  • Breaking .text-hide を削除しました。これはテキストを隠すための時代遅れの方法で、もう使われるべきではありません。

  • .fs-* ユーティリティを font-size ユーティリティのために追加しました (RFS が有効な場合)。これらは、HTML のデフォルトの見出しと同じスケール（1～6、大～小）を使用しており、Sassマップで変更することができます。

  • Breaking 簡潔さと一貫性のために、.font-weight-* ユーティリティーの名前を .fw-* に変更しました。

  • Breaking 簡潔さと一貫性のために、.font-style-* ユーティリティーの名前を .fst-* に変更しました。

  • CSS Grid と flexbox レイアウト用の表示ユーティリティと新しい gap ユーティリティ (.gap) を追加しました。

  • Breaking .rounded-sm と rounded-lg を削除し、.rounded-0 から .rounded-3 という新しいクラスのスケールを導入しました。#31687。

  • 新しい line-height ユーティリティを追加しました。新しい line-height ユーティリティーを追加しました: .lh-1, .lh-sm, .lh-base, .lh-lg です。こちらをご覧ください。

  • CSS の .d-none ユーティリティーを移動して、他の表示ユーティリティーよりも重視するようにしました。

  • .visually-hidden-focusable ヘルパーを拡張し、:focus-within を使用してコンテナ上でも動作するようにしました。

ヘルパー

  • Breaking Responsive embed helpers はratio helpers に名前が変更され、新しいクラス名と改善された動作、そして便利な CSS 変数が追加されました。

    • クラスは、アスペクト比の by を x に変更するように名前が変更されました。例えば、.ratio-16by9 は .ratio-16x9 になりました。
    • .embed-responsive-item と要素グループのセレクタを廃止し、よりシンプルな .ratio > * セレクタを採用しました。クラスは不要になり、比率ヘルパーはどんな HTML 要素でも動作するようになりました。
    • Sass マップの $embed-responsive-aspect-ratios は $aspect-ratios に名前が変更され、その値はクラス名とパーセンテージを key: value のペアとして含むように単純化されました。
    • Sass マップの各値に対して、CSS 変数が生成され、含まれるようになりました。.ratio の --bs-aspect-ratio 変数を変更して、任意の カスタムアスペクト比 を作成することができます。

  • Breaking 「スクリーンリーダー」クラスは “visually hidden” class になりました。。)

    • Sass ファイルを scss/helpers/_screenreaders.scss から scss/helpers/_visually-hidden.scss に変更しました。
    • .sr-only と .sr-only-focusable の名前を .visually-hidden と .visually-hidden-focusable に変更しました。
    • Mixin sr-only() と sr-only-focusable() の名前を visually-hidden() と visually-hidden-focusable() に変更しました。

  • bootstrap-utilities.css には、ヘルパーも含まれるようになりました。ヘルパーをカスタムビルドでインポートする必要はありません。

JavaScript

  • jQuery への依存をやめ、プラグインを通常の JavaScript に書き換えました。

  • Breaking すべての JavaScript プラグインのデータ属性は、Bootstrap の機能をサードパーティやあなた自身のコードと区別するために、名前付きになりました。例えば、data-toggle の代わりに data-bs-toggle を使用します。

  • すべてのプラグインは、第一引数として CSS セレクタを受け付けるようになりました。 プラグインの新しいインスタンスを作成するために、DOM 要素または任意の有効な CSS セレクタを渡すことができます。

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • dropdown = new bootstrap.Dropdown('[data-bs-toggle]') ```popperConfig` は、Bootstrap のデフォルトの Popper 設定を引数として受け取る関数として渡すことができ、このデフォルトの設定をあなたの方法でマージすることができます。ドロップダウン、ポップオーバー、ツールチップに適用されます。

  • Popper 要素のより良い配置のために、fallbackPlacements のデフォルト値が ['top', 'right', 'bottom', 'left'] に変更されました。ドロップダウン、ポップオーバー、ツールチップに適用されます。

  • _getInstance() → getInstance() のように、パブリックスタティックメソッドからアンダースコアを削除しました。