I'm trying to add the Bootstrap 5 dropdown in Angular 12 it's not working.
I have installed all the necessary packages, added them to the angular.json
file.
Copied the exact example from Bootstrap 5 docs still not working.
In angular.json
I have given
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Below is my HTML code (same as in Bootstrap 5 docs)
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-
bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
I used the command npm i
to install the packages without mentioning any version name so I guess the latest version was installed. Installed jQuery as the last resort read somewhere Bootstrap 5 doesn`t require jQuery. Any help is greatly appreciated.