How to Add Bootstrap to an Angular 8

Author:
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 8 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)

Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course