How to add bootstrap 4 in Angular?

We can add bootstrap in angular easily by using npm(Node Package Manager).

I hope you already have working angular project. If not, run the following commands .

ng new frontend
cd frontend

Follow the following steps to add bootstrap 4 in angular.

1) Install Bootstrap 4

We can use npm to install different versions of bootstrap. We can adjust the version accordingly, if required.

npm install bootstrap@4.5.0

2) Install jQuery and Popper

We will use npm command to add jquery and popper libraries as dependencies.

npm install jquery@3.5.1
npm install popper.js@1.14.3

3) Configure the Styles and Scripts

Finally, in angular.json file all we need to do is refer the CSS and JavaScript files in the styles and scripts sections:

That’s it. We are good to go!