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
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.
✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also
✋ Want to master Angular 14? Read our angular tutorial and join our
#DailyAngularChallengewhere we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.
✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.
Find a list of emojis to copy and paste
Related postsHow to send authorization header in Angular 14 Angular 14 Tutorial By Example: REST API & HttpClient GET Angular 14 route title and custom strategy Angular 14 inject example: reactive decorator Angular 14 inject How to enable CORS in Angular 14 Angular v14 tutorial Add Tailwind CSS to Angular 14 apps Import standalone components in Angular 14 Generate standalone components in Angular 14 Add Bootstrap to Angular 14 example Upgrade to Angular 14 Angular 14 standalone component Angular CLI 14 Render HTML with Angular and innerHtml
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!