How to Add Bootstrap 4 to an Angular 10 App

Home

About

Articles

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.

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:

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:

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

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 .

There are often scenarios in Angular where we need to communicate between components, specifically to send data from a child component to it’s parent component. Consider this Angular 12 app for managing a to do list: Read more

In Angular there are two different types of forms for a user to input data: reactive and template-driven. I personally prefer using reactive forms as they seem to follow the separation of concerns principle, where the core functionality is in the component and the presentation layer is stored in ... Read more

If you’re interested in building a caching service for Angular that will store the observable for a HTTP call in cache, there is an excellent article by Yury Katkov that will explain exactly how to do this using RxJS. Read more

RSS