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.