How to add Bootstrap 4 to Angular-CLI project ?
Basically bootstrap can be configured in angularjs 2 or angular-cli through ng-bootstrap or directly using bootstrap. Here we are going to see how to add bootstrap 4 to angular-cli project.
Table of Contents
Prerequest:
Node js should be installed in your machine.
Read how to install Node JS here,
How to install Node JS in your windows ?
Updated on 25th May 2017:
Now in angular 4 cli you can install the bootstrap just with 3 steps.
Step 1: Install bootstrap
npm install --save-dev bootstrap
Step 2: Add the bootstrap entry in angular-cli.json
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
Step 3: Now use bootstrap classes in your html.
Step 1: Install tether, jquery and bootstrap
npm comment to install tether:
npm i -S tether
npm comment to install jquery:
npm i -S jquery
npm comment to install bootstrap:
npm i bootstrap@next --save
Note: –save / -S are same.
Reference: https://docs.npmjs.com/cli/install
Step 2:
Add the bootstrap css and tether, jquery and bootstrap js entries to angular-cli.json file
Adding tether, jquery and bootstrap entries:
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js"]
Adding bootstrap css:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
Note: After completing the first step, ensure you have tether, bootstrap, jquery js and bootstrap min files in the above given paths.
Step 3: Now start your angular-cli project and check it.
If suppose the app is already running, ensure you have re-started your server, because we made the changes in angular-cli.json file. It needs restart to reflect the changes.
You can check by adding few basic bootstrap buttons in index.html (root folder) and verify whether the bootstrap is added or not properly.
<button type="button" class="btn btn-primary">Primary</button>
Feel free to share your thoughts, comments and suggestions below.