How To Install Bootstrap In Angular

How to add/install Bootstrap to Angular project ?

In this quick tip, you’ll see how to install/add Bootstrap to your Angular project. Assuming that you already have an Angular project up and running, let’s get started.

You can also follow the video tutorial on YouTube.

Install/Add Bootstrap to Angular

Bootstrap depends on jQuery and popper.js. So you need to install both of them along with Bootstrap.

Install bootstrap, jQuery, popper.js using npm.

npm install bootstrap jquery popper.js

Once bootstrap has been installed, you need to include the bootstrap script and style references in the angular.json under architect -> build key.

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Make sure to keep the same order of the scripts : jQuery, popper and bootstrap, else it may not work as expected

Save the above changes and you should be able to use bootstrap in your Angular application.