Angular Bootstrap Integration: How to Install and Use Bootstrap Styling

To install Bootstrap in an Angular project, you can use the Angular CLI and npm (Node Package Manager). Follow these steps:

Installing Bootstrap

Use this command to install Bootstrap:

npm install bootstrap

Configuring Bootstrap

In your angular.json file, add "./node_modules/bootstrap/dist/css/bootstrap.min.css" to the styles array and "./node_modules/bootstrap/dist/js/bootstrap.min.js" to the scripts array as shown below:

{
  ....
  ....
  ....
  "projects": {
    ....
      ....
      "architect": {
        ....
        ....
            ....
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            ....
            ....
            ....
            ....
  ....
}

That's it! You have successfully integrated Bootstrap into your Angular application. You can now use Bootstrap components, styles, and utilities throughout your project.