Sarah
25 Jul 2022
•
1 min read
In this example, I will demonstrate how to integrate bootstrap with Angular 14.
This article will guide you through installing Bootstrap 5 with Angular 14. You will become familiar with the installation of Bootstrap in Angular 14.
Note: Installing Bootstrap 5 while using Angular 14 is an easy thing to grasp.
As is common knowledge, Bootstrap is the most widely used framework in the world for the development of responsive and mobile-first websites.
Bootstrap has a number of different classes that may be used to create responsive websites for mobile devices. If you want to utilize Bootstrap with Angular 14, then we will assist you in the most straightforward way possible.
Once you have created your project with the latest version, go back to your command line interface and run the following command from the project's root directory:
$ npm install bootstrap
Then, you need to add Bootstrap CSS and JavaScript files to your project.
There are various methods to add Bootstrap to Angular.
One option is to include bootstrap files via the angular.json
file. Open the configuration file that exists at the root of the project and add these lines:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
]
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
You can also read this detailed tutorial on how to add bootstrap to Angular 14.
You can now use bootstrap classes to style your application shell that exists in the
src/app/app.component.html
file.
Open the src/app/app.component.html
file and update it as follows:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<h1>Angular 14 example</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=# navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div>
<router-outlet></router-outlet>
</div>
We simply added a navigation bar that will be rendered in every page of the application since Angular will render components from the router configuration inside the router outlet.
Sarah
My journey on becoming a developer and technical writer. I code & write tutorials 👩💻
See other articles by Sarah
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!