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.
Then run the following command to reinstall the packages in your Angular project.
Import Bootstrap in your project
Now you can use Bootstrap in your project.
<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)
That’s how easy it is to add bootstrap 5 in an angular application. If you face any issues, get in touch with me.