How to Add Bootstrap 5 to Angular Project

Add Bootstrap 5 in Angular Application: In this post, I am going to share how to use Bootstrap 5 in the Angular 2+ project.

If you are not sure how to create a new Angular project: How to Create a new project in Angular

To add bootstrap in an Angular application or project is pretty simple – simple like adding any other angular packages. Let us look into this step by step to make this clear.

Bootstrap 5 Installation

There are two ways by which you can install the latest Bootstrap in your project. You can follow any of these two steps.

Installation using Angular CLI

In your Angular project, install Bootstrap using npm CLI.

npm install bootstrap

Installation by editing package.json

Add package in package.json file in your project.

"dependencies": {
    ...
    "bootstrap": "^5.1.3",
    ...
  },Code language: JavaScript (javascript)

Then run the following command to reinstall the packages in your Angular project.

npm install

Import Bootstrap in your project

Import SCSS/CSS or Javascript file in your angular.json file as shown below.

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

            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]Code language: JavaScript (javascript)

Now you can use Bootstrap in your project.

Sample Code

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6">
    <div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>
  </div>
  <div class="col-md-3"></div>
</div>
<router-outlet></router-outlet>

Code language: TypeScript (typescript)

Output

That’s how easy it is to add bootstrap 5 in an angular application. If you face any issues, get in touch with me.