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.
