How to Add Bootstrap 4 to an Angular 10 AppBy Steven McLintock on
I was trying to add Bootstrap 4 to an Angular 10 app recently and it was more difficult than I expected. We’re able to add Bootstrap 4 easily using NPM (Node Package Manager), but we still need to install and configure the scripts and dependencies. This can result in a visit to StackOverflow which shouldn’t be necessary.
Install Bootstrap 4
We can install the latest version of Bootstrap 4 (at the time of writing this is 4.5.0) using NPM. Please adjust the version number if you require a lower or higher version:
npm install firstname.lastname@example.org
Install jQuery and Popper
According to the getting started guide, Bootstrap 4 requires the jQuery and Popper libraries to be added as dependencies, so we’ll also add these using NPM commands:
npm install email@example.com npm install firstname.lastname@example.org
Configure the Styles and Scripts
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.slim.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
If you have an issue with Popper not loading correctly, please check you have referenced node_modules/popper.js/dist/umd/popper.min.js and not node_modules/popper.js/dist/popper.min.js.