Add Bootstrap to Angular 14 example
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.
Add Bootstrap to Angular 14 apps
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
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.
Styling the shell
You can now use bootstrap classes to style your application shell that exists in 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.
My journey on becoming a developer and technical writer. I code & write tutorials 👩💻See other articles by Sarah