Angular 12 tutorial in Hindi #23 how to use Bootstrap with angular

In this angular 12 version video, we learn how to make toggle element and show hide HTML tags in angular 13. This video is made by anil Sidhu in the Hindi language.

What is Bootstrap
How to install Bootstrap
Check Changes after install bootstrap
Add example of bootstrap
Interview Question
Angular 13

[asfandyar_ali]

Thank you Anil for such a fantastic teaching. I started angular series and reached to this point. I must say, this series is perfect for beginners.

[sanatanShishya]

Those who is facing issue of not bootstrap, ..
just after running adding bootstrap command, again restart "ng serve" in your terminal
it will work !.

[arjaulhoque]

Nahi ho raha hai 13version main kuch solution batao

[kirtisambhavrastogi]

Boss
1. ng add @ng.bootstrsp/ng.bootstrap
By yr video of bootstrap

2 ng add @ng-bootstrap/ng-bootstrap
By website
1. Is not working giving errors
2 is installed completely
IS THRER ANY DIFFERENCE IN BOTH COMMANDS
PLS RE PLY
Thanks and best regards

[PiyushYadav-efln]

not able to fnd code for this video on github

[VishalRaj-wvjz]

Hi sir i am using Angular16 version, when i am trying to install bootstrap in my project then it not working.Please help me.❤❤

[thehumblecoder]

tried everything but still its not working

[rishisharma]

hello brother
bootstrap not installing my angular page and error show

[nandaniverma]

bootstrap download krne m error aa rha h can you help me

[arjaulhoque]

Bro version 13 mein bootstrap error araha hai

[KhanRehan-xkot]

Sir Bootstrap install nhi ho rha h err massage aarhi hai

[saqlainzepto]

folder\x5cprojectPS C:\Users\Saqlain\Desktop\New folder\project> can i fix that error

[harshkr]

First way: Install bootstrap in your angular 12 app like below. This is only for css importing.

npm install bootstrap --save

Now you need to import bootstrap css in style.css file like this:

@import

Second way: Install bootstrap with jquery and popper js like below and thus you can import bootstrap css and bootstrap js function.

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

After successfully run the above commands import it in angular.json file like this:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",

]

Now you can easily use bootstrap class, css, js as expected :)

[anjalisingh]

i installed bootstrap using this command- ng add @ng-bootstrap/ng-bootstrap - but it didn't work for me. plz jelp what to do

[shehwarasif]

Error solution:
npm install @ng-bootstrap/ng-bootstrap --force

[vishalchander]

Anil, I am still getting this Error.

Microsoft Windows [Version 10.0.19043.1052]
(c) Microsoft Corporation. All rights reserved.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! @angular/common@"~12.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!

D:\tp_angular\frontend>

[laughitout]

Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! @angular/compiler@"~12.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[vishalchander]

my Cli versions are this :-

Angular CLI: 12.0.5
Node: 14.17.0
Package Manager: npm 7.17.0
OS: win32 x64

Angular: 12.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1200.5
@angular-devkit/build-angular 12.0.5
@angular-devkit/core 12.0.5
@angular-devkit/schematics 12.0.5
@schematics/angular 12.0.5
rxjs 6.6.7
typescript 4.2.4