Steven McLintock Scottish software developer living in Stratford, Ontario
Steven McLintock

How to Add Bootstrap 4 to an Angular 10 App

By 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.

Angular and Bootstrap

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 bootstrap@4.5.0

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 jquery@3.5.1
npm install popper.js@1.14.3

Configure the Styles and Scripts

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

"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.

More posts like this...

Using Angular’s EventEmitter to Share Data Between Child and Parent Components
By Steven McLintock on

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:
Show Validation Error Messages for Reactive Forms in Angular 9
By Steven McLintock on

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 ...
How to Create a Time-Based Caching Service for Angular
By Steven McLintock on

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.