adding bootstrap to angular global styles

To add Bootstrap to the global styles in Angular, you can follow these steps:

1. Install Bootstrap: Run the following command in your Angular project's root directory to install Bootstrap using npm (Node Package Manager):

npm install bootstrap

1. Import Bootstrap styles: Open the styles.scss file located in the src folder of your Angular project. Add the following line at the top of the file to import Bootstrap styles:

@import '~bootstrap/scss/bootstrap';

1. Save the file: Save the styles.scss file after adding the import statement.

2. Angular CLI configuration: Open the angular.json file located in the root directory of your Angular project. Find the "styles" property under "architect" -> "build" -> "options". Add the following path to the array of styles:

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

The updated "styles" property should look like this:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

1. Save the file: Save the angular.json file after adding the Bootstrap path.

That's it! Bootstrap has now been added to the global styles in your Angular project. You can now use Bootstrap classes and components throughout your application.

Note: Make sure to restart the Angular development server (ng serve) if it was already running for the changes to take effect.

I hope this helps! Let me know if you have any further questions.