diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md index 3debf5d279f1..564b473c4798 100644 --- a/docs/documentation/stories/include-bootstrap.md +++ b/docs/documentation/stories/include-bootstrap.md @@ -2,7 +2,7 @@ # Include [Bootstrap](http://getbootstrap.com/) -[Bootstrap](http://getbootstrap.com/) is a popular CSS framework which can be used within an Angular project. +[Bootstrap](https://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 @@ -45,9 +45,41 @@ Now that the project is set up it must be configured to include the bootstrap CS "styles.css" ], ``` + +### Adding full Bootstrap component JS support +```json + +// version 4 + +**Note:** from Bootstrap site + +Some plugins and CSS components depend on other plugins. If you include plugins individually, +make sure to check for these dependencies in the docs. Also note that all plugins depend on +jQuery (this means jQuery must be included before the plugin files). +Consult our bower.json to see which versions of jQuery are supported. +https://v4-alpha.getbootstrap.com/getting-started/javascript/ + +In `.angular-cli.json` add the following lines to the scripts section: + +# version 4.x + "scripts": [ + "../node_modules/jquery/dist/jquery.js", + "../node_modules/tether/dist/js/tether.js", + "../node_modules/bootstrap/dist/js/bootstrap.js", + ] +``` **Note:** When you make changes to `.angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes. +### Other Bootstrap component libraries + + - ng bootstrap https://ng-bootstrap.github.io (version 4.x only) + - ng2 bootstrap http://valor-software.com/ng2-bootstrap/ (version 3.x & 4.x) + +You should check with the libraries for instructions how to include their project with Angular-cli. You probably only need to +include the above CSS instructions, the JS/TS part will be provided by the library themself. + + ### Testing Project Open `app.component.html` and add the following markup: