This tutorial is part of the Angular 19 from Zero to Hero series, designed to help you master Angular from the ground up in 2025. Whether you are an absolute beginner looking to start your journey or an experienced developer upgrading to Angular 19, this guide will provide you with a hands-on approach to integrating Bootstrap 5 seamlessly into your Angular applications. By the end of this tutorial, you will be equipped with the knowledge to build sleek, responsive, and professional-grade UI components using the latest best practices in modern front-end development.

🔹 Overview

This tutorial is your ultimate guide to integrating Bootstrap 5 with Angular 19. We’ll cover everything from installation to using Bootstrap UI components in multiple ways. Whether you're new to Angular or upgrading to Angular 19, this guide will help you build professional, modern UI components.

📌 What You’ll Learn

✅ Installing Bootstrap 5 in Angular 19 using npm, CDN, and Angular CLI
✅ Using Bootstrap components in Angular (Navbars, Grids, Modals, Forms, Tabs, Tooltips, Carousels, and more)
✅ Exploring ng-bootstrap vs. ngx-bootstrap vs. vanilla Bootstrap
✅ Configuring Bootstrap using angular.json, styles.css, and index.html
✅ Leveraging Angular Bootstrap templates for rapid UI development

Let's get started! 🎯

🚀 Why Use Angular 19 with Bootstrap 5?

Both Angular 19 and Bootstrap 5 are widely adopted frameworks that provide the foundation for building modern, efficient, and visually appealing web applications. Each framework brings its own strengths to the table:

• 🔹 Angular 19 → A highly scalable, fast, and component-driven architecture, ideal for building complex single-page applications (SPAs) with robust data handling and seamless UI interactions.
• 🔹 Bootstrap 5 → A sleek, responsive UI toolkit that offers a comprehensive set of pre-designed components, utility classes, and a mobile-first grid system, making it easier to build attractive and functional user interfaces.

By combining these two powerful technologies, you gain access to a high-performance, structured, and maintainable front-end development stack that enhances both user experience and developer efficiency.

📌 Prerequisites

Before we begin, make sure you have:

• ✅ A fundamental understanding of HTML, CSS, JavaScript, and TypeScript.
• ✅ Installed Node.js (LTS) → Download to ensure you have access to the latest stable version required for modern development workflows.
• ✅ Installed Angular CLI 19, which provides essential tools for generating and managing Angular projects efficiently.
• ✅ A code editor like VS Code with the Angular and TypeScript extensions installed for enhanced development productivity.
• ✅ Basic knowledge of command-line operations to execute Angular CLI commands smoothly.

🔹 Check Your Setup

Run the following commands to check if Node.js and Angular CLI are installed:

node -v
ng version

If Angular CLI is not installed, install it using:

npm install -g @angular/cli

🔧 Installing Bootstrap 5 in Angular 19

There are multiple approaches to integrating Bootstrap into an Angular 19 project, each with its own advantages. Whether you prefer integration via npm, using a CDN, adding it through styles.css, or leveraging dedicated Angular Bootstrap libraries, you can choose the method that best suits your development needs. Let’s explore four primary methods:

🔹 Method 1: Installing via npm (Recommended)

This method provides better control over dependencies and allows seamless integration with Angular's build process. It ensures that you always have the latest Bootstrap features and updates while keeping everything within your project's ecosystem.

Step 1: Create a New Angular 19 Project

Feel free to skip this step if you already have a project.

If you don't! Please, run the following command to create a new Angular 19 project:

ng new angular-bootstrap-example

Choose CSS as the default stylesheet format when prompted. This ensures compatibility with Bootstrap’s styles and simplifies the integration process. You can later switch to SCSS or other preprocessor options if needed for advanced styling.

Step 2: Navigate to the Project Directory

cd angular-bootstrap-example

Step 3: Install Bootstrap 5

npm install bootstrap

Step 4: Include Bootstrap in angular.json and add Bootstrap files understylesandscripts arrays:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Step 5: Serve the Angular 19 Project

ng serve

Your app will be available at http://localhost:4200/.

🔹 Method 2: Using Bootstrap via CDN (Quick & Easy)

Using Bootstrap via a CDN is an excellent option when you want to quickly integrate Bootstrap into your Angular project without increasing your build size. This method ensures that your project loads the latest Bootstrap styles and scripts directly from a CDN, reducing the need to manage updates manually. Additionally, since CDNs are optimized for performance and caching, users will experience faster load times when accessing your application. However, an active internet connection is required, which might be a limitation for offline development.

Step 1: Add Bootstrap to index.html

Open src/index.html and add the following inside <head>:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Before </body>, add:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

This method reduces build size but requires an internet connection.

🔹 Method 3: Adding Bootstrap in styles.css

Using Bootstrap via the styles.css file is another efficient method for integration. This approach is particularly useful when you want to avoid modifying the angular.json file or including Bootstrap via a CDN. By importing Bootstrap directly into styles.css, you ensure that its styles are applied globally without requiring additional configurations. However, note that this method does not load Bootstrap’s JavaScript functionalities, meaning interactive components such as modals, dropdowns, and tooltips will not work unless you manually import the necessary Bootstrap scripts elsewhere in your project.

Instead of modifying angular.json, you can include Bootstrap in your global styles:

Step 1: Open src/styles.css

Add:

@import "~bootstrap/dist/css/bootstrap.css";

This method only loads Bootstrap styles, not JavaScript functionalities.

🔹 Method 4: Using Angular Bootstrap Libraries

Using Angular-specific Bootstrap libraries such as ng-bootstrap and ngx-bootstrap provides several advantages over directly using Bootstrap's JavaScript files. These libraries offer:

• Seamless Angular Integration – They are designed to work natively with Angular’s reactive framework, avoiding conflicts with Angular’s change detection.
• No jQuery Dependency – Unlike standard Bootstrap, ng-bootstrap and ngx-bootstrap eliminate the need for jQuery, making your application leaner and more Angular-friendly.
• Optimized Performance – These libraries use Angular directives and components, improving maintainability and performance compared to manually managing Bootstrap’s JavaScript behaviors.
• Modular Approach – With ngx-bootstrap, you only import the specific Bootstrap components you need, reducing the final bundle size of your Angular application.

By using these libraries, you ensure that your Angular application remains fully optimized, maintainable, and free from unnecessary dependencies.

Instead of using vanilla Bootstrap, you can use ng-bootstrap or ngx-bootstrap as follows:

Option 1: Using ng-bootstrap (No jQuery)

1️⃣ Install ng-bootstrap:

ng add @ng-bootstrap/ng-bootstrap

2️⃣ Import it in app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
})
export class AppModule {}

Now you can use Bootstrap components like modals, carousels, and alerts in Angular without jQuery.

Option 2: Using ngx-bootstrap

1️⃣ Install ngx-bootstrap:

npm install ngx-bootstrap

2️⃣ Import Bootstrap modules in app.module.ts:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BsDropdownModule.forRoot(),
    ModalModule.forRoot()
  ],
})
export class AppModule {}

Difference: ngx-bootstrap uses modular imports, reducing bundle size.

📌 Summary

In this tutorial, we covered: ✅ Installing Bootstrap 5 in Angular 19 using npm, CDN, styles.css, and CLI schematics
✅ Using Angular-specific Bootstrap libraries (ng-bootstrap and ngx-bootstrap)
✅ Adding Bootstrap UI components like Navbars, Cards, and Buttons
✅ Comparing **ng-bootstrap vs. ngx-bootstrap

With this knowledge, you can now build beautiful, responsive, and dynamic UI components for your Angular 19 apps! 🚀

📢 Next Steps

🔹 Explore More Bootstrap Components
🔹 Try Angular Material alongside Bootstrap
🔹 Build a Complete Angular 19 Bootstrap Project

Got question? Send them via X! Happy coding! 🎉

• Date: 18 Feb 2025