diff --git a/docs/documentation/stories/global-lib.md b/docs/documentation/stories/global-lib.md index 91c621acfd5c..bf3e381d4cf5 100644 --- a/docs/documentation/stories/global-lib.md +++ b/docs/documentation/stories/global-lib.md @@ -4,15 +4,14 @@ Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the `apps[0].scripts` and `apps[0].styles` properties of `.angular-cli.json`. -As an example, to use [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) this is -what you need to do: +As an example, many [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) components require [JQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and Bootstrap's JavaScript plugings to function. +If we want to use those components, we will need to install JQuery and Popper.js in addition to Bootstrap: -First install Bootstrap from `npm`: ```bash npm install jquery --save npm install popper.js --save -npm install bootstrap@next --save +npm install bootstrap --save ``` Then add the needed script files to `apps[0].scripts`: diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md index b5d244342113..d6b83b1abf2b 100644 --- a/docs/documentation/stories/include-bootstrap.md +++ b/docs/documentation/stories/include-bootstrap.md @@ -22,11 +22,7 @@ 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 @@ -74,33 +70,19 @@ 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 -Create an empty file `_variables.scss` in `src/`. - -If you are using `bootstrap-sass`, add the following to `_variables.scss`: - -```sass -$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; -``` +Create an empty file `_variables.scss` in `src/`. The `_variables.scss` file allows us to customize Bootstrap by overriding Sass variables +used by Boostrap. For instance, you can add `$primary: red;` to use red as primary color. 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'; +@import '~bootstrap/scss/bootstrap'; ``` ### Testing Project @@ -117,10 +99,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; ```