メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Bootstrap

Bootstrap5設置ガイド

※：(v5.3.0-alpha3)の公開に伴い更新。

PST（米国太平洋時間）2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。

解説はできるだけ最新版（v5.3.0-alpha3）に対応するよう更新しています。

目次を見る 導入を見る

※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。
※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。

このページの項目

Bootstrapとは？

もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。

Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークになる前に、BootstrapはTwitter Blueprintという名で知られていました。数か月の開発期間を経て、Twitter社は最初のHack Week（社内イベント）を開催し、あらゆる技術レベルの開発者が外部の指導を受けずに飛び込んだため、プロジェクトが爆発的に拡大しました。公開前の1年以上の間、同社の社内ツール開発のスタイル・ガイドとして機能し、現在も続いています。

当初2011年8月19日(金)に公開され、その後v2とv3による2つの大きな書き換えを含む20回以上の更新をしてきました。Bootstrap2（2012/1/31公開）では、オプションのスタイル・シートとしてフレームワーク全体にレスポンシブ機能を追加しました。Bootstrap3（2013/8/19公開）は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。

Bootstrap4（2018/1/18公開）では、Sassへの移行とCSSのFlexboxへの移行という2つの重要なアーキテクチャ上の変更を考慮してプロジェクトを再度書き直しました。我々の意図は、新しいCSSプロパティ、依存関係の減少、最新のブラウザ間での新技術の導入を推進することで、Web開発コミュニティを少しずつ前進させる支援をすることです。

最新リリースであるBootstrap5（2021/5/5公開）は、重大な機能変更を最小限に抑えて、v4のコードベースの改善に重点を置いています。既存の機能とコンポーネントを改善し、古いブラウザのサポートを削除し、通常のJavaScriptのjQueryを削除し、ツールの一部としてCSSカスタムプロパティのようなより将来に適したテクノロジーを採用しました。

Bootstrap公式サイトのHistoryより

Bootstrapは当初米Twitter社から提供されていたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなった。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3の時点でhttp://twitter.github.com/bootstrap/からhttp://getbootstrap.comに移転した。

2022年現在、すべてのウェブサイトの約22%で使用されている（年ごとのJavaScriptライブラリの使用統計はこちら）。

※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある（3.0、3.1、3.2を除く）。

名称について

Bootstrapは常に、単にBootstrapと呼ばれなければなりません。前にTwitterも大文字のsもありません。

Bootstrap公式サイトのNameより
Bootstrap
BootStrap
Twitter Bootstrap

ライセンスについて

Bootstrapは、コードがMITライセンス、ドキュメントがクリエイティブ・コモンズにより公開され、2011年の公開から現在まで、著作権はBootstrapの執筆者が保有している。

BootstrapのGitHubのCopyright and licenseより

※もともとはTwitter社も著作権の併記がされていたが、2022年12月にこれを削除している（理由は不明）。

Bootstrap5の特長

  • jQueryがなくても動作が可能になった（jQueryとの依存関係を解消）が、従来の設定でも動作は可能（v6からは動作不可になる予定）
  • Popper v2に対応
  • Internet Explorerをサポート外にして、CSSカスタムプロパティ（CSS変数）が使用可能に
  • RTL（右書き）モードを導入し、各CSSファイルのRTL版も提供
  • ダークモードに対応
  • フォームスタイルをカスタムフォームと統合（設定は従来的に、スタイルはカスタムフォーム的に）
  • ユーティリティAPIによって容易にユーティリティクラスのカスタマイズが可能となり、ユーティリティクラスだけのCSSファイル（bootstrap-utilities.css, bootstrap-utilities.min.css）も提供
  • ES Modulesに対応したJSファイル（bootstrap.esm.js, bootstrap.esm.min.js）を提供
  • BootstrapのJavaScriptプラグインで使用するデータ属性が data-* から data-bs-* に変更
  • 各コンポーネントのJavaScriptの記述をES6(ES2015)に変更
  • RFSによるレスポンシブ・フォントサイズがデフォルトで有効
  • ブレークポイントに超特大（xxl）を追加するなどグリッドシステムを強化
  • CSS Gridレイアウトに対応
  • SassコンパイラがNode Sass（LibSass）からDart Sassに変更
  • リンク部分の下線が無効から有効に

更新履歴

  • PST 2020/6/16にBootstrap v5.0.0-alpha1が公開
  • PST 2020/9/29にBootstrap v5.0.0-alpha2が公開
  • PST 2020/11/11にBootstrap v5.0.0-alpha3が公開
  • PST 2020/12/7にBootstrap v5.0.0-beta1が公開
  • PST 2021/2/10にBootstrap v5.0.0-beta2が公開
  • PST 2021/3/23にBootstrap v5.0.0-beta3が公開
  • PST 2021/5/5にBootstrap v5.0.0が公開
  • PST 2021/5/13にBootstrap v5.0.1が公開
  • PST 2021/6/22にBootstrap v5.0.2が公開
  • PST 2021/8/5にBootstrap v5.1.0が公開
  • PST 2021/9/7にBootstrap v5.1.1が公開
  • PST 2021/10/5にBootstrap v5.1.2が公開
  • PST 2021/10/9にBootstrap v5.1.3が公開
  • PST 2022/5/13にBootstrap v5.2.0-beta1がプレリリース
    ※アップデートの量と前回のリリースからの期間を考慮して、まずはベータ版としてプレリリース。
  • PST 2022/7/19にBootstrap v5.2.0が公開
  • PST 2022/9/8にBootstrap v5.2.1が公開
  • PST 2022/10/3にBootstrap v5.2.2が公開
  • PST 2022/11/22にBootstrap v5.2.3が公開
    ※緊急性の高いバグが見つかったため早急に修正。
  • PST 2022/12/24にBootstrap v5.3.0-alpha1がプレリリース
  • PST 2023/3/24にBootstrap v5.3.0-alpha2がプレリリース
  • PST 2023/4/3にBootstrap v5.3.0-alpha3がプレリリース
    Node Sassのコンパイルエラーをいくつか修正
    ※当初はv5.3.0のベータ版を出す計画だったが取り止めて、次回のアップデートでv5.3.0の安定版を出す予定。
  • v5.3.0での更新予定（2022/05/13のブログ記事より） など。

Bootstrap5.xの変更箇所（設定やCSSスタイルなどをピックアップ）

(v5.3.0-alpha3) 変更内容の詳細

各解説ではv5.3.0-alpha3版での変更も"v5.3.0"と記載しています。

  • webpackでの使用：
    • src/index.html の設定：src="./main.js" の設定を削除
    • package.json の設定："build": "webpack build", ⇒ "build": "webpack build --mode=production",
  • RFSのバージョンがv9.0.6からv10.0.0に
  • アラート：ライブの実例でJavascriptの設定変更
  • モーダル：様々なモーダルコンテンツでJavascriptの設定変更
  • 表示ユーティリティ：インライン・グリッド表示として表示用に .d(-{breakpoint})-inline-grid、印刷用に .d-print-inline-grid を追加

(v5.3.0-alpha2) 変更内容の詳細

各解説ではv5.3.0-alpha2版での変更も"v5.3.0"と記載しています。

  • v5.3.0-alpha1では $headings-color-dark: #fff; の設定だったため見出し文字（<h*>, .h*）がダークモードでは白字になっていたが、v5.3.0-alpha2では $headings-color-dark: null; となりダークモードでも標準の文字色で表示される
  • レイアウト、コンテンツ、フォーム、コンポーネント、ヘルパー、ユーティリティの各解説の以下の項目を名称変更（既に名称変更したものと統一）
    • 「Sass」⇒「CSS」
    • 「変数」⇒「Sass変数」
    • 「マップ」⇒「Sassマップ」
    • 「mixin」⇒「Sassミックスイン」
    • 「ループ」⇒「Sassループ」
    • 「ユーティリティAPI」⇒「SassユーティリティAPI」
  • .text-muted は非推奨になったので、HTML設定内ではすべて .text-body-secondary に変更

【導入】

【カスタマイズ】

  • カラーシステム：ユーティリティの生成でインポートするSassファイルに bootstrap/scss/variables-dark を追加
  • カラーモード：カラーモードの入れ子の項目を削除
  • CSS変数：
    • --bs-{themecolor}-text が --bs-{themecolor}-text-emphasis に変更
    • デフォルトのroot変数
      • フォーカスリンク関連の変数（--bs-focus-ring-*）を追加
      • 角丸の極大の大きさの変数：--bs-border-radius-2xl ではなく、--bs-border-radius-xxl を使用する仕様に変更
      • v5.3.0-alpha1でフォームコントロール関連の変数（--bs-form-control-bg, --bs-form-control-disabled-bg）を追加したが、--bs-body-bg, --bs-secondary-bg に再割り当てたのでv5.3.0-alpha2で削除
      • フォーム入力検証関連の変数（--bs-form-valid-*, --bs-form-invalid-*）を追加
    • フォーカス変数を新設

【コンテンツ】

【フォーム】

  • フォームコントロール：
    • フォームテキストがフォームの概要から移動し、<input> 内の [aria-describedby] を [aria-labelledby] に変更
    • 関連するCSS変数が削除されたので、CSSのCSS変数の項目も削除
  • インプットグループ：基本のインプットグループのラベル付きアドオンにヘルプの例文を追加

【コンポーネント】

【ヘルパー】

【ユーティリティ】

【実例】

  • ダークモードでの表示に対応
  • HTML設定内の .text-muted はすべて .text-body-secondary に変更
  • スターターカテゴリを新設

(v5.3.0-alpha1) 変更内容の詳細

各解説ではv5.3.0-alpha1での変更も"v5.3.0"と記載しています。

ダークモードに対応

※本サイトのライトモードとダークモードの切替は右上のナビゲーションバーで可能（デフォルトはオート（ブラウザの設定に準ずる））。

  • light（デフォルト）とdarkのカラーモードをグローバルにサポート。カラーモードは :root 要素、包括的クラスを持つ要素やコンポーネントのグループや data-bs-theme="light|dark" を持つコンポーネント上で直接グローバルに設定できる。また、新しい color-mode() mixin も組み込まれ、好みに応じて data-bs-theme セレクタかメディアクエリでルールセットを出力できる。
  • カラーモードは各コンポーネントのダークカラーバリエーションを置き換えるので、.btn-close-white, .carousel-dark, .dropdown-menu-dark, .navbar-dark は非推奨に。
  • 新しい拡張カラーシステムを追加。新しいテーマカラー（$theme-colors ではない）を追加し、color と background-color に新しく二次Bodyカラー、三次Bodyカラー、強調文字カラーを使用し、よりニュアンスのあるシステム全体のカラーパレットを実現。これらの新しいカラーは、Sass変数、CSS変数、ユーティリティクラスとして利用できる。
  • テーマカラーのSass変数、CSS変数、ユーティリティクラスを拡張し、強調文字色、淡い背景色、淡い罫線色などを追加。これらはSass変数、CSS変数、ユーティリティクラスとして利用可能。
  • ダークモード特有の再定義を格納するため、新しく _variables-dark.scss スタイルシートを追加。このスタイルシートは、インポートスタック内の既存の _variables.scss ファイルの直後にインポートする必要がある。

詳細は、新設のカラーモードに記載。

【カスタマイズ】

  • Sassのカスタマイズ：
    • インポート：@import "../node_modules/bootstrap/scss/variables-dark";（ダークモードの設定）の設定を追加
    • 変数のデフォルト値：必須にインポートするSassファイルに bootstrap/scss/variables-dark（ダークモードの変数）を追加
  • Sass オプション：$enable-dark-mode を追加
  • カラーシステム：カラーパレットと新色を使用を新設
  • カラーモードを新設
  • CSS変数：root変数内にデフォルトとダークモードを新設し、デフォルトのroot変数に
    • カラーモードの新設に伴い、従来の変数をライトモード（[data-bs-theme=light]）用にし、ダークモード（[data-bs-theme=dark]）用の変数を追加
    • ブレークポイント関連の変数（--bs-breakpoint-**）が復活
    • テキストカラーの変数（--bs-{themecolor}-text）, 淡い背景色の変数（--bs-{themecolor}-bg-subtle）, 淡い罫線の色の変数（--bs-{themecolor}-border-subtle）, 強調文字カラーの変数（--bs-emphasis-color）, 二次カラーの変数（--bs-secondary-color）, 二次背景色の変数（--bs-secondary-bg）, 三次カラーの変数（--bs-tertiary-color）, 三次背景色の変数（--bs-tertiary-bg）, リンクの装飾の変数（--bs-link-decoration）, ボックスシャドウの変数（--bs-box-shadow-*）, フォームコントロールの変数（--bs-form-control-*-bg）などが追加

【フォーム】

  • フォームコントロール：CSS変数を使用した構築に移行
  • フローティングラベル：無効化を新設

【コンテンツ】

  • Reboot：
    • 段落を見出しから分離
    • リンクの color スタイルをCSS変数を使用するように変換し、リンクカラーの不透明度がカスタマイズ可能に

【コンポーネント】

【ユーティリティ】

v5.2.3 変更内容の詳細

大きな設定の変更は見られない。

【コンポーネント】

v5.2.2 変更内容の詳細

【コンポーネント】

v5.2.1 変更内容の詳細

【導入】

【レイアウト】

  • グリッドシステム：列とガターの変数に $grid-row-columns を追加

【コンポーネント】

  • 折り畳み：parent オプションのタイプから jQuery object を外し、デフォルトを false から null に修正
  • ポップオーバー：カスタム containerにモーダルダイアログ内のポップオーバーの設定方法を追加
  • スクロールスパイのオプション
    • threshold を追加
    • rootMargin のデフォルトを 0px 0px -40% から 0px 0px -25% に修正
    • target のタイプから jQuery object を外し、デフォルトを null に修正

【実例】

v5.2.0 変更内容の詳細

各解説の"v5.2.0"での変更はv5.2.0-beta1での変更も含むので、v5.2.0-beta1の変更も合わせて参照して下さい。

【導入】

【カスタマイズ】

【コンテンツ】

  • 文字の体裁の表示見出し：設定するSass変数に $display-font-family と $display-font-style を追加

【フォーム】

【コンポーネント】

  • 各コンポーネントのJavaScriptの記述：document.getElementById('ID') ⇒ document.querySelector('#ID')
  • アラート：アイコン付きで使うアイコンの width と height を 24 ⇒ 1rem に変更
  • ボタングループ：ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）
  • カルーセル：.carousel の data-bs-interval="false" の設定は不可になり削除
  • ドロップダウン：ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）
  • リストグループのチェックボックスとラジオボタン
    • ラベルの設定が input.form-check-input 内の iaria-label 属性から⇒ input.form-check-input の後に label.form-check-label の追加に変更
    • ラジオボタンでの実例を追加
    • アイテム全体をクリックする際の設定：label.form-check-label に .stretched-link（伸長リンク）の追加に変更
  • ナビゲーションバー
  • オフキャンバス
    • ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に
    • Darkオフキャンバスを新設
  • プログレスバー：.progress-bar に aria-label を入れる
  • スクロールスパイ：非表示要素を新設

【ユーティリティ】

【拡張】

  • Bootstrapアイコン：Composerでインストール可能になったのでnpmをPackage managerに変更

(v5.2.0-beta1) 変更内容の詳細

各解説ではv5.2.0-beta1での変更も"v5.2.0"と記載しています。

サイトのデザインを刷新

  • ナビゲーションバーなどの色がより鮮やかに
  • サイドバーのセクションが折りたたまれないシンプルなレイアウトに（モバイルではオフキャンバスで表示）
  • コピーボタンはアイコンのみに
  • 一部の見本に"StackBlitzで編集"ボタンを設置

【導入】

【レイアウト】

  • Z-index：$zindex-toast: 1090; を追加

【コンテンツ】

  • Reboot
    • CSS変数：「CSS変数の追加」にもとの「CSS変数」を加えて更新し、--#{$variable-prefix} を --#{$prefix} に変更
    • 基準のフォントスタック：Arial（基本のwebフォールバック）の位置を移動し、Helvetica Neue（古いiOSとmacOSバージョンのUIフォント）のコメント表記を修正
    • 横仕切り線：「文字の体裁」から移動し、線の幅の設定を height から border-top プロパティにスタイル変更
    • ユーザー入力：<kbd> タグを入れ子にしても太字にならなくなった
  • テーブル

【フォーム】

【コンポーネント】

【ヘルパー】

【ユーティリティ】

【拡張】

【実例】

v5.1.3 変更内容の詳細

  • 設定上の変更は見られない

【コンポーネント】

  • ボタンの設定：v5.1.2で .btn のスタイルに align-self: center を追加していたのを削除

v5.1.2 変更内容の詳細

【導入】

【フォーム】

  • 切替スイッチ：input.form-check-input に role="switch" 属性の設定が必要に

【コンポーネント】

  • モーダルの切替：モーダル1にある「モーダル2を開く」ボタンの設定からも data-bs-dismiss="modal" を削除

v5.1.1 変更内容の詳細

  • bootstrap.css だけでなく、bootstrap-reboot.css, bootstrap-grid.css にも :rootCSS変数を組み込むことになった

【導入】

【カスタマイズ】

【コンテンツ】

【コンポーネント】

【ヘルパー】

【ユーティリティ】

  • 背景ユーティリティ：v5.1.0で .bg-body の color が .text-body と同一になるバグが発生していたのを修正（設定の変更なし）

v5.1.0 変更内容の詳細

【導入】

  • クイックスタート：Popperのバージョンが2.9.2から2.9.3に
  • ツールの構築を開発に貢献に名称変更（構築ツールは、Bootstrapを依存関係として使用することとは関係なく、貢献するためのものであることを明確にするためらしい）

【カスタマイズ】

【レイアウト】

【コンテンツ】

【コンポーネント】

【ユーティリティ】

【ヘルパー】

【実例】

v5.0.2 変更内容の詳細

【レイアウト】

【フォーム】

【コンポーネント】

【ユーティリティ】

v5.0.1 変更内容の詳細

  • 設定上の変更は見られない

v5.0.0 変更内容の詳細

【導入】

【レイアウト】

  • グリッド：mixinの設定に @include make-col(); を追加
  • Z-index：$zindex-modal-backdrop を1040に、$zindex-offcanvas を1050に入れ替え

【コンポーネント】

v5.0.0-beta3 変更内容の詳細

  • ほとんどすべてのコンテンツ、フォーム、コンポーネント、ユーティリティの各解説に「Sass」の項目を追加
  • Emmetショートハンド集を新設

【導入】

【カスタマイズ】

【レイアウト】

【コンポーネント】

【実例】

v5.0.0-beta2 変更内容の詳細

【導入】

  • クイックスタート：Popperのバージョンが2.5.4から2.6.0に
  • ファイルの内容：bootstrap-utilities.css にはユーティリティだけでなく、ヘルパーも組み込まれるようになった。
  • JavaScript：コンポーネント間でロジックを相互化できるようにするベースコンポーネント用に js/dist/base-component.js を新設
  • ツールの構築：SassコンパイラのツールがNode SassからDart Sassに変更され、解説（v4.6.0でバックポート）も追加
  • 右書き：左書きと右書きの同時使用を追加

【カスタマイズ】

【フォーム】

【コンポーネント】

  • カルーセル
  • ドロップダウン
    • ドロップダウンメニューには、ドロップダウンの位置が静的な場合は data-bs-popper="static" 属性が設定され、ドロップダウンがナビゲーションバーにある場合は data-bs-popper="none" が設定されることになった。これはJavaScriptによって追加され、Popperのポジショニングに干渉することなくカスタムのポジショニングスタイルを使用するのに役立つ。
    • ドロップダウンのすべてのイベントがドロップダウン切替ボタンで発動され、親要素にバブルアップされることになった
    • ドロップメニューの配置に配置オプションを追加
    • オプション
      • boundary のデフォルトの設定が scrollParent から clippingParent に変更
      • reference のタイプに object を追加
      • v5.0.0-beta1で廃止された offset が復活
      • popperConfig のタイプに function を追加
  • ナビ&タブ：JavaScript動作のタブ/ピル部分が a.nav-link[href] から button.nav-link[data-bs-target type="button"] に変更（v4.7.0でバックポート）
  • ナビゲーションバー：スクロールを新設（v4.6.0でバックポート）
  • ポップオーバー
    • 無効な要素の設定方法を変更
    • オプション
      • fallbackPlacements の設定タイプとデフォルト値を変更
      • boundary のデフォルトの設定が scrollParent から clippingParent に変更
      • v5.0.0-beta1で廃止された offset が復活
      • popperConfig のタイプに function を追加
  • トースト：設定例にライブを新設（v4.6.0でバックポート）
  • ツールチップ
    • 無効な要素の設定方法を変更
    • オプション
      • fallbackPlacements の設定タイプとデフォルト値を変更
      • boundary のデフォルトの設定が scrollParent から clippingParent に変更
      • v5.0.0-beta1で廃止された offset が復活
      • popperConfig のタイプに function を追加

【ヘルパー】

  • 比率のカスタマイズ：CSSカスタムプロパティを --aspect-ratio から --bs-aspect-ratio に名称変更
  • 伸長リンク：テーブルの場合（裏技）は、機能しない場合があるため削除（v4.6.0でバックポート）
  • 視覚的に非表示ヘルパー：:focus-within を使用して、.visually-hidden-focusable をコンテナでも機能するように拡張

【ユーティリティ】

【拡張】

  • アプローチ：コード規約を追加（v4.6.0でバックポート）

v5.0.0-beta1 変更内容の詳細

【導入】

  • クイックスタート：Popper v2に対応（バージョンが1.16.1から2.5.4に）
  • ツールの構築：RTLCSSを追加
  • RTL（右書き）モードを導入
    それに伴い、水平方向に依存する変数、ユーティリティ、mixinは、より論理的な名前に名称変更 — left（左）と right（右）の代わりに start（行頭）と end（行末）を使用

【カスタマイズ】

【コンポーネント】

  • 他のライブラリとの競合を防ぐため、すべてのJavaScriptプラグインの data 属性に名前空間 bs を追加（例：data-toggle ⇒ data-bs-toggle）
  • パンくずリスト
    • .breadcrumb の設定で padding を 0 に、background-color と border-radius の設定を削除して外観を簡素化
    • 仕切り（旧セパレータ）の変更や削除をするのに、--bs-breadcrumb-divider CSSカスタムプロパティを入れる方法などを追加
  • ドロップダウン
    • ドロップレフト：.dropleft ⇒ .dropstart（RTL導入に伴いクラス名変更）
    • ドロップライト：.dropright ⇒ .dropend（RTL導入に伴いクラス名変更）
    • ドロップメニューの配置（RTL導入に伴いクラス名変更）
      • .dropdown-menu(-{breakpoint})-left ⇒ .dropdown-menu(-{breakpoint})-start
      • .dropdown-menu(-{breakpoint})-right ⇒ .dropdown-menu(-{breakpoint})-end
    • Popper v2対応に伴い、offset オプションを削除（popperConfig パラメータを使用すれば引き続き実行可能）
  • モーダル：show オプションを廃止
  • ポップオーバー、ツールチップ
    • customClass オプションを追加（v4.6.0でバックポート）
    • Popper v2対応に伴い、offset オプションを削除（popperConfig パラメータを使用すれば引き続き実行可能）し、fallbackPlacement オプションは、 fallbackPlacements に名称変更
  • トースト

【ユーティリティ】

  • ユーティリティAPIに state, rtl オプションを追加
    ユーティリティの削除にRTLのユーティリティを削除を追加
  • 枠の罫線ユーティリティ（RTL導入に伴いクラス名変更）
    • .border-left ⇒ .border-start
    • .border-right ⇒ .border-end
    • .border-left-0 ⇒ .border-start-0
    • .border-right-0 ⇒ .border-end-0
  • 境界の角丸ユーティリティ（RTL導入に伴いクラス名変更）
    • .rounded-left ⇒ .rounded-start
    • .rounded-right ⇒ .rounded-end
  • 横の配置ユーティリティ（RTL導入に伴いクラス名変更）
    • .float(-{breakpoint})-left ⇒ .float(-{breakpoint})-start
    • .float(-{breakpoint})-right ⇒ .float(-{breakpoint})-end
  • 位置ユーティリティ
    • .left-{position} ⇒ .start-{position}（RTL導入に伴いクラス名変更）
    • .right-{position} ⇒ .end-{position}（RTL導入に伴いクラス名変更）
    • 要素を中央に配置：.translate-middle-x, .translate-middle-y を追加
  • マージンユーティリティ（RTL導入に伴いクラス名変更）
    • .ml(-{breakpoint})-{size} ⇒ .ms(-{breakpoint})-{size}
    • .mr(-{breakpoint})-{size} ⇒ .me(-{breakpoint})-{size}
  • パディングユーティリティ（RTL導入に伴いクラス名変更）
    • .pl(-{breakpoint})-{size} ⇒ .ps(-{breakpoint})-{size}
    • .pr(-{breakpoint})-{size} ⇒ .pe(-{breakpoint})-{size}
  • 文字の配置ユーティリティ（RTL導入に伴いクラス名変更）
    • .text(-{breakpoint})-left ⇒ .text(-{breakpoint})-start
    • .text(-{breakpoint})-right ⇒ .text(-{breakpoint})-end

【実例】

v5.0.0-alpha3 変更内容の詳細

【導入】

【カスタマイズ】

  • カラー関数：color-level(), lighten(), darken() の各関数と $level, $theme-color-interval の各変数などを廃止し、tint-color(), shade-color(), scale-color() の各関数と $weight 変数などを使用
  • テーマカラー：$dark の設定：$gray-800 ⇒ $gray-900
    これに伴い、.table-dark, .btn-dark, .btn-outline-dark, .alert-dark, .list-group-item-dark, .link-dark, .border-dark, .text-dark, .bg-dark のカラー設定も変更
  • root変数の --bs-font-sans-serif や基準のフォントスタックに "Liberation Sans" を追加（v4.6.0でバックポート）

【フォーム】

【コンポーネント】

  • アコーディオン
    • 「折り畳み」から独立した項目に移動。
    • カードコンポーネントクラス（.card-*）から独自のアコーディオンコンポーネントクラスの設定に変更（.accordion-* を新設）
    • 外枠線のない設定が可能に（.accordion-flush を使用）
  • ブロックボタン：.btn-block を廃止し .d-grid.gap-{size} を使用した設定に変更
  • ページ送りの現在の位置：span.visually-hidden は不要に（v4.6.0でバックポート）

【ユーティリティ】

v5.0.0-alpha2 変更内容の詳細

【導入】

【カスタマイズ】

【フォーム】

【コンポーネント】

  • ボタングループでのチェック/ラジオ切替ボタンをボタンプラグインからボタングループに移動し、アクセシビリティの設定の追加と切替ボタンの設定を変更
  • カルーセルのダーク・バージョン用に .carousel-dark を新設
  • 閉じるボタン：.close を .btn-close にクラス名変更し、span[aria-hidden="true"] > &times; が不要に（アラート、モーダル、トーストも同様）
    暗めの背景に対応するホワイト・バージョン用に .btn-close-white を新設
  • カードコンポーネントによるアコーディオンの設定を調整
  • ドロップダウンメニューのダーク・バージョン用に .dropdown-menu-dark を新設
  • 縦積みピルナビゲーション：グリッドクラスからFlexユーティリティクラスによる設定に変更
  • スクロールスパイ：<body> 以外の要素に [data-spy="scroll"] を設定する場合は [tabindex="0"] を入れる
  • トースト：delay（非表示の遅延時間）のデフォルトが 500（0.5秒）から 5000（5秒）に変更

【ヘルパー】

  • 動画の埋め込みなどアスペクト比を維持するヘルパークラスが .embed-responsive.embed-responsive-**by* から .ratio.ratio-**x* にクラス名変更し、子要素のクラス設定は不要になり、.embed-responsive-item は廃止（項目も「動画の埋め込み」から「比率ヘルパー」に名称変更）。
    Sassマップも $embed-respond-aspect-ratio から $ratio-aspect-ratios に名称変更
    Sassファイルも scss/helpers/_embed.scss から scss/helpers/_ratio.scss に名称変更
  • 支援技術を除くすべてのデバイスの要素を非表示にするクラスを .sr-only, .sr-only-focusable から .visually-hidden, .visually-hidden-focusable にクラス名変更（項目も「スクリーンリーダー」から「視覚的に非表示」に名称変更）
    Sassファイルも scss/helpers/_screenreaders.scss から scss/helpers/_visually-hidden.scss に名称変更

【ユーティリティ】

【拡張】