How to add Bootstrap 5 to Angular-CLI project ?

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.

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.