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

Bootstrap5設置ガイド

※2020/6/25:v5.0.0-alpha1の公開に伴い開設。
※2020/9/30:v5.0.0-alpha2の公開に伴い更新。

PST(米国太平洋時間)2020/6/16にBootstrap v5.0.0-alpha1が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。
※現在はアルファ版であり、今後大きな変更があるかもしれないのでv4から全面的に移行するのはお奨めしません。

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

※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では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。

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

最新リリースであるBootstrap 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に移転した。

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

名称について

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

Bootstrap × BootStrap × Twitter Bootstrap

ライセンスについて

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

 

Bootstrap5の特長

今後の導入予定

...など

更新履歴

 

Bootstrap5.xの変更箇所(設定やCSSスタイルなどに限定)

v5.0.xでの変更

v5.0.xでの変更一覧
v5.0.0-alpha2
  • Popper.jsのバージョンが1.16.0から1.16.1に(v4.5.1と同じ)
  • JavaScriptのHTMLサニタイザーwhitelistallowlist に名称変更し、これに伴いポップオーバーツールチップのオプション whiteListallowList に名称変更
  • webpackの設定postcssOptions キーに対応
  • $theme-colors マップにカラーを追加する場合は、一旦カスタムカラーの変数を設定する必要あり
  • 全てのカラー:Sassマップの $green(#28a745 ⇒ #198754)と $cyan(#17a2b8 ⇒ #0dcaf0)の color が変更
    それに伴い {xxx}-success{xxx}-infocolor も変更
  • フォームの入力検証:サーバー側の検証設定でアクセシビリティの設定を追加
  • ボタングループでのチェック/ラジオ切替ボタンをボタンプラグインからボタングループに移動し、アクセシビリティの設定の追加と切替ボタンの設定を変更
  • カルーセルのダーク・バージョン用に .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 に名称変更
  • ポインターイベント:アクセシビリティの設定が追加
  • 罫線の太さユーティリティクラス.border-{size})を新設
  • アイコン:オプションのアイコンライブラリにCoreUI Iconsが追加
v5.0.0-alpha1
【項目の移動】
【導入】
  • 基本のテンプレート
    • レスポンシブ・メタタグの設定で shrink-to-fit=no が不要に
    • jQueryの設置が不要に
  • ファイルの内容
    • ユーティリティクラスのみ組み込んだCSSファイル(bootstrap-utilities.cssbootstrap-utilities.min.css)を提供
    • ES Modulesに対応したJSファイルbootstrap.esm.jsbootstrap.esm.min.js)を提供
  • ツールのセットアップ:ドキュメントの構築ツールがJekyllからHugoに変更(それに伴い構築システムでのRubyのインストールも不要に)
  • 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>, .smallfont-size80% から 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-textspan.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-toggledata-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-prependdiv.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-pillspan.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 に変更
  • リストグループ:チェックボックスとラジオボタンをリストグループアイテム内に配置が可能に
  • モーダル:フルスクリーン・モーダルクラス(.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)を廃止(単語の間隔がよりランダムになり、読みにくくなるため)
【拡張】

 

Bootstrap4との主な変更点

v5への移行より、Bootstrap v5.0.0-alpha2時点)

v5.0.0-alpha2

Sass

ドキュメント

レイアウト

Reboot

カラー

フォーム

コンポーネント

バッジ
ボタン
カルーセル
閉じるボタン
折り畳み
ドロップダウン
ナビゲーション
ページ送り
ポップオーバー
トースト
ツールチップ

ヘルパー

ユーティリティ

v5.0.0-alpha1

サポート対応ブラウザ(Browser support)

Bootstrap 5で現在サポートされているものの詳細については、ブラウザとデバイスのページに記載。v4以降、ブラウザのサポートに変更を追加。

Sass

BootstrapのソースSassファイルとコンパイルされたCSSへの変更。

JavaScript

BootstrapのソースファイルとコンパイルされたJavaScriptファイルへの変更。

カラーシステム

Bootstrapを強化するカラーシステムを更新し、色のコントラストを改善してより広範なカラーセットを提供。

グリッドとレイアウト

任意のレイアウトツールとBootstrapのグリッドシステムへの変更。

コンテンツ、Rebootなど

Reboot、文字の体裁などの変更。

文字の体裁

フォーム

コンポーネント

無効化状態
アラート
バッジ

バッジは、ボタンとの差別化とユーティリティクラスの活用を改善するために見直し。

ボタン
カード
ジャンボトロン
ページ送り
ポップオーバー
ツールチップ

アクセシビリティ

ユーティリティ

公式サイトの解説

構築ツール