メインコンテンツへスキップ
Bootstrap

Bootstrap5設置ガイド

  • ※：v5.1.1の公開に伴い更新。

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

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

目次を見る導入を見る

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

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に移転した。

2021年現在、すべてのウェブサイトの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の執筆者とTwitter社が保有している。

BootstrapのGitHubのCopyright and licenseより

 

Bootstrap5の特長

更新履歴

 

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

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 にはユーティリティだけでなく、ヘルパーも組み込まれるようになった。
  • ツールの構築：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.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"] > × が不要に（アラート、モーダル、トーストも同様）
    暗めの背景に対応するホワイト・バージョン用に .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}）はデフォルトで生成されなくなった
  • テキストユーティリティクラス
    • テキストの太さユーティリティクラスにフォントスタイルなし（.font-normal）を追加
    • 行間ユーティリティクラスとして、.lh-{size} を新設
    • 等幅フォントの設定：.text-monospace から .font-monospace に名称変更
    • テキストの装飾ユーティリティクラスに下線（.text-decoration-underline）と取消線（.text-decoration-line-through）を追加
    • 文字の均等割付ユーティリティクラス（.text-justify）を廃止（単語の間隔がよりランダムになり、読みにくくなるため）

【拡張】

  • アイコン：オプションのアイコンライブラリにicofontが追加（v4.5.3でバックポート）