Add Bootstrap to Angular 14 example

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

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.

Styling the shell

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.

• Date: 07 Jun 2022