diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md index acb47ae8922b..6a02c8136fc0 100644 --- a/docs/documentation/stories/include-bootstrap.md +++ b/docs/documentation/stories/include-bootstrap.md @@ -3,65 +3,119 @@ [Bootstrap](http://getbootstrap.com/) is a popular CSS framework which can be used within an Angular project. This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap. +## Using CSS + +### Getting Started + Create a new project and navigate into the project + ``` ng new my-app cd my-app ``` +### Installing Bootstrap + With the new project created and ready you will next need to install bootstrap to your project as a dependency. Using the `--save` option the dependency will be saved in package.json -``` -// version 3.x + +```sh +# version 3.x npm install bootstrap --save -// version 4.x +# 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. -Specify the path to `bootstrap.min.css` -``` -// version 3.x and 4.x -"../node_modules/bootstrap/dist/css/bootstrap.min.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. +- 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" + ], + ``` + +**Note:** When you make changes to `angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes. + +### Testing Project + +Open `app.component.html` and add the following markup: + +```html + ``` With the application configured, run `ng serve` to run your application in develop mode. In your browser navigate to the application `localhost:4200`. -Make a change to your application to ensure that the CSS library has been included. -A quick test is to add the following markup to `app.component.html` +Verify the bootstrap styled button appears. + +## Using SASS + +### Getting Started + +Create a new project and navigate into the project + ``` - +ng new my-app --style=scss +cd my-app ``` -After saving this file, return to the browser to see the bootstrap styled button. -## Using SASS -Open `angular-cli.json` change reference of `styles.css` to `styles.scss` and rename the file accordingly. +### Installing Bootstrap + +```sh +# version 3.x +npm install bootstrap-sass --save + +# version 4.x +npm install bootstrap@next --save +``` + +### Configuring Project Create an empty file `_variables.scss` in `src/`. -In `styles.scss` add the following: +If you are using `bootstrap-sass`, add the following to `_variables.scss`: +```sass +$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; ``` -@import '_variables'; + +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'; ``` -Open `app.component.html` and add the following markup -``` +### Testing Project + +Open `app.component.html` and add the following markup: + +```html ``` + With the application configured, run `ng serve` to run your application in develop mode. In your browser navigate to the application `localhost:4200`. Verify the bootstrap styled button appears. To ensure your variables are used open `_variables.scss` and add the following: + +```sass +$brand-primary: red; ``` -$body-color: red; -``` -Return the browser to see the font color changed. -**Note:** When you make changes to `angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes. +Return the browser to see the font color changed.