How to include Bootstrap to your Angular 9 Project ?

This tutorial guides you on how to include Bootstrap to your Angular 9 Project. Let’s see how to add Bootstrap once you install Angular CLI and create a sample project.

Install Angular CLI

First, you need to install Angular CLI, so that you can create projects, generate application and required library code (npm packages). To install the latest version of Angular CLI you can run the following npm command in the terminal.

> npm install -g @angular/cli@latest

Once Angular CLI is installed, you can check whether latest version is installed using the following command.

> ng --version

Create Sample Project

Once you have Angular CLI installed, you can use it to create an Angular project using the following ng new command.

> ng new my-first-app

The above command will create your first angular application. While running the above command it will ask whether you would like to add Angular routing and which stylesheet format you would like to use and all, you say “Y” for Angular routing and choose “CSS” for stylesheet format.

Add or Include Bootstrap to your Angular Project

After you are done creating sample project, next you need to install Bootstrap and integrate it with your project as shown below. Bootstrap CSS framework will provide nice styling options.

First, navigate to your project’s root folder as shown below and install Bootstrap version 3 locally using the following command npm install –save bootstrap@3 . Note, we are installing bootstrap locally and not globally i.e., locally for this project so that it will download bootstrap and store it in the node_modules folder.

E:\Angular_workspace\sneppets\my-app> npm install --save bootstrap@3

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: EBUSY: resource busy or locked,rename 'E:\Nithi\Angular_workspace\udemy\my-app\node_modules\webpack-dev-server\node_modules\.fsevents.DELETE\node_modules\set-blocking' -> 'E:\Nithi\Angular_workspace\udemy\my-app\node_modules\webpack-dev-server\node_modules\fsevents\node_modules\set-blocking'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})

+ [email protected]
added 1 package from 1 contributor, removed 1 package and audited 15989 packages
 in 627.725s

Finally, make aware of this bootsratp styling package by Angular. To do this open angular.json file and add the file paths of Bootstrap CSS (bootstrap.min.css) and styles CSS (styles.css) to the styles under build target as shown below.

............
............
............

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },

............
............
............

Also See:

Install Angular CLI

Create Sample Project

Add or Include Bootstrap to your Angular Project

References