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" class="btn btn-primary">
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?
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.