Bootstrap5 への移行

v5.0.0-beta1

RTL

RTL は、まだ実験段階でユーザのフィードバックを受けて改善します。 改善点があれば イシュー をオープンしてください。

Sass

ユーティリティやミックスインで使っている水平方向の変数は、より一貫性のある名前に変更します。left と right を start と end に変更します。

Components

• .dropleft と .dropright を .dropstart と dropend に変更
• .dropdown-menu-*-left と .dropdown-menu-*-right を .dropdown-menu-*-start と .dropdown-menu-*-end に変更
• .bs-popover-left と .bs-popover-right を .bs-popover-start と .bs-popover-end に変更
• .bs-tooltip-left と .bs-tooltip-right を .bs-tooltip-start と .bs-tooltip-end に変更
• .carousel-item-left と .carousel-item-right を .carousel-item-start と .carousel-item-end に変更

Utilities

• .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 に変更

ブレイクポイント用クラスも同様 (例. .text-md-left の代わりに .text-md-start)

Mixins

• border-left-radius() と border-right-radius() を border-start-radius() と border-end-radius() - だけでなく相対的なクラスも同様 (例. .border-bottom-left-radius の代わりに .border-bottom-start-radius)
• caret-left() と caret-right() を caret-start() と caret-end() — caret() ミックスインの引数も left と right から start と end に変更

Variables

• パンくずの RTL 対応で新しい $breadcrumb-divider-flipped を追加
• $navbar-brand-margin-right を $navbar-brand-margin-end に変更
• $pagination-margin-left を $pagination-margin-start に変更
• $form-check-padding-left を $form-check-padding-start に変更
• $form-switch-padding-left を $form-switch-padding-start に変更
• $form-check-inline-margin-right を $form-check-inline-margin-end に変更
• $form-select-feedback-icon-padding-right を $form-select-feedback-icon-padding-end に変更

JavaScript

• JavaScript プラグインのデータ属性には全て名前空間が付与され Bootstrap 機能を区別できるように変更。例えば、data-toggle は data-bs-toggle
• Popper.js を v2.x に更新:
  • Tooltip/Popover や Dropdown プラグインから offset オプションを削除。popperConfig パラメータで実現可能
  • fallbackPlacement オプションは fallbackPlacements に変更

Sass

• Sass スケールカラーとの衝突を防ぐため scale-color() 関数は shift-color() に変更

Utilities

• 垂直/水平方向のポジショニングに .translate-middle-x と .translate-middle-y を追加

Components

Breadcrumbs

• デフォルトのアピアランスから padding、background-color、border-radius を削除
• コンパイルなしでカスタマイズできるように CSS 変数 --bs-breadcrumb-divider を追加

Toasts

• Toasts は .toast-container の中で positioning utilities を使って ポジショニング 可能に

v5.0.0-alpha3

Browser support

• Microsoft Edge レガシー版のサポートを終了。詳細は Browser Support を参照

Sass

• color-level() と $theme-color-interval で機能していたカラーシステムを削除し、新しいカラーシステムを採用。lighten() と darken() 関数は tint-color() と shade-color() に置換。これらの関数は、明度を一定変更する代わりに、色を白または黒のいずれかと混合。scale-color()（beta-1では shift-color() に変更）は、パラメータが正か負かに応じて、色を濃くするか陰影を追加 ＃30622
• スピナーは、アニメーションの速度を落とし、「prefers-reduced-motion：reduce」を尊重 ＃31882

Reboot

• スクロール動作を適用する $enable-smooth-scroll を導入。スムーズスクロールをグローバルに適用し、prefers-reduced-motion メディアクエリを使って動きの縮小を求めるユーザーを除く ＃31877

Buttons

• CSSグリッドクラスを優先して .btn-block を削除 ボタンに .btn-block を適用する代わりに、ボタンのグループが親の .d-grid にラップ、間隔に .gap-* を使用可能に。 個々の「Block buttons」には .w-100 を追加

Forms

• Missing border radius on input group with validation feedback bug は、バリデーション機能を持つ入力グループに .has-validation を追加して修正
• Floating label をフォームコンポーネントに追加 Floating label のページを参照
• ファイル入力は .form-control の使用で、JavaScript や追加の HTML、クラスが不要に
• カラーインプット .form-control-color に cursor:pointer を追加

Utilities

• Text utilities:
  • フォントサイズ用に .fs-* ユーティリティを追加 (RFS を有効にした場合)。これらは HTML のデフォルト見出しと同じレベル(1-6、大から小)を使用、Sassマップで変更可能
  • 簡潔さと一貫性のために .fw-* のように .font-weight-* ユーティリティを使用
  • 簡潔さと一貫性を保つために、.font-style-* ユーティリティを .fst-* に変更
• ユーティリティを表示するために .d-grid を追加
• CSS グリッドレイアウト用の gap ユーティリティ (.gap) を追加

v5.0.0-alpha2

Sass

• border-radius mixin にデフォルトのパラメータを追加。#31571
• xs ブレークポイントのみ次のブレークポイントを更新。#31500
• box-shadow mixin が null を許容し、引数から none を削除。#30394

Docs

• “Nas” を “Navs & Tabs” に変更
• “Screen readers” ページを “Visually hidden” に、ファイル名を visually-hidden に変更
• “Checks” ページを “Checks & radios” に、ファイル名を checks-radios に変更
• check/radio で構成されたボタングループのページを改善
• ドキュメントのスキップリンクを改善
• ドキュメントのナビゲーションを再設計、モバイルでのタップ領域を拡大、サブナビゲーションを合理化
• #31114: アクセシビリティに関するフォームのドキュメントを改善

Layout

• Container 水平パディングが .row のガターサイズに合わせて更新
• #31439 のガターサイズに合わせて更新。グリッドのプロパティに重複があったため、flex: 1 0 100% を削除

Reboot

• font-weight のデフォルト値 null を使用し、 text-align を継承するように th スタイリングを更新

Colors

• カラーコントラスト比を 3:1 から 4.5:1 に変更
• コントラストカラーを $gray-900 から $black に変更
• $green (およびテーマの別名 $success) のコントラストが最小値になるように改善 (#28a745 から #198754 に変更)
• $cyan (およびテーマの別名 $info) をより鮮やかな色に改善 (#17a2b8 から #0dcaf0 に移行)

Forms

• #31383: Checkbox と radio のサイズを 1.25em から 1em に変更。$font-size-base カスタム値でスケーリングを改善

Components

Badges

• #31132: Badges のパディングを .25em/.5em から .35em/.65em に変更

Buttons

• #30639: button-variant() mixin の引数で Button の disalbed 状態を変更可能に
• #30989: Button の hover/active 状態の視認性向上のためコントラストを改善

Carousel

• Carousel の chevron アイコンを Bootstrap Icons の SVG に置換
• .carousel-dark variant を新規追加

Close button

• 名称は .close からより一般的な .btn-close に変更
• Close buttons は HTML で × の代わりに background-image (埋込み型 SVG) を使用, マークアップに触れることなく簡単にカスタマイズ可能に
• カスタマイズのための新しい変数を追加
• .btn-close-white を追加し、ダークな背景で filter: invert(1) を使ってアイコンのコントラストを確保

Collapse

• #31346: Aaccordions のスクロールアンカーを削除

Dropdowns

• .dropdown-menu-dark を追加、関連してダークテーマの Dropdowns 変数も追加
• $dropdown-padding-x 変数を追加
• ダークテーマの Divider コントラストを改善

Navs

• #31035: .nav-link の font-size, font-weight, color, :hover color に null を追加

Pagination

• Pagination リンクに transition を追加 #31396

Popovers

• allowList への whiteList オプション

Toasts

• #31109: 標準の Toasts duration を 5 秒に変更
• #31155: Toasts が表示される前に timeout をクリア
• #31381: Toasts から overflow: hidden を削除、calc() 関数を使って適切な border-radius に置換
• Toasts のカスタマイズ例をドキュメントに追加

Tooltips

• allowList への whiteList オプション

Helpers

• Responsive embed は ratio helpers に。CSS 変数を使って新しいクラス名でビヘイベアも改善
  • アスペクト比用のクラス名は by から x に変更。例えば .ratio-16by9 なら .ratio-16x9
  • .embed-responsive-item を削除、 より単純な .ratio > * セレクターを使用。これ以上のクラスは不要、ratio helper は任意の HTML 要素で機能
  • $embed-responsive-aspect-ratios の Sass マップは $aspect-ratios に変更、key: value ペアの形に簡略化
  • CSS 変数が生成され、Sass マップ値に含まれるようになった。 --aspect-ratio を使って任意の custom aspect ratio を作成
• “Screen reader” クラスは “visually hidden” classes に変更
  • Sass ファイルは scss/helpers/_screenreaders.scss から scss/helpers/_visually-hidden.scss に変更
  • .sr-only と .sr-only-focusable は .visually-hidden と .visually-hidden-focusable に変更
  • sr-only() と sr-only-focusable() mixins は visually-hidden() と visually-hidden-focusable() に変更

Utilities

• #31280: 0、50%、100% の値を含んだ top、right、bottom、left のために position utilities を追加
  • 要素のセンタリングのために translate utilities を追加
  • これらを示すための例を追加
• #31484: border-width utility を追加
• #31473: .d-none の記述箇所を変更し優先度を向上
• .text-monospace を .font-monospace に変更
• 非推奨の .text-hide を削除
• 新しいline-height utilities: .lh-1、.lh-sm、.lh-base、.lh-lg。 詳細はこちら

---

v5.0.0-alpha1

ブラウザサポート

Bootstrap5 のサポートブラウザ詳細は、ブラウザとOS を参照してください。v4 以降、ブラウザのサポートに変更があったものは以下の通りです。

• Internet Explorer 10 と 11 のサポート終了
• Firefox ? のサポートを終了
• Safari ? のサポートを終了
• iOS Safari ? のサポートを終了
• Chrome ? のサポートを終了
• Android ? のサポートを終了

Sass

Sass とコンパイル済みの CSS を変更しました。

• hover、hover-focus、plain-hover-focus そして hover-focus-active mixins を削除。 今後は通常の CSS を使用 #28267
• 非推奨だった mixins の削除
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide() (関連するクラス .text-hide も削除)
  • visibility()
  • form-control-focus()
• Todo: New variables?
• Todo: Rearrange forms source files (under scss/forms/)
• Todo: Rearrange grid source files (under scss/grid/)
• 印刷スタイルと $enable-print-styles 変数を削除。印刷用クラスはそのまま #28339
• color()、theme-color()、gray() 関数を削除 #29083
• theme-color-level() 関数を color-level() に変更し $theme-color だけでなく任意色の指定が可能に #29083
• $enable-grid-classes は container クラスの生成に影響しない #29146
• 簡潔さのために $enable-prefers-reduced-motion-media-query を $enable-reduced-motion に、$enable-pointer-cursor-for-buttons を $enable-button-pointers に変更
• いつかのコンポーネントから line-height を削除、button-size() と pagination-size() は line-height #29271
• button-variant() mixin は 3 つのボタンのステータスに対して背景色の指定可能、color-contrast() によってコントラストが確保されたテキスト色を提供
• button-outline-variant() mixin で $active-color が指定可能、標準では color-contrast() によってコントラストが確保されたテキスト色を提供
• 簡潔さのため Sass マップのマージを省略、$theme-colors のようにすべての値を定義する必要あり。詳細は Sass maps 参照
• YIQ色空間と関係なくなったので color-yiq() 関数と関連する変数を color-contrast() に変更 #30168
  • $yiq-contrasted-threshold は $min-contrast-ratio に変更
  • $yiq-text-dark、$yiq-text-light はそれぞれ $color-contrast-dark、$color-contrast-light に変更
• 簡潔さのため gradient-bg() は $color のみ受付可
• .bg-gradient クラスが代用できるため bg-gradient-variant() mixin を削除
• media-breakpoint-down() は次のブレイクポイントの代わりにブレイクポイント自体を使う。例えばブレイクポイント lg よりも小さいビューポートの場合は media-breakpoint-down(md) ではなく media-breakpoint-down(md) を使う
• media-breakpoint-between() mixin の2番目のパラメータも同様にブレイクポイント自体を使う。sm と lg のブレイクポイント間のビューポートであれば media-breakpoint-between(sm, md) ではなく media-between(sm, lg) を使う

JavaScript

JavaScript とコンパイル済みの JS を変更しました。

• jQuery の依存関係を削除し、プラグインを通常の JavaScript に書き換え
• _getInstance() → getInstance() のような静的メソッドのアンダースコアを削除

カラーシステム

色のコントラストを改善し、より広範囲な色のセットを提供するためにカラーシステムを更新しました。

• AAレベルのコントラストを確保するために、青とピンクのベースカラー (-500) を更新
• それぞれの色に明色・暗色を追加し、Sass 変数として新しい9色を提供
• カラーシステムを提供するために tint-color() と shade-color() 関数を追加

グリッドシステムとレイアウト

レイアウトツールとグリッドシステムを変更しました。

• ユーティリティクラスで代用できる .media コンポーネントを削除 #28265
• グリッドカラムから position: relative を削除
• 水平方向のパディングは烈ではなく、行直下にあるこ要素に適用
  • コードの簡潔化
  • カラムクラスは単独で使用可能、.row の外で使用しても水平方向のパディングは追加なし
• レスポンシブな gutter クラスを使って水平・垂直、2つの方向で gutter 幅を制御可能
• gutter 幅は rem 単位になり、30px から 1.5rem (24px) に減少
• bootstrap-grid.css はグローバルなボックスサイズをリセットせず、box-sizing: border-box をカラムにのみ適用。これにより、各要素に box-sizing: border-box が適用されていなくても、グリッドシステムを利用可能

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

リブート、タイポグラフィ、テーブルなどを変更しました。

• フォントサイズを自動化する RFS が標準で有効 #29152
• <ul> と <ol> の水平方向パディングをブラウザ標準の 40px から 2rem に変更
• テーブルのスタイルを簡素化し、セルのパディングを小さく
• 入れ子になったテーブルのスタイルを非継承
• .thead-light と .thead-dark を削除、すべての表要素 (thead, tbody, tfoot, tr, th and td) に使用可能な .table-* クラスで代用可能
• table-row-variant() は table-variant() に変更し $color (カラー名) と $value (カラー名) のパラメータが指定可能、ボーダーカラーとアクセントカラーは、テーブルの変数に基づいて自動的に計算
• テーブルセルのパディング変数を -y と -x に分離
• .pre-scrollable クラスを削除 #29135
• .text-* ユーティリティは、リンクで自動追加されたホバーとフォーカスを削除、.link-* ヘルパークラスで代用可能 #29267
• .text-justify クラスを削除 #229793

タイポグラフィ

• 新しい $display-font-sizes Sass マップのために $display-* 変数を削除
• ひとつの $display-font-weight のための複数の $display-*-weight 変数を削除
• 2つの .display-* ヘディングスタイルを追加、.display-5 と.display-6
• 既存の見出しのサイズを変更し、一貫性のある font-size に

フォーム

• フォームのドキュメントを独立したトップレベルのセクションに配置
  • 古いフォームページをいくつかのサブページに分割
  • input group のドキュメントを新しいフォームセクションに移動
• input group スタイルを含めて scss/forms/ にある Sass を再編成
• ネイティブとカスタムのチェックボックスとラジオボタンを単一の .form-check クラスに統合
  • 新しいチェックボックスは em/font-size または指定サイズをサポート
  • 新しいチェックボックスが標準で大きく表示され、使い勝手が向上
  • .custom-control と関連するクラスの削除
  • ほとんどの $custom-control 変数の名前を $form-control に変更
• ネイティブセレクトとカスタムセレクトを .form-select クラスに統合
  • .custom-select と関連するクラスを削除
  • ほとんどの $custom-select 変数の名前を $form-select に変更
• ファイル入力コンポーネントを更新、全体的なデザインを統一し HTML を改良
  • 視覚的なバグを解決するため .form-file のマークアップをリファクタリング、CSS の代わりに HTML を使ってボタンのテキストを変更可能
  • ネイティブの .form-control-file と .form-control-range コンポーネントを削除
  • .custom-file を .form-file に変更 (変数含む)
  • focus および :disabled スタイルのサポートを追加
• .custom-range を .form-range に変更 (変数含む)
• マージン用の .form-group を削除 (ドキュメント例を .mb-3 に置換)
• 柔軟なグリッド gutter のために .form-row を削除
• 柔軟なグリッドのために .form-inline を削除
• .input-group の .form-control-plaintext サポートを削除
• .input-group-append と .input-group-prepend を削除、ボタンと .input-group-text を input group の子要素として追加するだけでOK
• フォームラベルは .form-label クラスが必要、Sass 変数でフォームラベルのスタイルを設定可能 #30476

コンポーネント

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

Disable な状態

• ボタン、閉じるボタン、ページネーション、フォームの無効状態に pointer-events: none が追加、これによりコードベースが簡素化され、CSS でアクティブな状態をオーバーライド可能 #29296

Alerts(アラート)

• Todo: Remove auto-darkening of <hr> elements in .alert-* class variants. <hr>s use rgba() for their color, so these should naturally blend anyway.

Badges(バッジ)

バッジは、ボタンとの差別化を図り、ユーティリティクラスをより活用できるように改善されました。

• Todo: Removed and replaced .badge modifier classes with background utility classes (e.g., use .bg-primary instead of .badge-primary)
• Todo: Removed .badge-pill for the .rounded-pill utility class
• Todo: Removed badge’s hover and focus styles for a.badge and button.badge.

Buttons(ボタン)

• チェックボックス/ラジオボタンのトグルは JavaScript プラグインから削除され、CSS のみで実装。form checks　参照。input に .btn-check クラスを追加することができ、.btn とテーマクラスを利用可能 #30650.

Cards(カード)

• カード烈を削除し Mansonry gird を採用 #28922
• カードデッキを削除してグリッドを採用、レスポンシブな動作と柔軟性の向上

Jumbotron(ジャンボトロン)

• Jumbotron コンポーネントを削除、ユーティリティクラス .bg-light と .p-* で表現可能

Navbars(ナブバー)

• ナビバーは、container 内に設置が必要。これにより、スペーシング要件が大幅に簡素化され、v4 でレスポンシブコンテナ用に追加した大規模な CSS オーバーライドが不要に

Pagination(ページネーション)

• ページネーションのリンクにカスタマイズ可能な margin-left が追加され、分離したときに四隅が動的に丸められるように

Popovers(ポップオーバー)

• .arrow クラスが .popover-arrow に変更

Tooltips(ツールチップ)

• .arrow クラスが .tooltip-arrow に変更

Accessibility(アクセシビリティ)

• .sr-only-focusable は .sr-only を必要としない #28720.

Utilities(ユーティリティ)

• .text-monospace クラスは .font-monospace に変更
• ブレイクポイントごとのレスポンシブユーティリティ order 数を減少、最大 .order-12 から .order-5 に #28874.
• line-height に関するユーティリティ、.lh-1, .lh-sm, .lh-base, .lh-lg 追加。 詳細は line-height 参照
• <body> 背景を素早くセットできるように .bg-body を追加
• Todo: Drop .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore
• Todo: Split utilities into property-value utility classes and helpers
• ネガティブマージは標準で無効。$enable-negative-margins: true で有効化できるがファイルサイズがかなり大きくなる可能性あり

Docs(ドキュメント)

• “Wall of browser bugs” の内容が陳腐化したので削除

Build tools(ビルドツール)

• devDependencies をすべて更新
• 現時点での Node.js 最新版 10 と 12 のみをサポート