Bootstrap 5.0.1 and Angular 12

[hugoebarboza]

Is there guidance to install bootstrap with Angular 12 ?

Recently, I upgrade my Angular project to Bootstrap 5 but all bootstrap functionality crashed.

[khaledmndev]

i'm not sure about it, but i use react and i used:

import "bootstrap/dist/css/bootstrap.css"; & import "bootstrap/dist/js/bootstrap";

i haven't used angular before, but yea try this maybe!
Kindly let me know if this worked or not!

[aljoshakoecher]

@khaledmndev Thank's a lot 👍 . Your comment along with this StackOverflow post brought me in the right direction.
Some of my app's functionalities were broken because I was importing some Bootstrap components (e.g. Popover) like so:

import {Popover} from "bootstrap";

Programmatically instantiating Components via new Popover(someDomElement) broke other Bootstrap components (e.g. Dropdowns). Just changing the import to import Popover from "bootstrap/js/dist/popover" fixes all the problems.

[ascensus-mdb]

Have a look at this nice integration of Bootstrap 5 & Angular

https://mdbootstrap.com/docs/b5/angular/

[hugoebarboza]

Thanks @ascensus-mdb, I need help with Bootstrap V5.0.1 https://getbootstrap.com/

[aljoshakoecher]

Hey @hugoebarboza, checkout my answer to @khaledmndev's comment above. I also had trouble with some Bootstrap components that broke when I instantiated other componets programmatically inside my component.ts.

If that doesn't help you: Try to describe your problem a bit more in detail.

[hugoebarboza]

Hi @aljoshakoecher thanks for your help...I gonna check the comment above and let you know.

[hugoebarboza]

Hi @aljoshakoecher I checked your answer to @khaledmndev, it refers to Bootstrap 4.6, but I'm working with bootstrap 5.0.x and Angular 12. Besides, I did not import popper in my .ts components. I import all necessary bootstrap elements in my angular.json and everything works well until Bootstrap 5.0.x
If you have any other suggestions, please let me know.
Thanks a lot for your help.

[aljoshakoecher]

As I said before: Its impossible to help you without a more detailed problem description. What exactly stopped working? I'm guessing CSS still works fine? If it's a problem with Bootstrap JS: All components? You should give us some details if you want us to help you.