How to Install Bootstrap 5.5.3 in Angular 18 or Higher

Introduction

Installing Bootstrap in Angular is a quick and easy process. However, there are some details to keep in mind to ensure the installation is correct. In this article, I will explain how to install Bootstrap in Angular step by step.

Prerequisites

To follow this article, you need to have installed:

The example Angular project is version 18.1.1 and uses scss as the style preprocessor.

Run the installation command

Visit the official Bootstrap website and copy the installation command. At the time of writing this article, the installation commands you can use for npm or pnpm are as follows:

npm i [email protected]

You can also use pnpm or yarn. In this case, the command would be:

pnpm i [email protected]

Verify the installation

Once you have run the installation command, Bootstrap will be installed in your Angular project. The package.json file in my case using Angular version 18 looks as follows:

  "dependencies": {
    "@angular/animations": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/forms": "^18.1.1",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/router": "^18.1.1",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

Tips

It is important to install the packages with the same package manager you use in Angular. If you use npm, install Bootstrap with npm. If you use pnpm, install Bootstrap with pnpm. Personally, I usually use pnpm.

Another important aspect is that the dependency is added to the dependencies array in the package.json file. If you add the dependency to the devDependencies array, Bootstrap will not be installed correctly when in production.

Import Bootstrap into your Angular project

Import Bootstrap styles into your project. To do this, open the angular.json file and add the Bootstrap styles path in the styles section and the Bootstrap JavaScript code path in the scripts section.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "application-example": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "styles": [
              "node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "@angular/localize/init",
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        }
      }
    }
  }
}

Tips

The order in the styles array is important. If you have custom styles, make sure Bootstrap loads first. Otherwise, Bootstrap styles may override your custom styles.

It may be the case that you are only interested in Bootstrap styles and not in the JavaScript scripts. In this case, it is not necessary to add the Bootstrap scripts path in the scripts section. It would be a bit unusual, but it is possible.

Adding this configuration during the build makes the compiler include the files when creating the bundle. If you do not add this configuration, Bootstrap will not be included in the bundle and Bootstrap styles will not be applied.

Import Bootstrap into Angular global styles

Import Bootstrap styles into the styles.scss file of your Angular project with the @import statement. This way, Bootstrap styles will be applied throughout the Angular application.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100dvh;
}

//Bootstrap
@import 'bootstrap/scss/bootstrap';

.dropdown.no-arrow {
  .dropdown-toggle::after {
    display: none;
  }
}

Tips

The order in the file is important. In summary: