Skip to content

Commit 84e070d

Browse files
Broccohansl
authored andcommitted
docs: Update bootstrap story.
1 parent f871e81 commit 84e070d

File tree

1 file changed

+14
-26
lines changed

1 file changed

+14
-26
lines changed

docs/documentation/stories/include-bootstrap.md

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,32 @@ With the new project created and ready you will next need to install bootstrap t
2222
Using the `--save` option the dependency will be saved in package.json
2323

2424
```sh
25-
# version 3.x
2625
npm install bootstrap --save
27-
28-
# version 4.x
29-
npm install bootstrap@next --save
3026
```
3127

3228
### Configuring Project
3329

3430
Now that the project is set up it must be configured to include the bootstrap CSS.
3531

36-
- Open the file `.angular-cli.json` from the root of your project.
37-
- Under the property `apps` the first item in that array is the default application.
38-
- There is a property `styles` which allows external global styles to be applied to your application.
32+
- Open the file `angular.json` from the root of your project.
33+
- Under the property `projects` find your project.
34+
- Inside `architect.build.options` locate the `styles` property.
35+
- This property allows external global styles to be applied to your application.
3936
- Specify the path to `bootstrap.min.css`
4037

4138
It should look like the following when you are done:
4239
```json
43-
"styles": [
44-
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
45-
"styles.css"
46-
],
40+
"build": {
41+
"options": {
42+
"styles": [
43+
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
44+
"styles.css"
45+
],
46+
}
47+
}
4748
```
4849

49-
**Note:** When you make changes to `.angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.
50+
**Note:** When you make changes to `angular.json` you will need to re-start `ng serve` to pick up configuration changes.
5051

5152
### Testing Project
5253

@@ -74,11 +75,7 @@ cd my-app
7475
### Installing Bootstrap
7576

7677
```sh
77-
# version 3.x
78-
npm install bootstrap-sass --save
79-
80-
# version 4.x
81-
npm install bootstrap@next --save
78+
npm install bootstrap --save
8279
```
8380

8481
### Configuring Project
@@ -94,11 +91,6 @@ $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
9491
In `styles.scss` add the following:
9592

9693
```sass
97-
// version 3
98-
@import 'variables';
99-
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
100-
101-
// version 4
10294
@import 'variables';
10395
@import '../node_modules/bootstrap/scss/bootstrap';
10496
```
@@ -117,10 +109,6 @@ Verify the bootstrap styled button appears.
117109
To ensure your variables are used open `_variables.scss` and add the following:
118110

119111
```sass
120-
// version 3
121-
$brand-primary: red;
122-
123-
// version 4
124112
$primary: red;
125113
```
126114

0 commit comments

Comments
 (0)