How to Add Bootstrap to an Angular 7

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 an Angular 6+ project and now we will integrate bootstrap into it.

Refer below tutorials for complete example:

>> Angular 8 CRUD Example Tutorial (added bootstrap)

>> Angular 6 CRUD App Example  (added bootstrap)

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 downloaded Bootstrap from the official website and created a folder styles (same level as styles.css):

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:

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

Refer below tutorials for complete example:

>> Angular 8 CRUD Example Tutorial (added bootstrap)

>> Angular 6 CRUD App Example  (added bootstrap)