How to Install Bootstrap in Angular? Top 5 Ways

Bootstrap is a popular choice for Angular apps because it speeds up UI development while keeping code modular and maintainable. Installing Bootstrap in Angular helps modern developers build responsive, mobile-first UIs without slowing down development. Tools like Angular CLI, ng-bootstrap, and SCSS integration have made it easier than ever to implement design systems quickly. If you're working on enterprise apps or progressive web apps, understanding the best way to install Bootstrap is crucial.

This guide shows you how to install Bootstrap in Angular using five proven methods. It covers everything from simple CDN links to advanced SCSS workflows using "[how to install bootstrap in angular]," "[angular bootstrap integration]," and "[bootstrap in angular applications]."

Advance your career with Data Science certification courses through upGrad's Online Data Science Courses with GenAI Integrated Curriculum. Learn from top institutes like IIIT Bangalore and LJMU, covering Python, Machine Learning, AI, Tableau, and SQL!

Top 5 Methods of Installing Bootstrap in Angular

To install Bootstrap in Angular, ensure your development environment includes Node.js, npm, and Angular CLI. These tools allow you to scaffold, run, and manage Angular projects efficiently. A solid understanding of Angular fundamentals and a reliable code editor like Visual Studio Code will also help streamline the integration process.

Prerequisites List:

• Node.js, npm, and Angular CLI: Install Node.js to get npm, then install Angular CLI globally.
  •  Note: Use npm install -g @angular/cli to install Angular CLI.
• Basic Knowledge of Angular: Familiarity with Angular modules, components, and services is required.
• A Code Editor: Choose a robust editor like Visual Studio Code, WebStorm, or Sublime Text.

If you're looking to deepen your skills alongside front-end expertise, upGrad offers several industry-aligned programs to help you grow in data-driven roles:

1. Professional Certificate Program in Data Science and AI

2. Executive Post Graduate Certificate Programme in Data Science & AI

3. Master’s Degree in Artificial Intelligence and Data Science

Now, let’s explore the top 5 ways to install Bootstrap in angular:

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".

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.

Take your frontend skills further by mastering cloud infrastructure and DevOps. Professional Certificate Program in Cloud Computing and DevOps by upGrad covers AWS, Azure, Google Cloud, and key automation tools. Ideal for developers integrating frameworks like Bootstrap in Angular into scalable, production-ready environments!

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.

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

  3. 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> 

This method is simple and ensures you're always using the most recent version of Bootstrap. 

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:

<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
  integrity="sha384-..." 
  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>

Right before the closing </body> tag in the same file, add:

<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-..." 
  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 (@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.
• No Customization: You can’t override Bootstrap SCSS variables using CDN. Use the SCSS method (Method 5) for that.
• No Dependency Management: Bootstrap won’t appear in your package.json, and you can’t control it with npm/yarn.

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.

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.

Method 5: Integrate Bootstrap Using SCSS

This method allows you to integrate Bootstrap into your Angular project using SCSS (Sass). It is the most flexible and scalable approach when you want to customize Bootstrap’s design system, such as modifying colors, fonts, spacings, or removing unused components.

Bootstrap is built with Sass variables and mixins, and integrating it via SCSS gives you full control over its theming. You can override default values before the framework is imported, ensuring custom styles are baked into your app efficiently. This method is ideal for teams implementing a design system or optimizing the CSS bundle size.

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 the Angular Project [Step-By-Step Explanation]

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 

Also Read: Create Libraries: Build an Angular Library in 2025

With best practices in mind, the next step is choosing the installation method that best fits your project’s needs.

How to Choose the Right Installation Technique for Bootstrap in Angular?

Choosing the right method to install Bootstrap in your Angular application depends on your project’s goals, scale, and technical constraints. Whether you're building a quick prototype, a customizable design system, or a scalable enterprise application, different Bootstrap integration methods offer specific advantages and trade-offs.

Your decision should be guided by factors such as the need for custom theming, performance optimization, development speed, team expertise, and deployment requirements.

Below is a comparison table that outlines when to use each method, along with practical examples to help you align the choice with your use case.

Conclusion

To install Bootstrap in Angular, choose the method that aligns with your project: use npm for maintainable builds, CDN for quick prototypes, or angular.json for global configuration. Opt for ng-bootstrap or ngx-bootstrap for Angular-native components, and SCSS integration for full theming control. Always restart the Angular server after config changes and avoid mixing import methods.

Many developers know how to install tools but struggle to apply them effectively in real-world scenarios. upGrad fills this gap with hands-on projects, expert-led sessions, and career-focused learning in cloud platforms, data modeling, and pipeline optimization. With 10M+ learners and 200+ programs, upGrad empowers professionals to build job-ready skills and accelerate their careers.

Along with the courses mentioned throughout this blog, upGrad offers skill focused courses like: 

• Node.js for Beginners
• AI-Powered Full Stack Development Course by IIITB
• AI-Driven Fullstack Development

Not sure how to upskill in your front-end development career path? Get personalized career counseling to identify the best opportunities for you. Visit upGrad’s offline centers for expert mentorship, hands-on workshops, and networking sessions to connect you with industry leaders!

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 Link:
https://www.sitepoint.com/use-bootstrap-components-without-jquery/