contents.md 5.28 KB
Newer Older
1
---
Mark Otto's avatar
Mark Otto committed
2
layout: docs
3
title: Contents
4
description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
5
group: getting-started
6
toc: true
7
8
---

Mark Otto's avatar
Mark Otto committed
9
## Precompiled Bootstrap
10

Mark Otto's avatar
Mark Otto committed
11
Once downloaded, unzip the compressed folder and you'll see something like this:
12
13
14

<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->

15
{% highlight plaintext %}
16
17
18
bootstrap/
├── css/
│   ├── bootstrap.css
Mark Otto's avatar
Mark Otto committed
19
│   ├── bootstrap.css.map
20
│   ├── bootstrap.min.css
21
22
23
24
25
26
27
28
29
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
30
└── js/
31
32
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
33
34
35
36
    ├── bootstrap.js
    └── bootstrap.min.js
{% endhighlight %}

37
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
38

39
40
41
## CSS files

Bootstrap includes a handful of options for including some or all of our compiled CSS.
42

Mark Otto's avatar
Mark Otto committed
43
<table class="table table-bordered">
44
45
46
  <thead>
    <tr>
      <th scope="col">CSS files</th>
47
48
49
50
      <th scope="col">Layout</th>
      <th scope="col">Content</th>
      <th scope="col">Components</th>
      <th scope="col">Utilities</th>
51
52
53
54
55
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
56
57
        <div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
        <div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
58
      </th>
59
60
61
62
      <td class="text-success">Included</td>
      <td class="text-success">Included</td>
      <td class="text-success">Included</td>
      <td class="text-success">Included</td>
63
64
65
    </tr>
    <tr>
      <th scope="row">
66
67
        <div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
        <div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
68
      </th>
69
70
71
72
      <td><a class="text-warning" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/">Only grid system</a></td>
      <td class="bg-light text-muted">Not included</td>
      <td class="bg-light text-muted">Not included</td>
      <td><a class="text-warning" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/">Only flex utilities</a></td>
73
74
75
    </tr>
    <tr>
      <th scope="row">
76
77
        <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
        <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
78
      </th>
79
80
81
82
      <td class="bg-light text-muted">Not included</td>
      <td><a class="text-warning" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/">Only Reboot</a></td>
      <td class="bg-light text-muted">Not included</td>
      <td class="bg-light text-muted">Not included</td>
83
84
85
86
    </tr>
  </tbody>
</table>

87
88
89
## JS files

Similarly, we have options for including some or all of our compiled JavaScript.
90

Mark Otto's avatar
Mark Otto committed
91
<table class="table table-bordered">
92
93
94
  <thead>
    <tr>
      <th scope="col">JS files</th>
95
96
      <th scope="col">Popper</th>
      <th scope="col">jQuery</th>
97
98
99
100
101
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
102
103
        <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
        <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
104
      </th>
105
106
      <td class="text-success">Included</td>
      <td class="bg-light text-muted">Not included</td>
107
108
109
    </tr>
    <tr>
      <th scope="row">
110
111
        <div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
        <div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
112
      </th>
113
114
      <td class="bg-light text-muted">Not included</td>
      <td class="bg-light text-muted">Not included</td>
115
116
117
118
    </tr>
  </tbody>
</table>

Mark Otto's avatar
Mark Otto committed
119
## Bootstrap source code
120

Mark Otto's avatar
Mark Otto committed
121
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
122

123
{% highlight plaintext %}
124
125
126
127
bootstrap/
├── dist/
│   ├── css/
│   └── js/
Mark Otto's avatar
Mark Otto committed
128
129
130
├── docs/
│   └── examples/
├── js/
Mark Otto's avatar
Mark Otto committed
131
└── scss/
132
133
{% endhighlight %}

Mark Otto's avatar
Mark Otto committed
134
The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.