How to Install Bootstrap 5 in Angular 13

To install and use bootstrap 5 in angular 13 apps; Through this tutorial, i am going to show you how to install and use bootstrap 5 in angular 13 applications.

How to Install Bootstrap 5 in Angular 13

Use the below given steps to install and use bootstrap 5 in angular 13 applications:

  • Step 1 – Create Angular 13 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 13 App

First of all, you need to open your command prompt and execute the following command to install angular 13 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 13 application. Then execute the following command to install bootstrap 5 into angular 13 app; as follows:

npm install bootstrap
npm i @popperjs/core

Step 3 – Configure Bootstrap 5 into Angular App

Then navigate to your angular 13 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 13 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 13!!</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 13; Through this tutorial, you have learned how to install and use bootstrap 5 in angular 13 applications.

Be First to Comment

Leave a Reply

Your email address will not be published.