How to add Bootstrap to the Angular Project

In simple steps how to add bootstrap to the angular project.Here we are using MAC OS

1. First install Node Js Download .
2. Check installed version of node and npm using node -v and npm -v

Fig 1: version check command in terminal

3. Install Angular-CLI using the command sudo npm install -g @angular/cli and check the installed version using ng version command.

Fig 2: Angular version check

4. Create a new angular application using ng new sample. After this command you will see below files are creating it will take few minutes.

Fig 3: Creation of sample angular project

5. Install bootstrap by using command npm install bootstrap

6. After installation import the css and js path of bootstrap in the angular.json file.

Fig 5: angular.json file

7. Import the bootstrap path @import ‘~bootstrap/dist/css/bootstrap.min.css’; in the styles.scss file

8. To test weather bootstrap is working, take a sample bootstrap button and check in UI http://localhost:4200/ <button type="button" class="btn btn-primary">Primary</button>

Fig 6: Angular UI

Hurray! Done successfully added the bootstrap to the Angular Application.