How to use bootstrap (v5) conventionally in Angular (v15)-CodePudding

I've set up Bootstrap with Angular using the following commands, based on the ng-bootstrap.github.io docs:

ng new my-ng-bootstrap-app # Create angular app. Choose routing and SCSS options
ng add @ng-bootstrap/ng-bootstrap # add bootstrap (see notes at bottom of this answer for how bootstrap is added to app)
ng generate component my-flex # Create a new component to test bootstrap's flex styles
ng serve # Run the Angular server

(I've detailed the full set-up method here https://stackoverflow.com/a/75039099/11664580)

This allows me to use bootstrap widgets, but when I try to use Bootstrap conventionally, nothing happens - eg:

      <button type="button" >
        My Button
      </button>

The above doesn't apply any styles, even though I have set up as per the ng-bootstrap instructions.

What's the best way to apply bootstrap styles to my Angular app? I've got it working by simply adding a link element with the href to my app.component.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Or should I follow other guidance and install with npm install bootstrap?

CodePudding user response：

if you are going with npm install bootstrap

then after installing in angular.json file search for

styles and add the path like...

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

you can copy the relavent path from node_module > bootstrap > dist > css > bootstrap.min.css or you can copy node_module > bootstrap > dist > css > bootstrap.css

in angular.json there are 2 styles, given path in both styles.

then it should work perfectly I guess.