How to use Bootstrap 4 with Angular 7


1. Add Bootstrap to package.json

npm install bootstrap --save

This will add the following lines to the “dependencies” section of the apps’ package.json file…

"dependencies": {
"jquery": "^3.3.1",
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3"

So the package.json will look something like this…

2. Add Bootstrap to angular.json

You’ll also need to add Bootstrap to “apps” styles and scripts in the Angular JSON config file…

"apps": [{
  "styles": [
"scripts": [

It will look something like this…

3. Finally, add Bootstrap to the app

This last step will be more specific to your app. In this case I’m using an app module that the other components will inherit from, making Bootstrap available to all the apps’ components…

It’s simply imported using:

import bootstrap from "bootstrap";

It looks like this in my app module TypeScript…

That’s It!

Of course you probably want to see this in action. Here’s a working demo for you to fork or play with: