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

ダウンロード（Download）

Bootstrapをダウンロードして、コンパイル済のCSSやJavaScriptファイルやソースコードを入手したり、npm, RubyGemsなどの好きなパッケージマネージャーに追加する。

目次

コンパイル済みCSSとJSファイル版（Compiled CSS and JS）v5.0.1時点

Bootstrap v5最新版用のすぐに使えるコンパイル済みコードをダウンロードすれば、自分のプロジェクトに簡単に導入可能。

  • コンパイル済み（標準：bootstrap.css、グリッド部分のみ：bootstrap-grid.css、Rebootのみ：bootstrap-reboot.css）、軽量版（標準：bootstrap.min.css、グリッド部分のみ：bootstrap-grid.min.css、Rebootのみ：bootstrap-reboot.min.css）のCSSバンドル（CSSファイルの比較）
  • コンパイル済み（標準：bootstrap.js、含Popper：bootstrap.bundle.js、ES Modules対応版：bootstrap.esm.js）、軽量版（標準：bootstrap.min.js、含Popper：bootstrap.bundle.min.js、ES Modules対応版：bootstrap.esm.min.js）のJavaScriptプラグイン（JSファイルの比較）

これには、解説、ソースファイル、Popperのような任意のJavaScript依存関係ファイルは含まれない。

ダウンロード※ダウンロードファイルの内容はこちら。

 

ソースファイル版（Source files）v5.0.1時点

ソースSass、JavaScript、ドキュメント（解説）ファイルをダウンロードして、プロジェクトのアセットパイプラインでBootstrapをコンパイルする。このオプションを使用するには、次のツールが必要：

構築ツールのフルセットが必要な場合、開発向けにBootstrapとドキュメントが組み込まれているが、独自の目的には適さない可能性が高い。

ソースのダウンロード※ダウンロードファイルの内容はこちら。

 

実例（Example）v5.0.0-alpha1新設

実例をダウンロードして確認したい場合は、すでに構築済みの実例が入手可能。

ソースのダウンロード

※公式サイトの実例なのでダウンロードファイルは英語だが、当サイトの実例にある各ファイルでは日本語のソースコードがコピー可能。

 

jsDelivr経由のCDN（CDN via jsDelivr）v5.0.1時点

jsDelivrを使用してダウンロードを省略し、Bootstrapのコンパイル済みCSSとJSのキャッシュされたバージョンをプロジェクトに配信。

HTML<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

コンパイル済みのJavaScriptを使用していて、Popperを個別に組み込む場合は、CDNを経由してJSの前にPopperを組み入れること。

HTML<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

【変更履歴】

  • 【v5.0.0-alpha3】（v4.5.3でバックポート）
    • CDNの提供元：StackPath（https://stackpath.bootstrapcdn.com/）⇒jsDelivr（https://www.jsdelivr.com/）

※詳細については、クイックスタートに記載。

 

パッケージマネージャー（Package managers）v5.0.1時点

Bootstrapのソースファイルを、最も人気のあるパッケージマネージャーを使用して、ほぼ全てのプロジェクトに取り込む。パッケージマネージャーに関係なく、公式のコンパイル済みのBootstrapのバージョンに一致するセットアップ用のSassコンパイラとAutoprefixerが必要。

npm

npmパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール：

実行コード$ npm install bootstrap

const bootstrap = require('bootstrap') や import bootstrap from 'bootstrap' は、全てのBootstrapプラグインを bootstrap オブジェクトに読み込む。bootstrap モジュール自体がBootstrapのプラグインを全てエクスポートしている。パッケージの最上位ディレクトリの下にある /js/*.js ファイルを読み込むことで、Bootstrapのプラグインを個別に手動で読み込むことが可能。

Bootstrapの package.json は、次のキーの下にいくつかの追加のメタデータが組み込まれている：

  • sass - BootstrapのメインのSassソースファイルへのパス
  • style - デフォルト設定（カスタマイズなし）を使用したコンパイル済みのBootstrapの非軽量版CSSへのパス

※npmを使ったBootstrap5の作業環境構築法：Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説（coliss）

yarn

yarnパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール：

実行コードyarn add bootstrap

RubyGems

Gemfileに次の行を追加して、Bundler（推奨）やRubyGemsのアプリケーションを使って、RubyにBootstrapをインストール：

実行コードgem 'bootstrap', '~> 5.0.1'

Bundlerを使用していない場合は、次のコマンドを実行してgemをインストール：

実行コード$ gem install bootstrap -v 5.0.1

詳細については、Bootstrap Ruby GemのREADMEに記載。

Composer

また、Composerを使用してBootstrapのSassとJavaScriptをインストールして管理することも可能：

実行コードcomposer require twbs/bootstrap:5.0.1

NuGet

.NETで開発する場合は、NuGetを使用してBootstrapのCSSやSassとJavaScriptのインストールや管理が可能：

CSSの実行コードPM> Install-Package bootstrap -Version 5.0.1
Sassの実行コードPM> Install-Package bootstrap.sass -Version 5.0.1