An Ultimate Guide to Install Bootstrap in Angular and Level Up Your UI

To install Bootstrap in Angular, simply run npm install bootstrap and add "node_modules/bootstrap/dist/css/bootstrap.min.css" to the styles array in angular.json. Then, run ng serve to see the changes. This simple integration enhances your Angular project’s UI with Bootstrap’s responsive design features.

In this blog, we’ll explore the top 5 methods for installing Bootstrap in Angular You’ll learn different ways to integrate Bootstrap and best practices for enhancing your app's design. 

Want to sharpen your Angular skills? Advance your tech career with upGrad’s Online Software Development Courses, featuring an updated curriculum on generative AI, industry-relevant projects, and hands-on case studies. Enroll Now!

How to Install Bootstrap in Angular: Top 5 Methods Explained

To install Bootstrap in Angular, ensure your development environment includes Node.js, npm, and a reliable code editor like Visual Studio Code. These tools allow you to scaffold, run, and manage Angular projects efficiently. Start by installing Angular CLI globally with npm install -g @angular/cli, and with a solid understanding of Angular fundamentals, you’ll be ready to integrate Bootstrap seamlessly.

Want to take your Angular skills even further? While you're getting the hang of Bootstrap, why not check out some courses like Full Stack Development or even dive into AI? It’s all about leveling up! 

• Post Graduate in Product Management Course from Duke
• AI-Powered Full Stack Development Course by IIITB
• Generative AI Foundations Certificate Program

Now let’s explore the top 5 methods for integrating Bootstrap into an Angular application so that you can choose the best approach for your project.

Method 1: Install Bootstrap via npm

Installing Bootstrap via npm (Node Package Manager) is the most recommended and production-ready approach for integrating Bootstrap in Angular applications. This method allows Bootstrap to be treated as a project dependency, giving you:

• Version control via package.json
• Custom theming using SCSS
• Modular bundling with Angular CLI
• Better performance, security, and maintainability

If you’re building a real-world Angular app—especially one with routing, services, or modular architecture—this is the method you should use.

Step 1: Open Terminal and Navigate to Your Angular Project

Before running any command, make sure you're inside your Angular app’s root directory.

Run this in your terminal:

cd your-angular-project

Step 2: Install Bootstrap via npm

This command installs the latest version of Bootstrap and adds it to your project’s node_modules directory.

Run this command:

npm install bootstrap

This also updates your package.json with a bootstrap entry under "dependencies".

To prevent breaking changes in future updates, pin the exact version:

npm install bootstrap@5.3.3

Step 3: Import Bootstrap CSS

There are two common ways to apply Bootstrap's styles globally in your Angular app. Choose one of the following:

Option A: Import in styles.scss (recommended for SCSS users)

Open your src/styles.scss (or create it if it doesn’t exist), and add the following line at the top:

 Paste this inside styles.scss:

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

The ~ tells Angular CLI to look inside node_modules. This imports Bootstrap globally into your app.

Option B: Add Bootstrap CSS in angular.json (recommended for CSS users)

If you're not using SCSS, open angular.json and locate the styles array under your project’s build > options.

Add the Bootstrap path like this:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

This ensures Bootstrap CSS is included in every build automatically.

Step 4: (Optional) Add Bootstrap JavaScript

If you plan to use Bootstrap’s interactive components like modals, dropdowns, or tooltips, include Bootstrap’s JavaScript bundle.

In the same angular.json, add this to the scripts array:

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

The bundle includes Popper.js, which is needed for dropdowns and tooltips.

No jQuery required (Bootstrap 5+ is jQuery-free).

Step 5: Restart Angular Development Server

Once you've updated angular.json, you must restart your Angular development server to apply the changes.

Run this:

ng serve

This ensures Angular CLI reprocesses all style and script configurations.

Verify Installation

To check if Bootstrap is working correctly, try using a Bootstrap class in your component.

Add this inside app.component.html:

<div class="container mt-5">
  <h1 class="text-primary">Bootstrap is Working!</h1>
  <button class="btn btn-success">Test Button</button>
</div>

Open your browser and visit http://localhost:4200. You should see a styled heading and button using Bootstrap’s default theme.

Tips and Best Practices

• Use only one method of importing styles (either angular.json or styles.scss) to avoid duplication.
• Keep dependencies up to date:

npm update bootstrap

• If using Angular Material, be aware that some styles may clash with Bootstrap. Consider scoping styles carefully or isolating modules.

Curious to know how to build dynamic, responsive web applications? Begin with upGrad's JavaScript Basics from Scratch Course to build a strong foundation in key concepts like variables, data types, and functions in just 19 hours of learning.

Method 2: Installing Bootstrap via CDN

Using a Content Delivery Network (CDN) is the quickest and easiest way to include Bootstrap in your Angular project. This method doesn’t require any installation or dependency management. Instead, Bootstrap’s CSS and JavaScript files are loaded directly from an online source, making it ideal for prototypes, demo apps, or lightweight Angular projects where minimal setup is preferred.

Step 1: Open index.html File

Navigate to the root of your Angular project and open the file at:
/src/index.html

This file is the main HTML entry point for your Angular application. Any styles or scripts added here will be loaded before your app renders.

Step 2: Add Bootstrap CSS in <head>

Inside the <head> section of index.html, add the following line to include Bootstrap’s CSS:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" 
  rel="stylesheet" 
  integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 
  crossorigin="anonymous">

Explanation:

• The rel="stylesheet" attribute tells the browser to treat this as a CSS file.
• The href URL points to the Bootstrap 5.3.0 minified CSS on jsDelivr, a popular CDN.
• The integrity and crossorigin attributes are optional but recommended for Subresource Integrity (SRI), which protects against file tampering.

Once added, all Bootstrap classes (e.g., .btn, .container, .alert) become available globally in your Angular components.

Step 3: Add Bootstrap JavaScript Bundle Before </body>

To include Bootstrap JS and its dependencies, add the <script> tag just before the closing </body> tag:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" 
  integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 
  crossorigin="anonymous"></script>

Explanation:

• This script includes Bootstrap’s JavaScript functionality, such as modals, dropdowns, tooltips, and collapses.
• The bundle.min.js file includes Popper.js as well, which is required by some Bootstrap components.
• It must be placed at the end of the document to ensure the DOM is fully loaded before any JS runs.

Example Use After Setup

After you’ve added the above CDN links, you can immediately start using Bootstrap classes in your Angular component templates. In any component’s HTML file (e.g., app.component.html):

<div class="container mt-4">
  <h1 class="text-primary">Welcome to My Angular App</h1>
  <button class="btn btn-success">Click Me</button>
</div>

You should see a styled heading and button rendered automatically using Bootstrap styles.

Tips and Considerations

• Version Locking: Always specify an exact version (e.g., @5.3.0) to avoid unexpected changes when Bootstrap updates.
• Offline Limitations: Since files are hosted online, this method won’t work without an internet connection. This makes it unsuitable for apps that need to be available offline.
• No Customization: You can’t override Bootstrap SCSS variables using the CDN. Use the SCSS method (Method 5) for that if you need to customize the theme.
• No Dependency Management: Bootstrap won’t appear in your package.json, and you can’t control it with npm/yarn, which means no automatic updates or version control.
• Performance: While using a CDN is convenient, relying on an external source may slow down the initial load time, especially if there are network issues. Consider hosting Bootstrap locally in production for better control over loading times.
• Fallback Strategy: You can add a fallback mechanism for your CDN links in case the external resource fails. This ensures your app still functions if the CDN is unreachable. For example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
  onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css'">

• CDN Version Conflicts: Be mindful of potential version conflicts if you are using other libraries that depend on a specific version of Bootstrap. Ensure compatibility before proceeding with this method.

Also Read: Life Cycle of Angular Components: Various Methods Explained

Method 3: Configure Bootstrap via angular.json

This method integrates Bootstrap directly into Angular's build system by modifying the angular.json configuration file. It ensures that Bootstrap’s CSS and JavaScript files are bundled and served with every build of your application.

Unlike the @import approach in styles.scss, using angular.json is more declarative and ensures that Bootstrap is loaded at the global level consistently. This method is ideal for developers who prefer configuration-driven setups or who are not using SCSS in their project.

Step 1: Navigate to Your Angular Project Directory

Before configuring anything, ensure you are inside your Angular project folder. You can do this by navigating to the project directory through the terminal.

cd your-angular-project

This ensures all subsequent commands and file edits are applied to the correct project.

Step 2: Install Bootstrap Using npm

You must first install Bootstrap locally in your project so that Angular CLI can access it through node_modules.

npm install bootstrap

This command adds Bootstrap to your project’s dependencies and makes its CSS and JavaScript files available for reference in the angular.json configuration.

Step 3: Open and Locate the Correct Section in angular.json

In the root directory of your Angular project, open the angular.json file. This file contains build and serve configurations for your application.

Within this file, locate the section:

projects > [your-project-name] > architect > build > options

Under the options object, you will find two arrays named styles and scripts.

These arrays are used to include external CSS and JavaScript files into the application’s global build.

Step 4: Add Bootstrap CSS to the styles Array

Inside the styles array, add the path to Bootstrap’s minified CSS file.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

This ensures that Bootstrap’s global styles are included in every build and apply throughout your application.

If your project uses styles.scss instead of styles.css, make sure to replace the second line accordingly.

Step 5: Add Bootstrap JavaScript to the scripts Array (Optional)

If your application uses Bootstrap components that require JavaScript, such as modals, dropdowns, or tooltips, include Bootstrap’s JavaScript bundle in the scripts array.

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

The bootstrap.bundle.min.js file includes Popper.js, which is necessary for certain Bootstrap components to function correctly. This avoids the need to include Popper separately.

If your application only uses static Bootstrap components, such as grid layout or buttons, this step is optional.

Step 6: Save angular.json and Restart Angular Server

After making these changes, save the angular.json file and restart the Angular development server.

ng serve

Restarting is necessary because Angular CLI only loads build configurations at startup. Without restarting, the new CSS and script paths will not be included in the current build.

Verify Bootstrap Integration

To verify that Bootstrap has been successfully configured, open any component template and apply Bootstrap classes.

In src/app/app.component.html, add the following:

<div class="container mt-4">
  <h2 class="text-primary">Bootstrap Configured via angular.json</h2>
  <button class="btn btn-outline-success">Test Button</button>
</div>

Run the application and navigate to http://localhost:4200. If Bootstrap is configured correctly, you will see styled elements rendered on the page.

Tips: 

1. Do not import Bootstrap manually in both styles.scss and angular.json. Choose only one method to avoid style duplication.

2. Place node_modules/bootstrap/dist/css/bootstrap.min.css above your custom styles to ensure Bootstrap’s defaults are applied first.

3. When updating Bootstrap, always restart the Angular server after updating the path or version.

4. If you remove Bootstrap later, also remove the corresponding paths from angular.json to prevent build errors.

Also Read: How to Install Node.js and NPM on Windows? [Step-by-Step]

Method 4: Use Angular-Specific Libraries (ng-bootstrap / ngx-bootstrap)

Instead of loading Bootstrap directly via CSS and JavaScript, you can use Angular-specific libraries like ng-bootstrap and ngx-bootstrap. These libraries rewrite Bootstrap’s JavaScript components (modals, dropdowns, tooltips, carousels, etc.) as Angular components, making them fully compatible with Angular’s architecture.

They eliminate the need for jQuery, ensure type safety, follow Angular's change detection and lifecycle hooks, and offer better integration with Angular forms and templates. Both options still require Bootstrap’s CSS to be included via npm or CDN.

This method can be applied in two ways, let’s discuss both step-by-step

Option A: Using ng-bootstrap (Recommended for Angular 13+)

Step 1: Install ng-bootstrap via npm

Use the following command to add ng-bootstrap to your Angular project.

npm install @ng-bootstrap/ng-bootstrap

This installs the library, which contains a wide range of Bootstrap-based components rewritten specifically for Angular. It does not include Bootstrap's CSS, so you must also ensure Bootstrap styles are present (via styles.scss or angular.json as shown in previous methods).

Step 2: Import NgbModule in Your App Module

To make ng-bootstrap components available across your Angular application, import its module into your root application module (app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgbModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

This sets up all ng-bootstrap components for use in your templates.

Step 3: Use ng-bootstrap Components in Templates

Once configured, you can begin using ng-bootstrap components just like any other Angular component.

For example, to use an alert:

<ngb-alert type="success" [dismissible]="true">
  This is a Bootstrap alert from ng-bootstrap.
</ngb-alert>

Other components such as carousels, tooltips, modals, and accordions work similarly and support Angular features like data binding, inputs, outputs, and structural directives.

Notes and Requirements

• You must manually import Bootstrap's CSS using styles.scss or angular.json.
• ng-bootstrap only supports Bootstrap 5 and later.
• It is actively maintained and aligns closely with Angular's versioning.
• No JavaScript or jQuery is required; all interactions are handled via Angular APIs.

Option B: Using ngx-bootstrap (Component-wise Import Model)

Step 1: Install ngx-bootstrap and Bootstrap CSS

Use the following command to install ngx-bootstrap along with Bootstrap itself.

npm install ngx-bootstrap bootstrap

ngx-bootstrap is a component-driven Bootstrap library that allows you to import only the required features, minimizing bundle size and improving load performance.

You also need to import Bootstrap’s CSS globally, either in styles.scss:

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

or in angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Step 2: Import Specific Modules in App Module

Unlike ng-bootstrap, ngx-bootstrap allows importing individual modules based on your requirements.

To use modals, for instance:

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

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

For tooltips:

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  imports: [
    TooltipModule.forRoot()
  ]
})

This approach reduces unused code and allows better control over dependencies.

Step 3: Use ngx-bootstrap Components in Templates

You can now use Bootstrap-like UI components in your Angular HTML templates.

To add a tooltip:
<button type="button" class="btn btn-info" tooltip="This is a tooltip">
  Hover me
</button>

Comparison Between ng-bootstrap and ngx-bootstrap

Let’s take a look at how the features of ng-bootstrap and ngx-bootstrap.

Tips: 

1. Always import only the modules you need when using ngx-bootstrap to keep bundle size minimal.

2. Ensure that you have included Bootstrap CSS separately through npm or CDN; these libraries only provide component logic.

3. Choose ng-bootstrap for full Angular-native compliance and predictable behavior with newer Angular versions.

4. Prefer ngx-bootstrap if you need granular control over what gets imported or require Bootstrap 3 support.

Curious to enhance your tech skills? Join upGrad’s Full Stack Development Course by IIITB, where you’ll learn backend APIs and build interactive web UIs with expert guidance. Enroll now to acquire the essential skills you need to succeed!

Also Read: How to Install Angular in Mac in 2025? Step-by-Step Guide

Method 5: Integrate Bootstrap Using SCSS

This method integrates Bootstrap into your Angular project using SCSS, providing full control over customization. By using Sass variables and mixins, you can easily modify colors, fonts, spacings, and remove unused components. This approach is ideal for teams optimizing bundle size or implementing a design system. Custom styles can be applied before importing the Bootstrap framework, ensuring efficient integration.

Step 1: Navigate to Your Angular Project Directory

Ensure you're working within the Angular project where you want to apply Bootstrap styles.

cd your-angular-project

This ensures all installation and file changes affect the correct environment.

Step 2: Install Bootstrap Using npm

You need to install Bootstrap to gain access to its SCSS source files.

npm install bootstrap

This installs Bootstrap into the node_modules folder and registers it in your package.json. The SCSS files are now accessible inside node_modules/bootstrap/scss.

Step 3: Rename styles.css to styles.scss (If Needed)

If your project was scaffolded with a .css stylesheet, rename it to .scss to enable Sass features.

In the src folder:

• Rename styles.css to styles.scss.
• Open angular.json and update the reference under the "styles" array.

"styles": [
  "src/styles.scss"
]

This change tells Angular CLI to compile Sass instead of plain CSS for global styles.

Step 4: Override Bootstrap SCSS Variables (Optional)

To customize Bootstrap’s default theme, define variable overrides before importing the full Bootstrap framework.

For example, in styles.scss:

$primary: #6f42c1;
$font-family-sans-serif: 'Inter', sans-serif;

You can override any default variable listed in Bootstrap’s _variables.scss file, such as $body-bg, $border-radius, or $success.

Overriding these before import ensures that your custom values are used during compilation.

Step 5: Import Bootstrap SCSS After Overrides

After the variable overrides, import Bootstrap’s SCSS into the same styles.scss file.

@import "node_modules/bootstrap/scss/bootstrap";

This line brings in the full Bootstrap framework with your customizations applied. Since you are working with SCSS, you’re importing the source, not the compiled CSS.

Step 6: Restart the Angular Development Server

After making changes to your styles and angular.json, restart the development server.

ng serve

Verify Bootstrap Integration

You can now test Bootstrap in your Angular components using standard Bootstrap classes.

In app.component.html, add the following:

<div class="container mt-5">
  <h1 class="text-primary">Customized Bootstrap Integration</h1>
  <p class="lead">This is Bootstrap styled using SCSS.</p>
  <button class="btn btn-outline-primary">Test Button</button>
</div>

Open your browser and navigate to http://localhost:4200 to confirm that the styles are correctly applied, including your theme customizations.

Tips:

• Always define variable overrides before importing Bootstrap SCSS.
• Do not import both Bootstrap SCSS and compiled CSS in the same project to avoid conflicts.
• Keep your styles.scss file organized by grouping overrides separately from imports.
• Consider removing unused Bootstrap components manually from the import file to reduce bundle size.
• Use Angular CLI's differential loading and build optimizations to enable tree-shaking of unused styles where possible.

Also Read: How to Run an Angular Project: A Complete Step-by-Step Guide

Now that you've explored the top methods for installing Bootstrap in Angular, let's look at the best practices to ensure smooth integration and maintainability.

Best Practices to Follow When Installing Bootstrap 

When you install Bootstrap in Angular and incorporate it into your project, the following best practices guarantee that your application is maintainable, scalable, and efficient. 

1. Use the Angular CLI for installation: Use the Angular CLI to add Bootstrap to your project. This guarantees that dependencies are properly maintained and integrated into the project's structure. 

npm install bootstrap 

2. Import Bootstrap for Angular Styles: Import bootstrap in the global styles file (src/styles.scss or src/styles.css). 

/* styles.scss */ or /* styles.css */ 

@import '~bootstrap/dist/css/bootstrap.min.css'; 

3. Use Angular’s ng-bootstrap or ngx-bootstrap: Consider libraries that provide Angular-friendly Bootstrap components, such as ng-bootstrap or ngx-bootstrap.  

ng add @ng-bootstrap/ng-bootstrap 

or  

npm install ngx-bootstrap

4. Keep Bootstrap and its dependencies updated: To make use of the most recent features, improvements, and security updates, update Bootstrap and its dependencies on a regular basis. 

npm update bootstrap 

Ready to advance your Angular Development skills with AI? Enroll in the upGrad’s Generative AI Foundations Certificate Program to gain expertise in 15 top AI tools, including Microsoft Copilot, Azure AI, and GitHub. Get started today!

Also Read: How to Build and Publish an Angular Library: 2025 Guide

Now, let's explore how choosing the right installation method can perfectly align with your project’s needs.

How to Choose the Best Bootstrap Installation for Angular?

When selecting a Bootstrap installation method for Angular, consider your app's scale and customization needs. For larger, production-level projects, using npm or ng-add offers more control, allowing for easy updates and customization. 

For quick prototypes or simple projects, a CDN or manual download might be sufficient, though these methods offer less flexibility and control over updates.

Here's a comparison table to help you select the most suitable installation method for your project:

Level up your Tech Learning Journey with upGrad!

You can install Bootstrap in Angular by running npm install bootstrap, then importing the Bootstrap CSS file in your angular.json file under the styles array. Finally, restart the server with ng serve to apply the changes. Staying updated with the latest industry practices and continuously improving these skills is key to becoming proficient.

upGrad offers comprehensive courses that enhance your understanding of Booststrap, Angular and modern web development. With industry-relevant curriculum and expert guidance, upGrad equips you with the skills needed to excel in your tech career.

Here are a few additional courses recommended to complement your learning journey. While they are not directly linked to Angular, they can help you broaden your skills in related areas.

• Node.js For Beginners
• Programming with Python: Introduction for Beginners
• AI-Driven Full-Stack Development

Curious about which software development course best fits your goals in 2025? Contact upGrad for personalized counseling and valuable insights, or visit your nearest upGrad offline center for more details.

Boost your career with our popular Software Engineering courses, offering hands-on training and expert guidance to turn you into a skilled software developer.

Explore our Popular Software Engineering Courses

Master in-demand Software Development skills like coding, system design, DevOps, and agile methodologies to excel in today’s competitive tech industry.

In-Demand Software Development Skills

Stay informed with our widely-read Software Development articles, covering everything from coding techniques to the latest advancements in software engineering.

Read our Popular Articles related to Software

Reference:
https://www.esparkinfo.com/software-development/technologies/angular/statistics