We're planting a tree for every job application! Click here to learn more

Add Bootstrap to Angular 14 example

Sarah

25 Jul 2022

1 min read

Add Bootstrap to Angular 14 example
  • TypeScript

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.

Did you like this article?

Sarah

My journey on becoming a developer and technical writer. I code & write tutorials 👩‍💻

See other articles by Sarah

Related jobs

See all

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
hello@works-hub.com

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2024 WorksHub

Privacy PolicyDeveloped by WorksHub