diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md index b5d244342113..82acb4dc4dae 100644 --- a/docs/documentation/stories/include-bootstrap.md +++ b/docs/documentation/stories/include-bootstrap.md @@ -22,31 +22,32 @@ With the new project created and ready you will next need to install bootstrap t Using the `--save` option the dependency will be saved in package.json ```sh -# version 3.x npm install bootstrap --save - -# version 4.x -npm install bootstrap@next --save ``` ### Configuring Project Now that the project is set up it must be configured to include the bootstrap CSS. -- Open the file `.angular-cli.json` from the root of your project. -- Under the property `apps` the first item in that array is the default application. -- There is a property `styles` which allows external global styles to be applied to your application. +- Open the file `angular.json` from the root of your project. +- Under the property `projects` find your project. +- Inside `architect.build.options` locate the `styles` property. +- This property allows external global styles to be applied to your application. - Specify the path to `bootstrap.min.css` It should look like the following when you are done: ```json - "styles": [ - "../node_modules/bootstrap/dist/css/bootstrap.min.css", - "styles.css" - ], + "build": { + "options": { + "styles": [ + "../node_modules/bootstrap/dist/css/bootstrap.min.css", + "styles.css" + ], + } + } ``` -**Note:** When you make changes to `.angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes. +**Note:** When you make changes to `angular.json` you will need to re-start `ng serve` to pick up configuration changes. ### Testing Project @@ -74,11 +75,7 @@ cd my-app ### Installing Bootstrap ```sh -# version 3.x -npm install bootstrap-sass --save - -# version 4.x -npm install bootstrap@next --save +npm install bootstrap --save ``` ### Configuring Project @@ -94,11 +91,6 @@ $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; In `styles.scss` add the following: ```sass -// version 3 -@import 'variables'; -@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; - -// version 4 @import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap'; ``` @@ -117,10 +109,6 @@ Verify the bootstrap styled button appears. To ensure your variables are used open `_variables.scss` and add the following: ```sass -// version 3 -$brand-primary: red; - -// version 4 $primary: red; ```