Thursday, July 11, 2024
Angular 11Bootstrap 4Bootstrap 4.5

Add Bootstrap in Angular 11

Add Bootstrap in Angular 11

Hello to all, welcome to In this post, I will tell you, How to Add Bootstrap in Angular 11?

Guys click here and can check add Bootstrap 5 in Angular 11.

Also please check this : Add Bootstrap 5 in Angular 12

Angular 11 came and if you are new in angular then please check below two links for better understanding:

Angular 11Tutorials

Here is the code snippet and follow carefully:

1. Here are the basics commands to install angular 11 on your system:

npm install -g @angular/cli 

ng new angularboot //Create new Angular Project

cd angularboot // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set bootstrap environment into your angular 11 application:

npm install --save bootstrap

3. Now you need to add below code into your angular.json file:

"styles": [
"scripts": [...

4. Now you need to add below code into src/app/app.component.html file:

<div class="container mt-5 mb-5">
<h1>Bootstrap is working fine with Angular 11!!</h1>

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.


Thank you.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.