You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We're building a npm project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
20
+
We’re building a npm project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
21
21
22
-
1.**Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
22
+
1.**Create a project folder and set up npm.** We’ll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
23
23
24
24
```sh
25
25
mkdir my-project &&cd my-project
26
26
npm init -y
27
27
```
28
28
29
-
2.**Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Floating UI here.
29
+
2.**Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
30
30
31
31
```sh
32
32
npm i --save bootstrap @floating-ui/dom
@@ -50,14 +50,14 @@ Now that we have all the necessary dependencies installed, we can get to work cr
50
50
51
51
## Project structure
52
52
53
-
We've already created the `my-project` folder and initialized npm. Now we'll also create our `scss` folder, stylesheet, and configuration files to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
53
+
We’ve already created the `my-project` folder and initialized npm. Now we’ll also create our `scss` folder, stylesheet, and configuration files to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
When you're done, your project should look like this:
60
+
When you’re done, your project should look like this:
61
61
62
62
```text
63
63
my-project/
@@ -71,7 +71,7 @@ my-project/
71
71
└── postcss.config.js
72
72
```
73
73
74
-
At this point, everything is in the right place, but we'll need to configure our files and add some npm scripts to compile the CSS.
74
+
At this point, everything is in the right place, but we’ll need to configure our files and add some npm scripts to compile the CSS.
75
75
76
76
## Configure npm
77
77
@@ -89,7 +89,7 @@ With dependencies installed and our project folder ready for us to start coding,
89
89
}
90
90
```
91
91
92
-
2.**Fill in the `index.html` file.** We need an HTML page to render our project. This page links to the compiled CSS file and includes Bootstrap's pre-built JavaScript bundle.
92
+
2.**Fill in the `index.html` file.** We need an HTML page to render our project. This page links to the compiled CSS file and includes Bootstrap’s pre-built JavaScript bundle.
93
93
94
94
```html
95
95
<!doctype html>
@@ -110,9 +110,9 @@ With dependencies installed and our project folder ready for us to start coding,
110
110
</html>
111
111
```
112
112
113
-
We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by our npm scripts. Since this setup doesn't use a JavaScript bundler, we load Bootstrap's pre-built JS bundle directly via a `<script>` tag.
113
+
We’re including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap’s CSS is loaded by our npm scripts. Since this setup doesn’t use a JavaScript bundler, we load Bootstrap’s pre-built JS bundle directly via a `<script>` tag.
114
114
115
-
*[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap's plugins.*
115
+
*[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap’s plugins.*
116
116
117
117
3.**Add npm scripts to `package.json`.** Open `package.json` and add the following scripts. We use `sass` to compile our Sass (with `--load-path=node_modules` so it can resolve Bootstrap), `postcss-cli` to apply Autoprefixer, `nodemon` to watch for changes, `npm-run-all` to run scripts in sequence or in parallel, `sirv-cli` to serve our project, and `stylelint` to lint our Sass.
118
118
@@ -132,7 +132,7 @@ With dependencies installed and our project folder ready for us to start coding,
132
132
}
133
133
```
134
134
135
-
4.**Configure `.stylelintrc.json`.** We're using `stylelint-config-twbs-bootstrap` to keep our Sass linting consistent with Bootstrap's own code style.
135
+
4.**Configure `.stylelintrc.json`.** We’re using `stylelint-config-twbs-bootstrap` to keep our Sass linting consistent with Bootstrap’s own code style.
136
136
137
137
```json
138
138
{
@@ -148,22 +148,22 @@ With dependencies installed and our project folder ready for us to start coding,
148
148
149
149
{/* <img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/npm-dev-server.png" alt="npm dev server running" /> */}
150
150
151
-
In the next and final section to this guide, we'll import all of Bootstrap's CSS.
151
+
In the next and final section to this guide, we’ll import all of Bootstrap’s CSS.
152
152
153
153
## Import Bootstrap
154
154
155
155
Importing Bootstrap into our project requires adding a Sass import to our `scss/styles.scss` file.
156
156
157
-
1.**Import Bootstrap's CSS.** Add the following to `scss/styles.scss` to import all of Bootstrap's source Sass. We use the `@use` rule, which is the modern Sass module system.
157
+
1.**Import Bootstrap’s CSS.** Add the following to `scss/styles.scss` to import all of Bootstrap’s source Sass. We use the `@use` rule, which is the modern Sass module system.
158
158
159
159
```scss
160
-
// Import all of Bootstrap's CSS
160
+
// Import all of Bootstrap’s CSS
161
161
@use"bootstrap/scss/bootstrap";
162
162
```
163
163
164
164
*You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
165
165
166
-
2.**Optionally, customize Bootstrap's Sass tokens.** Since Bootstrap uses Sass modules (`@use`/`@forward`), you can override default values using the `with ()` syntax. You only need to include the keys you want to change — Bootstrap merges your overrides with its defaults.
166
+
2.**Optionally, customize Bootstrap’s Sass tokens.** Since Bootstrap uses Sass modules (`@use`/`@forward`), you can override default values using the `with ()` syntax. You only need to include the keys you want to change — Bootstrap merges your overrides with its defaults.
167
167
168
168
```scss
169
169
@use"bootstrap/scss/bootstrap"with (
@@ -180,10 +180,10 @@ Importing Bootstrap into our project requires adding a Sass import to our `scss/
180
180
181
181
*[Read our Sass customization docs]([[docsref:/customize/sass#token-defaults]]) for the full list of available token maps and options.*
182
182
183
-
3.**And you're done! 🎉** With Bootstrap's source Sass fully loaded, your local development server should now look like this:
183
+
3.**And you’re done! 🎉** With Bootstrap’s source Sass fully loaded, your local development server should now look like this:
184
184
185
185
{/* <img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/npm-dev-server-bootstrap.png" alt="npm dev server running with Bootstrap" /> */}
186
186
187
-
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete npm Sass and JS example project](https://github.com/twbs/examples/tree/main/sass-js) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
187
+
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete npm Sass and JS example project](https://github.com/twbs/examples/tree/main/sass-js) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
11
+
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn’t currently supported there.
We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
20
+
We’re building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
21
21
22
22
1.**Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
23
23
@@ -26,13 +26,13 @@ We're building a Parcel project with Bootstrap from scratch, so there are some p
26
26
npm init -y
27
27
```
28
28
29
-
2.**Install Parcel.** Unlike our Webpack guide, there's only a single build tool dependency here. Parcel will automatically install language transformers (like Sass) as it detects them. We use `--save-dev` to signal that this dependency is only for development use and not for production.
29
+
2.**Install Parcel.** Unlike our Webpack guide, there’s only a single build tool dependency here. Parcel will automatically install language transformers (like Sass) as it detects them. We use `--save-dev` to signal that this dependency is only for development use and not for production.
30
30
31
31
```sh
32
32
npm i --save-dev parcel
33
33
```
34
34
35
-
3.**Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Floating UI here.
35
+
3.**Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
36
36
37
37
```sh
38
38
npm i --save bootstrap @floating-ui/dom
@@ -42,14 +42,14 @@ Now that we have all the necessary dependencies installed, we can get to work cr
42
42
43
43
## Project structure
44
44
45
-
We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
45
+
We’ve already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
When you're done, your complete project should look like this:
52
+
When you’re done, your complete project should look like this:
53
53
54
54
```text
55
55
my-project/
@@ -90,11 +90,11 @@ With dependencies installed and our project folder ready for us to start coding,
90
90
</html>
91
91
```
92
92
93
-
We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Parcel.
93
+
We’re including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap’s CSS is loaded by Parcel.
94
94
95
-
Parcel will automatically detect we're using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
95
+
Parcel will automatically detect we’re using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
96
96
97
-
2.**Add the Parcel npm scripts.** Open the `package.json` and add the following `start` script to the `scripts` object. We'll use this script to start our Parcel development server and render the HTML file we created after it's compiled into the `dist` directory.
97
+
2.**Add the Parcel npm scripts.** Open the `package.json` and add the following `start` script to the `scripts` object. We'll use this script to start our Parcel development server and render the HTML file we created after it’s compiled into the `dist` directory.
98
98
99
99
```json
100
100
{
@@ -115,25 +115,25 @@ With dependencies installed and our project folder ready for us to start coding,
115
115
116
116
<imgclass="img-fluid"src="/docs/[[config:docs_version]]/assets/img/guides/parcel-dev-server.png"alt="Parcel dev server running" />
117
117
118
-
In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
118
+
In the next and final section to this guide, we'll import all of Bootstrap’s CSS and JavaScript.
119
119
120
120
## Import Bootstrap
121
121
122
122
Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` and one into our `main.js`.
123
123
124
-
1.**Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
124
+
1.**Import Bootstrap’s CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap’s source Sass.
125
125
126
126
```scss
127
-
// Import all of Bootstrap's CSS
127
+
// Import all of Bootstrap’s CSS
128
128
@use"bootstrap/scss/bootstrap";
129
129
```
130
130
131
131
*You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
132
132
133
-
2.**Import Bootstrap's JS.** Add the following to `src/js/main.js` to import all of Bootstrap's JS. Floating UI will be imported automatically through Bootstrap.
133
+
2.**Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
134
134
135
135
```js
136
-
// Import all of Bootstrap's JS
136
+
// Import all of Bootstrap’s JS
137
137
import*asbootstrapfrom'bootstrap'
138
138
```
139
139
@@ -146,12 +146,12 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
*[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap's plugins.*
149
+
*[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap’s plugins.*
150
150
151
-
3.**And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
151
+
3.**And you’re done! 🎉** With Bootstrap’s source Sass and JS fully loaded, your local development server should now look like this:
152
152
153
153
<imgclass="img-fluid"src="/docs/[[config:docs_version]]/assets/img/guides/parcel-dev-server-bootstrap.png"alt="Parcel dev server running with Bootstrap" />
154
154
155
-
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
155
+
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.
0 commit comments