How to Add Bootstrap to an Angular CLI project

In this short article, we will learn how to add Bootstrap 3 or Bootstrap 4 to an existing Angular 6/7/8 project.

I assume you have already created Angular 6+ project and now we will integrate bootstrap into it.

Installing Bootstrap from NPM

Use NPM to download bootstrap and note that will be installed into the node_modules folder. For Bootstrap 3:

npm install bootstrap@3.3.7

For Bootstrap 4:

npm install bootstrap

Alternative: Local Bootstrap CSS

As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the official website and created a folder styles (same level as styles.css):

diagram here

Import the Bootstrap CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:

1: Configure angular.json:

"styles": [ "src/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" ] ...

2: Import directly in src/style.css or src/style.scss:
```style
@import '~bootstrap/dist/css/bootstrap.min.css';

Alternative: Using Local Bootstrap CSS

If you added the Bootstrap CSS file locally, just import it in angular.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

or src/style.css:

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

That's all. we have installed bootstrap using npm or local and imported in angular.json or style.scss.