How to Add Bootstrap 4 in Angular 6,7

Bootstrap is getting used for showing Web Application on Mobile and Desktop in responsive based on the screen size. You can target Mobile, Desktop when you are designing Application in Bootstrap. Bootstrap is Open Source third party tool for designing form controls and allow it to display on screen in responsive manner. 

Steps to add Bootstrap in your existing Angular 6,7 Application:

1. Open your Angular 6 or 7 project

2. Install Bootstrap from the following command from Node.js Command prompt tool

npm install bootstrap jquery popper

3. Once installation of above command get's successfully completed, Open the Angular.json file from root directory

4. In the "Styles" append the following path

"node_modules/bootstrap/dist/css/bootstrap.min.css"

5. Run the Angular project from following command

ng serve --open

6. You will see the Bootstrap styles are applied on the web page.

7. If Bootstrap styles are not applied, then see for any console errors in browser or re-run the Angular project.

Examples of Without and With Bootstrap in Angular App:

When you run Angular 7 Application on the browser and your application doesn't have Bootstrap installed, then it will look like this. 

Now, follow the above steps for installing Bootstrap in your Angular application and see the output shown in below screenshot: