This has been updated to use Bootstrap Beta.2 (Latest stable) as of April. 12, 2018.
This also works with Angular 5, but not Angular 6. For Angular 6 you can use this post.
I'm aware that 4 (non-beta) has been released, however there is a bug with ng5 cli and Bootstrap 4, so sticking with Beta.2 is your best bet for now. I'll update when the bug is fixed.
1. From the root of your project, run in your terminal:
npm install firstname.lastname@example.org --save
npm install email@example.com --save
npm install popper.js@^1.12.9 --save
If you want to use SASS rather than CSS use:
npm install firstname.lastname@example.org --save --style=sass
Or if you want to only install for development purposes, just append --save-dev.
3. Open up your angular-cli.json file and add the style and scripts:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/jquery/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
If you're using SASS use this config:
"styles": [ "styles.scss" ], "scripts": [ "../node_modules/jquery/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
4. Restart your server and you should be ready to code! (If using CSS)
With SASS you need to make one last step. Place the line below in your styles.scss file (imports bootstrap)
Extra Sass file configuration (suggestion but not required):
Create directory in: src/styles
Create these files and place in that directory: _variables.scss and _custom.scss
"styles": [ "styles/styles.sass" ],
Import files into: styles.scss
@import "../../node_modules/bootstrap/scss/bootstrap" @import "variables" @import "custom"