Angular + Bootstrap 4 Starter

How to use Bootstrap 4 with Angular 7

I’ve recently seen a lot of questions on Stack Overflow with developers trying to figure out how to use the latest Bootstrap 4 with Angular 7. Here’s what to do if you’re facing this challenge.

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": [
     "styles.css".
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
}]

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:

Angular 7 + Bootstrap 4 Working Example

I’ve also added a Bootstrap Modal to the demo so that you can see how to work with the Bootstrap 4 components.

Thanks for reading the whole story. Keep on learning more Bootstrap 4, ❤ and how-to Bootstrap.

_Carol