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

Bootstrap5設置ガイド

:v5.3.2の公開に伴い更新。

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

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

目次を見る 導入を見る

※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は当初米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
間違った名称1 BootStrap
間違ったい名称2 Twitter Bootstrap

ライセンスについて

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

※もともとは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のコンパイルエラーをいくつか修正
  • PST 2023/5/30にBootstrap v5.3.0が公開
    ※当初はv5.3.0のベータ版を出す計画だったが取り止め。
  • PST 2023/7/26にBootstrap v5.3.1が公開
  • PST 2023/9/14にBootstrap v5.3.2が公開

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

v5.3.2 変更内容の詳細

【導入】

【カスタマイズ】

【コンテンツ】

  • 文字の体裁:文字の装飾<mark> のダークモード用の背景色設定を追加

v5.3.1 変更内容の詳細

【導入】

  • Javascript:イベントの設定例で if (!data) {} を削除
  • Webpackでの使用:BootstrapのインポートのPostCSSでCSSを処理するためのwebpack用ローダーで plugins: () => [plugins: [ に変更

【カスタマイズ】

  • Sassのカスタマイズ:コンパイル組み込みを追加
  • カラーモード:$body-color-dark$gray-500 から $gray-300 に変更し、ダークモードのカラーコントラストを向上
  • CSS変数:ダークモードのroot変数--bs-body-color, --bs-body-color-rgb, --bs-secondary-color, --bs-secondary-color-rgb, --bs-tertiary-color, --bs-tertiary-color-rgb の色設定を変更

【フォーム】

【コンポーネント】

【ヘルパー】

  • 縦仕切り線:Sass変数の変数を $vr-border-width 変数に変更

v5.3.0 変更内容の詳細

各解説の"v5.3.0"での変更はv5.3.0-alpha版での変更も含むので、v5.3.0-alpha1, v5.3.0-alpha2, v5.3.0-alpha3の各変更も合わせて参照して下さい。

【導入】

【カスタマイズ】

【コンテンツ】

  • テーブル:カラーバリエーションで背景色ユーティリティクラス .bg-{color}(文字色ユーティリティクラス .text-{color})や文字&背景色ヘルパークラス .text-bg-{themecolor} を入れても反映されなくなった

【コンポーネント】

【ユーティリティ】

(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 ではない)を追加し、colorbackground-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')
  • アラート:アイコン付きで使うアイコンの widthheight241rem に変更
  • ボタングループ:ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に(v4.6.2でバックポート)
  • カルーセル.carouseldata-bs-interval="false" の設定は不可になり削除
  • ドロップダウン:ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggleid="ID"ul.dropdown-menuaria-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-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に
    • Darkオフキャンバスを新設
  • プログレスバー.progress-bararia-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-inputrole="switch" 属性の設定が必要に

【コンポーネント】

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

v5.1.1 変更内容の詳細

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

【導入】

【カスタマイズ】

【コンテンツ】

【コンポーネント】

【ヘルパー】

【ユーティリティ】

  • 背景ユーティリティ:v5.1.0で .bg-bodycolor.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でバックポート)