How to Add Bootstrap to an Angular Application

Bootstrap can be added to an Angular project in two main ways: use the Bootstrap CSS and JavaScript bundle directly, or install ng-bootstrap for Angular-native components. The first option is suitable when you mainly need Bootstrap's grid and utility classes. Choose ng-bootstrap when you want interactive components such as modals and dropdowns without Bootstrap's JavaScript dependency.

Prerequisites

You need Node.js and npm, a terminal, and the Angular CLI. Check the Angular CLI setup guide for the Node.js versions supported by your Angular release, then install the CLI if necessary:

npm install -g @angular/cli

Create a project and move into its directory:

ng new angular-bootstrap
cd angular-bootstrap

The CLI may ask which stylesheet format and optional features to use. The steps below work with CSS or SCSS. If you are new to front-end tooling, this overview of how to start learning programming can help you organize the prerequisites.

Option 1: Add Bootstrap CSS and JavaScript

This approach gives the application Bootstrap's layout system, utilities, components, and icons. Install the packages from the project directory:

npm install bootstrap bootstrap-icons

Import the styles

If the project uses SCSS, add these imports near the top of src/styles.scss:

@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";

For a CSS project, add the package files to the build configuration in angular.json. Locate the application's build.options section and update its arrays:

{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/bootstrap-icons/font/bootstrap-icons.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]
}

The bundle includes Popper, which Bootstrap dropdowns and tooltips require. Restart ng serve after editing angular.json so the build picks up the new files.

Test the installation

Add a simple Bootstrap alert and button to a component template:

<div class="container py-4">
  <div class="alert alert-success" role="alert">
    Bootstrap is working.
  </div>
  <button class="btn btn-primary" type="button">
    <i class="bi bi-check-circle" aria-hidden="true"></i>
    Continue
  </button>
</div>

Run ng serve and open the local address shown in the terminal. The alert, button, spacing, and icon should be styled.

Option 2: Use ng-bootstrap for Angular components

ng-bootstrap rebuilds Bootstrap's interactive components for Angular. It uses Bootstrap CSS but does not require Bootstrap's JavaScript bundle. The project's official installation command is:

ng add @ng-bootstrap/ng-bootstrap

The schematic installs compatible dependencies and updates the Angular project. This is safer than installing a prerelease with @next. Consult the ng-bootstrap documentation to confirm compatibility with the Angular and Bootstrap versions in your project.

Use a component in a standalone Angular app

Modern Angular projects use standalone components by default. Import only the ng-bootstrap feature you need. This modal example imports NgbModal and NgbModalModule:

import { Component, inject } from '@angular/core';
import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgbModalModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  private modalService = inject(NgbModal);

  open(content: unknown): void {
    this.modalService.open(content);
  }
}

Then add the trigger and modal template to app.component.html:

<button class="btn btn-primary" (click)="open(details)">
  Open details
</button>

<ng-template #details let-modal>
  <div class="modal-header">
    <h2 class="modal-title fs-5">Account details</h2>
    <button type="button" class="btn-close"
      aria-label="Close" (click)="modal.dismiss()"></button>
  </div>
  <div class="modal-body">
    <p>This modal is controlled by Angular.</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-secondary" (click)="modal.close()">
      Close
    </button>
  </div>
</ng-template>

If you maintain an older NgModule-based application, import NgbModule in the appropriate module instead. Do not include both ng-bootstrap behavior and Bootstrap's JavaScript for the same component, because two implementations may compete for the same DOM elements.

Which setup should you choose?

Whichever option you choose, keep package versions compatible and commit package.json and the lockfile. For more context on the underlying framework, see this comparison of popular CSS frameworks.