Install Bootstrap 5 in Angular 14

Install bootstrap 5 in angular 14; Through this tutorial, you will learn how to install and use bootstrap 5 in angular 14 applications.

How to Install Bootstrap 5 in Angular 14

Use the following simple steps to install and use bootstrap 5 in angular 14 applications; as follows:

• Create Angular 14 App
• Install Bootstrap 5
• Configure Bootstrap 5 into Angular App
• Use Bootstrap 5 in Angular
• Run Angular App

Create New Angular 14 App

Open your command prompt and execute the following command to install angular 14 app into your system; as follows:

npm install -g @angular/cli 

ng new angularbootstrap//Create new Angular Project

cd angularbootstrap

Install Bootstrap 5

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

npm install bootstrap
npm i @popperjs/core

Configure Bootstrap 5 into Angular App

And navigate to your angular 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"
           ]

Use Bootstrap 5 in Angular

Navigate src/app/ directory and open app.component.html file from your angular 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 14!!</h1>
</div>

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 14; Through this tutorial, you have learned how to install and use bootstrap 5 in angular 14 applications.