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

Installation

In your Angular project, install Bootstrap using npm CLI.

npm install bootstrap

Or 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

Bootstrap 5 in Angular
Bootstrap 5 in Angular

Leave a Reply

Scroll to Top