Bootstrap dropdown not working in angular application

Question

I have an angular application in which I want to use Bootstrap navbar with dropdown. All styles from bootstrap are working just fine but the scripts are not workink e.g. dropdown not toggeling or on resize the toggle menu button not working.

I have installed bootstrap, jquery and popper.js and included them in angular.json as follows:

"styles": [
   "./node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss"
],

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

I also tried importing scripts and css files directly into index.html but that also did not work.

I am copying HTML for dropdown navigation from getbootstrap.com

Any ideas why the dropdown isn't working?

Look at the console, any errors? – Carsten Løvbo Andersen Mar 16 '22 at 14:06 — Carsten Løvbo Andersen, Mar 16 '22 at 14:06
Nothing in devtools console, nothing in angular console. – vlcounj Mar 17 '22 at 07:12 — vlcounj, Mar 17 '22 at 07:12

score 0 · Answer 1 · answered Mar 17 '22 at 07:14

0

I have just downgraded version of bootstrap from ^5.1.3 to ^4.6.1 and it works. So I guess something changed in the latest version of bootstrap.

answered Mar 17 '22 at 07:14

vlcounj

1
2

Bootstrap dropdown not working in angular application

1 Answers1