How to Add Bootstrap 4 to an Angular 10 App
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 email@example.com
Install jQuery and Popper
npm install firstname.lastname@example.org npm install email@example.com
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.
About the Author
Kilt and Code is a blog written by Steven McLintock, a Scottish software developer living in Stratford, Ontario. Steven primarily uses Microsoft's .NET platform and has been working as a developer since 2006.