How to Add Bootstrap to an Angular 9

Author:
In this short article, we will learn how to add Bootstrap 3 or Bootstrap 4 to an existing Angular 9 project.
I assume you have already created an Angular 9 project and now we will integrate bootstrap into it.
Refer below tutorials for complete example:
>> Angular 9 CRUD Example Tutorial (added bootstrap)

Video

The video of this article available on my YouTube channel. Check out all popular video tutorials on my youtube channel and subscribe for future videos at https://www.youtube.com/c/javaguides.

Installing Bootstrap using NPM

Let's use npm to download bootstrap and note that it 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 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:

Comments

Post a Comment

Leave Comment