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

Bootstrap5設置ガイド

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

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

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

目次を見る 導入を見る

※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がプレリリース
  • v5.3.0での更新予定（2022/05/13のブログ記事より） など。

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

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

各解説ではv5.3.0-alpha版、v5.3.0-beta版での変更も"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 に名称変更

【ユーティリティ】

【拡張】

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

【項目の移動】

【導入】

  • 基本のテンプレート
    • レスポンシブ・メタタグの設定で shrink-to-fit=no が不要に
    • jQueryの設置が不要に
  • ファイルの内容
    • ユーティリティクラスのみ組み込んだCSSファイル（bootstrap-utilities.css と bootstrap-utilities.min.css）を提供
    • ES Modulesに対応したJSファイル（bootstrap.esm.js と bootstrap.esm.min.js）を提供
  • ツールのセットアップ：ドキュメントの構築ツールがJekyllからHugoに変更（それに伴い構築システムでのRubyのインストールも不要に）（v4.6.0でバックポート）
  • webpackにJavaScriptをインポートする場合、必要なプラグインが指定可能に
  • デフォルトでRFSが有効に
  • ブラウザとデバイス：「iOSでの焦点」「印刷での注意点」「Androidの標準ブラウザ」の各項目は削除
  • JavaScript：データ属性APIの無効と data-api の名前空間とともに名前空間としてプラグインの名前を組み込む方法は削除

【カスタマイズ】

  • Sassのカスタマイズ
    • $grays, $colors, $theme-colors, $spacers, $embed-responsive-aspect-ratios, $form-validation-states の各変数から map-merge を削除
    • color(), theme-color(), gray() 関数を削除
  • Sassオプション
    • $enable-grid-classes（グリッドシステム用のCSSクラスの生成を有効/無効）を無効にしてもコンテナクラス（.container(-{fluid｜breakpoint})）の生成は無効にならなくなった
    • $enable-prefers-reduced-motion-media-query（特定のアニメーション遷移の抑制を有効/無効） ⇒ $enable-reduced-motion に名称変更
    • $enable-pointer-cursor-for-buttons（非無効のボタン要素での指カーソルの表示の有効/無効） ⇒ $enable-button-pointers に名称変更
    • $enable-responsive-font-sizes（レスポンシブ・フォントサイズの有効/無効）は $enable-rfs に名称変更し、デフォルトでtrueに設定
    • $enable-hover-media-query と $enable-print-styles（印刷を最適化するスタイル）を削除
  • 全てのカラー
    • Sassマップの $blue（#007bff ⇒ #0d6efd）と $pink（#e83e8c ⇒ #d63384）の color が変更
      それに伴い {xxx}-primary と <code> の color も変更
    • Sassで定義される各カラーの陰影に応じたマップと変数を提供
  • root変数
    • 背景をグラデーション化する変数（--bs-gradient）を追加
    • ブレークポイント変数（--breakpoint-**）を削除

【レイアウト】

  • ブレークポイント
    • ブレークポイントに1400pxのビューポートに対応した超特大（xxl）を追加
    • media-breakpoint-down() は、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
    • media-breakpoint-between() の2番目のパラメーターは、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
  • コンテナ
    • レスポンシブ・コンテナに .container-xxl を追加
    • Sassのカスタマイズ等の解説を新設
  • グリッド
    • グリッドのデフォルトのガター幅が 30px（それぞれの端に15pxずつ）から 1.5rem（それぞれの端に0.75remずつ）に変更
    • .col-xxl(-*) を追加
    • 行列グリッドクラスに .row-cols(-{breakpoint})-auto と .row-cols-xxl-* を追加
    • 「複数行の等幅」の解説は削除
  • 列アイテム
    • 水平方向の配置クラスに .justify-content-evenly（列の間隔を両端から均等に配置）を追加
    • グリッド列の順序変更：.order(-{breakpoint})-* の設定できる整数が、0～12より0～5に変更され、.order-last の設定も order：13 から order：6 に変更
    • .row を設定せず、.col(-{breakpoint})-* + .col(-{breakpoint})-*...だけでグリッドの設定が可能に
  • ガター
    • グリッドにレスポンシブでガター（列間の余白）を設定する .g({x|y})(-{breakpoint})-{size} を新設
    • ガターなしの設定：.no-gutters から .g(-{breakpoint})-0 に変更（レスポンシブな設定が可能に）

【コンテンツ】

  • Reboot
    • ページデフォルト
      • <body> の text-align の設定：left から scss/_variables.scss の $body-text-align 変数で設定可能に
      • <body> の font-size の設定：scss/_variables.scss の $font-size-root 変数で設定可能に
    • 基本のフォントスタック：system-uiを追加し、BlinkMacSystemFontを削除
    • リンク（<a>）： text-decoration の設定が none から underline に変更（リンク部分に下線がつくことに）
    • リスト（<ul>, <ol>）：padding-left をブラウザのデフォルトの 40px から 2rem にリセット
    • コードブロック：.pre-scrollable は廃止
    • フォーム：<legend> ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
    • 引用：引用元の属性を <blockquote> の外側に配置
  • 文字の体裁
    • 見出し（<h1>～<h4>, .h1～.h4）、表示見出し（.display-1～.display-6）ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
    • 表示見出しに .display-5 と .display-6 を追加
    • <small>, .small の font-size が 80% から 0.875rem に変更
    • 引用
      • </blockquote> の手前の <p> で .mb-0 は不要に
      • <blockquote> を <figure> や <figcaption> と組み合わせる設定に変更
      • 引用の配置：blockquote.blockquote.text-{center|right} から figure.text-{center|right} に変更
  • テーブル
    • セルの border-top の設定がなくなったので、<thead> と <tbody> の境界線の太さで2pxの設定がなくなり、セルの padding が0.75rem⇒0.5remに変更
    • <tr> に .table-dark を追加した場合と、<th>, <td> に.table-dark を追加した場合では背景色、枠線色が異なる現象が解消
    • .table-{themecolor} 独自の border-color の設定がなくなった
    • カラーバリエーション・テーブルやアクセント付きテーブルの設定にCSSカスタムプロパティを使用
    • テーブルを入れ子にしても子テーブルは親テーブルのスタイルを継承しなくなった（子テーブル独自のスタイル設定が可能に）
    • テーブルの罫線：table.table.table-bordered に .border-{themecolor}（罫線の色ユーティリティクラス）を追加すれば罫線の色が変更可能に
    • <table>, <tr>, <th>, <td> にそれぞれ .align-**を入れてテーブルの垂直方向の配置設定が可能に
    • テーブルの見出し：thead.thead-{dark|light} から thead.table-{themecolor} に変更
    • テーブルのキャプションを上部に配置する .caption-top を新設

【フォーム】

  • フォームの概要
    • フォームテキスト（旧ヘルプテキスト）：.form-text にあらかじめフォントサイズや色などを組み込んだので、<small> や .text-muted の設定は不要に
  • フォームコントロール
    • 基本の設定
      • .form-group を廃止（.mb-3 などを使用）
      • フォームのラベル（<label>）には .form-label の設定が必要に
    • カラーピッカー用の設定：input[type="color"].form-control に .form-control-color を追加
    • データリスト：input.form-control で <datalist> に対応可能に
  • 従来のフォーム設定（.form-xxx）とカスタム・フォーム設定（.custom-xxx）を一本化し、設定は従来的（.form-xxx）に、スタイルはカスタム・フォーム的に統一
    • 選択メニュー：select.form-control をカスタム選択メニュー（select.custom-control）のスタイルにして、新たに select.form-select に統一
    • チェックボックスとラジオボタン：チェックボックスとラジオボタン（.form-check > [input.form-check-input + label.form-check-label]）をカスタムチェックボックスとラジオボタン（div.custom-control.custom-{checkbox|radio} > [input.custom-control-input + label.custom-control-label]）のスタイルにして、.form-check > [input.form-check-input + label.form-check-label] に統一
    • ファイル選択：.form-control-file をカスタム・ファイル選択（.custom-file）のスタイルにして、新たに .form-file に統一し、さらに設定変更（label.form-file-label 内に span.form-file-text と span.form-file-button を設定）
    • レンジ入力：.form-control-range をカスタム・レンジ入力（.custom-range）のスタイルにして、新たに .form-range に統一
  • チェックボックスとラジオボタン
    • ラベル無し：div.form-check > input.form-check-input.position-static から div > input.form-check-input に変更
    • 切替ボタン：.btn-group-toggle と data-toggle="buttons" は不要になり、label.btn.btn-{themecolor} > <input> から input.btn-check + label.btn.btn-{themecolor} に変更
  • ファイル選択：大きめと小さめのサイズとして、.form-file-lg と .form-file-sm を追加
  • レンジ入力：無効化状態に、pointer-events: none を追加
  • インプットグループ
    • アドオン部分を囲む div.input-group-prepend や div.input-group-append が不要に（.input-group-prepend, .input-group-append は廃止）
    • アドオン内をチェックボックスやラジオボタンする場合：<input> に .form-check-input を入れる
  • フォーム・レイアウト：グリッドクラスやユーティリティクラスでより簡潔に設定が可能なため .form-row, .form-group, .form-inline は廃止
  • 入力検証：検証フィードバックをツールチップにする場合は、各 .col-md-* に .position-relative を追加し、.mb-3 を削除

【コンポーネント】

  • 全てのJavaScriptの設定をjQueryに依存しない方法に変更（jQueryが検出された場合は従来の設定でも使用可）
  • ソースファイルからJavaScriptを構築するのに util.js は必要でなくなった模様
  • ボタングループ、ドロップダウン、リストグループ、ナビゲーション、ナビゲーションバーの各リンクをアクティブ化する場合は、.active で同じ要素に aria-current="true" を入れる
  • ボタン、閉じるボタン、ページ送りの無効化状態に、pointer-events: none を追加
  • アラート、カルーセル、折り畳み、ドロップダウン、リストグループ、モーダル、ナビ&タブ、ポップオーバー、スクロールスパイ、ツールチップの各プラグインに getInstance メソッドを追加
  • アラート：.alert-{themecolor} 内の <hr> 要素ではcolorに rgba() を使用
  • バッジ
    • 通常のバッジの設定：span.badge.badge-{themecolor} ⇒ span.badge.bg-{themecolor}
    • ピルバッジの設定：span.badge.badge-{themecolor}.badge-pill ⇒ span.badge.bg-{themecolor}.rounded-pill
    • リンクのfocusとhoverのスタイルを廃止
  • パンくずリスト：セパレータの設定のうち、SVGアイコンのBASE64へのエンコードが不要に
  • カード
    • v4のカードデッキは、グリッドカードによる設定に変更（.card-deck は廃止）
    • カードコラム：.card-columns による設定からMasonryのJSファイルを使用した設定方法に変更（.card-columns は廃止）
  • カルーセル
    • ride オプションは slide に名称変更し、タイプに boolean を追加
    • number メソッドは、to に名称変更
    • nextWhenVisible メソッドを追加
  • 閉じるボタン：.closeではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
  • 折り畳み：カードコンポーネントによるアコーディオンのタイトルのリンク部分が .text-body から .link-dark.text-decoration-none に変更
  • ドロップダウン
    • ドロップダウンボタンの設定で aria-haspopup="true" 属性が不要に
    • セマンティックなHTMLマークアップを促進するためドロップメニューの設定を div.dropdown-menu > a.dropdown-item から ul.dropdown-menu > li > a.dropdown-item に変更
    • 横仕切り線：div.dropdown-divider から <li> > hr.dropdown-divider に変更
  • リストグループ
    • アクティブなアイテムにアクセシビリティの設定を追加（v4.6.0でバックポート）
    • チェックボックスとラジオボタンをリストグループアイテム内に配置可能に
  • モーダル：フルスクリーン・モーダルクラス（.modal-fullscreen(-{breakpoint}-down)）を新設
  • ナビゲーションバー
    • すべてのナビゲーションバーにおいて、.navbar の直下を .container(-{fluid｜breakpoint})（コンテナクラス）で囲む必要がある
    • アクティブメニューのリンク：li.nav-item.active > a.nav-link > span.sr-only から li.nav-item > a.nav-link.active[aria-current="page"] に変更
  • ポップオーバー：template オプション：.arrow ⇒ .popover-arrow
  • ツールチップ：template オプション：.arrow ⇒ .tooltip-arrow
  • ジャンボトロン：他のユーティリティクラスで構築可能なので、ジャンボトロンのクラス（.jumbotron, .jumbotron-fluid）は廃止（本サイトでは設定例のみ表示）
  • メディアオブジェクト：他のユーティリティクラスで構築可能なので、メディアオブジェクトのクラス（.media, .media-body）は廃止（本サイトでは設定例のみ表示）

【ヘルパー】

  • ホバー状態のリンクの色を強調するリンクヘルパークラス（.link-{themecolor}）を新設
  • 動画の埋め込み
    • [title] の設定を追加
    • $embed-respond-aspect-ratio の記載方法がリストからSassマップに変更
  • 位置ヘルパー：レスポンシブで最上部に達すると固定する .sticky-{breakpoint}-top を新設
  • スクリーンリーダーのフォーカス時には表示：.sr-only.sr-only-focusable ⇒ .sr-only-focusable
  • 伸張リンクをグリッドに設定する場合、.col-* に .position-static は不要に

【ユーティリティ】

  • ブレークポイントに超特大（xxl）が追加されたので、各 .{property}-xxl(-{value}) クラスを追加
  • scss/_utilities.scss ファイルにある $utilities マップにユーティリティクラスの設定を移動し、クラス設定の解説としてユーティリティAPIを新設
  • カラーユーティリティ
    • 文字色：<a> タグに .text-{themecolor} を入れてもホバー時に濃いめに強調表示されなくなった⇒リンクヘルパークラス（.link-{themecolor}）を使用
    • 背景色
      • .bg-body を追加
      • <a> タグに .bg-{themecolor} を入れてもホバー時に濃いめに強調表示されなくなった
    • 背景色のグラデーション化： .bg-{themecolor} に .bg-gradient（デフォルトで生成済）を追加して設定が可能になったので、.bg-gradient-{themecolor} は廃止
  • Flexユーティリティ
    • 主軸方向のアイテムの整列クラスに .justify-content(-{breakpoint})-evenly を追加
    • Flexアイテムの表示順：.order(-{breakpoint})-* の設定できる整数が、0～12より0～5に変更され、.order(-{breakpoint})-last の設定も order：13 から order：6 に変更
  • 相互作用ユーティリティ：ポインターイベントクラスとして、.pe-{auto|none} を新設
  • 空白ユーティリティ：マイナスのマージンユーティリティクラス（.m{sides}(-{breakpoint})-n{size}）はデフォルトで生成されなくなった
  • テキストユーティリティ

【拡張】