Adding bootstrap to a new Angular Project

Such a long time since i’ve made a post I know I know.

So my learning on React has slowed down a bit. This is due to the fact that I have to get to my head wrapped around Angular now. Exciting times as always shifting and changing.

I’ve been coming across a problemo when starting a new project there is no bootstrap and I’ll be honest here, i keep forgetting how to add it. So here is a lil step by step on how to add Bootstrap stylings to your new Angular project.

I am assuming that you have already done the whole

ng new CREATESOMENEWANGULARAPPTH....

This is not quite the name of the project i made, but still lets continue on how to fast track some bootstrap styles shall we.

first you need to install it as a dependency via your console with npm, just pot this little sucker in.

npm install ngx-bootstrap bootstrap --save

Just watch that puppy install itself and now we get on to the next step. So if you have a look into your angular.json file you’ll see that it does reference some stylings to your styles.css file that is auto generated when making the project as seen in the image below:

This is a good start, now all ya gotta do is add an import in that “styles.css” file here pot this in

/* add this to your styles.css file found in your project src
@import "~bootstrap/dist/css/bootstrap.css";

Now stop the console and redo the whole “ng serve” move and that should sort you right out. Hope this helps you cause now i don’t need to re-remember how i pulled this off.

happy bootstrapping with your angulars

POST EDIT:
If you want the modules for the @ng-bootstrap/ng-bootstrap, use the following command to install this package, Loads of functionality that is bootstrap related

npm i @ng-bootstrap/ng-bootstrap