Add Bootstrap in Angular 11

Hello to all, welcome to therichpost.com. 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": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [...
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

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>
</div>

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

Jassa

Thank you.