download.md 4.72 KB
Newer Older
1
---
Mark Otto's avatar
Mark Otto committed
2
layout: docs
3
title: Download
Tanguy Krotoff's avatar
Tanguy Krotoff committed
4
description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
5
group: getting-started
6
toc: true
7
8
---

Mark Otto's avatar
Mark Otto committed
9
## Compiled CSS and JS
10

XhmikosR's avatar
XhmikosR committed
11
Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes:
12

XhmikosR's avatar
XhmikosR committed
13
- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
Mark Otto's avatar
Mark Otto committed
14
- Compiled and minified JavaScript plugins
15

XhmikosR's avatar
XhmikosR committed
16
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
Mark Otto's avatar
Mark Otto committed
17

XhmikosR's avatar
XhmikosR committed
18
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
19

20
## Source files
Mark Otto's avatar
Mark Otto committed
21
22
23
24
25
26

Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing

XhmikosR's avatar
XhmikosR committed
27
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
Mark Otto's avatar
Mark Otto committed
28

XhmikosR's avatar
XhmikosR committed
29
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
30

31
## BootstrapCDN
32

33
Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project.
34

XhmikosR's avatar
XhmikosR committed
35
36
37
38
{{< highlight html >}}
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}}
39

XhmikosR's avatar
XhmikosR committed
40
If you're using our compiled JavaScript, don't forget to include Popper.js, via a CDN preferably, before our JS.
Mark Otto's avatar
Mark Otto committed
41

XhmikosR's avatar
XhmikosR committed
42
43
44
{{< highlight html >}}
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}}
Mark Otto's avatar
Mark Otto committed
45

Mark Otto's avatar
Mark Otto committed
46
47
## Package managers

48
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
Mark Otto's avatar
Mark Otto committed
49

Mark Otto's avatar
Mark Otto committed
50
### npm
51

52
Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
53

XhmikosR's avatar
XhmikosR committed
54
{{< highlight sh >}}
Mark Otto's avatar
Mark Otto committed
55
npm install bootstrap
XhmikosR's avatar
XhmikosR committed
56
{{< /highlight >}}
Mark Otto's avatar
Mark Otto committed
57

58
59
`const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap's plugins individually by loading the `/js/dist/*.js` files under the package's top-level directory.
Mark Otto's avatar
Mark Otto committed
60

Mark Otto's avatar
Mark Otto committed
61
62
Bootstrap's `package.json` contains some additional metadata under the following keys:

XhmikosR's avatar
XhmikosR committed
63
- `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
Mark Otto's avatar
Mark Otto committed
64
65
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

66
67
### yarn

68
Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
69

XhmikosR's avatar
XhmikosR committed
70
{{< highlight sh >}}
71
yarn add bootstrap
XhmikosR's avatar
XhmikosR committed
72
{{< /highlight >}}
73

74
75
### RubyGems

76
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
77

XhmikosR's avatar
XhmikosR committed
78
79
80
{{< highlight ruby >}}
gem 'bootstrap', '~> {{< param current_ruby_version >}}'
{{< /highlight >}}
81
82
83

Alternatively, if you're not using Bundler, you can install the gem by running this command:

XhmikosR's avatar
XhmikosR committed
84
85
86
{{< highlight sh >}}
gem install bootstrap -v {{< param current_ruby_version >}}
{{< /highlight >}}
87
88
89

[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.

Mark Otto's avatar
Mark Otto committed
90
### Composer
Mark Otto's avatar
Mark Otto committed
91

XhmikosR's avatar
XhmikosR committed
92
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):
Mark Otto's avatar
Mark Otto committed
93

XhmikosR's avatar
XhmikosR committed
94
95
96
{{< highlight sh >}}
composer require twbs/bootstrap:{{< param current_version >}}
{{< /highlight >}}
Mark Otto's avatar
Mark Otto committed
97

98
99
### NuGet

XhmikosR's avatar
XhmikosR committed
100
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
101

XhmikosR's avatar
XhmikosR committed
102
{{< highlight powershell >}}
103
Install-Package bootstrap
XhmikosR's avatar
XhmikosR committed
104
{{< /highlight >}}
105

XhmikosR's avatar
XhmikosR committed
106
{{< highlight powershell >}}
107
Install-Package bootstrap.sass
XhmikosR's avatar
XhmikosR committed
108
{{< /highlight >}}