How to Install Bootstrap 5 in Angular 15/14

To install and use bootstrap 5 in Angular 15/14 apps; Through this tutorial, i am going to show you how to install and use bootstrap 5 in Angular 15/14 applications.

How to Install Bootstrap 5 in Angular 15/14

Use the below given steps to install and use bootstrap 5 in Angular 15/14 applications:

• Step 1 – Create Angular 15/14 App
• Step 2 – Install Bootstrap 5
• Step 3 – Configure Bootstrap 5 into Angular App
• Step 4 – Use Bootstrap 5 in Angular
• Step 5 – Run Angular App

Step 1 – Create New Angular 15/14 App

First of all, you need to open your command prompt and execute the following command to install Angular 15/14 app into your system; as follows:

npm install -g @angular/cli 

ng new angularbootstrap//Create new Angular Project

cd angularbootstrap

Step 2 – Install Bootstrap 5

Again open your command prompt and navigate to your Angular 15/14 application. Then execute the following command to install bootstrap 5 into Angular 15/14 app; as follows:

npm install bootstrap
npm i @popperjs/core

Step 3 – Configure Bootstrap 5 into Angular App

Then navigate to your Angular 15/14 app and open package.json file. And then add the following code into it; as follows:

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

Step 4 – Use Bootstrap 5 in Angular

Go to src/app/ directory and open app.component.html file from your Angular 15/14 app. And then add the following code into it; as follows:

<div class="container  text-center mt-5 mb-5">
  <h1>Bootstrap 5 is working fine with Angular 15/14!!</h1>
</div>

Step 5 – Run Angular App

And then execute the following command on terminal to run your angular application; as follows:

ng serve

Then visit your web browser and hit the following URL into it:

http://localhost:4200

Conclusion

To Install bootstrap 5 in Angular 15/14; Through this tutorial, you have learned how to install and use bootstrap 5 in Angular 15/14 applications.

Related Tutorials