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

ダウンロード(Download)

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。

コンパイル済CSSとJSファイル版(Compiled CSS and JS)v5.3.0-alpha1時点

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.3.0-alpha1時点

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

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

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

実例(Example)v5.0.0-alpha1新設

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

ソースのダウンロード

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

jsDelivr経由のCDN(CDN via jsDelivr)v5.3.0-alpha1時点

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

CSSファイル<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
JSファイル<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

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

JSファイル<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
【変更履歴】
  • 【v5.0.0-alpha3】
    • CDNの提供元:StackPath(https://stackpath.bootstrapcdn.com/)⇒jsDelivr(https://www.jsdelivr.com/)(v4.5.3でバックポート)

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

パッケージマネージャー(Package managers)v5.3.0-alpha1時点

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

npm

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

実行コマンド$ npm install bootstrap@5.3.0-alpha1

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の環境構築:Bootstrap5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説(coliss)

yarn

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

実行コマンドyarn add bootstrap@5.3.0-alpha1

RubyGems

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

実行コマンドgem 'bootstrap', '~> 5.3.0-alpha1'

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

実行コマンド$ gem install bootstrap -v 5.3.0-alpha1

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

Composer

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

実行コマンド$ composer require twbs/bootstrap:5.3.0-alpha1

NuGet

.NET Frameworkで開発する場合は、NuGetを使用してBootstrapのCSSSassとJavaScriptのインストールや管理ができる。NuGetはフロントエンドアセットではなくコンパイル済コード用に設計されているため、新しいプロジェクトではLibManか別のメソッドを使用する必要がある。

CSSの実行コマンドPM> Install-Package bootstrap
Sassの実行コマンドPM> Install-Package bootstrap.sass