How to Add Bootstrap to an Angular 9

🎓 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 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)

>> Spring Boot + 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:

>> Angular 9 CRUD Example Tutorial (added bootstrap)

>> Spring Boot + Angular 9 CRUD Example Tutorial  (added bootstrap)

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF