How to Add Bootstrap to an Angular 8

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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)