In this article, I will be explaining just one method because it worked for me, there are so many other methods out there but I will only talk about what worked for me.

I will add some useful resources below this post in case you don't like
this approach or you need other methods.

I believe before you can think of making use of Bootstrap on Angular you must have installed Angular on your computer and created a new project.

If you don't know how to install angular or set up a new project, you can checkangular docuemtation.

Getting Started

• Install Bootstrap from npm using thenpm install command

$npminstall--save bootstrap

The--save helps you save bootstrap as a dependency

• You will also need to install jQuery using the following command

$npminstall--save jquery

with that if you navigate to your node_modules folder, scroll down you will find bootstrap there.

Finally, we have to add bootstrap to **angular.json* file*

Open theangular.json file of your project and include:

• node_modules/bootstrap/dist/css/bootstrap.css in thestyles array,
• node_modules/bootstrap/dist/js/bootstrap.js in thescripts array,
• node_modules/bootstrap/dist/js/bootstrap.js in thescripts array.

Example:

{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","version":1,"newProjectRoot":"projects","projects":{"angular-bootstrap-examples":{"projectType":"application","schematics":{},"root":"","sourceRoot":"src","prefix":"app","architect":{"build":{"builder":"@angular-devkit/build-angular:browser","options":{"outputPath":"dist/angular-bootstrap-examples","index":"src/index.html","main":"src/main.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.app.json","aot":true,"assets":["src/favicon.ico","src/assets"],"styles":["./node_modules/bootstrap/dist/css/bootstrap.css","src/styles.css"],"scripts":["./node_modules/jquery/dist/jquery.js","./node_modules/bootstrap/dist/js/bootstrap.js"]},

Once that is done go tosrc/styles.css of your Angular project and import thebootstrap.css file as follows:

@import"~bootstrap/dist/css/bootstrap.css";

Like I said earlier this was what worked for me, normally you could call something like this in yourindex.html file

<linkrel="stylesheet"href="../node_modules/bootstrap/dist/css/bootstrap.css">

But when I did it I got an error.

Thanks for reading. Let's get to know ourselves better, connect with me onTwitter.

Useful resources

• 3+ Ways to add Bootstrap 4 to Angular 9/8 With Example & Tutorial
• Using Bootstrap with angular