I am facing an issue with implementing the Bootstrap dropdown in my HTML file. Despite adding the necessary code, the dropdown is not visible on the webpage.
Below is the snippet of the HTML file:
<div class="tools text-muted d-flex justify-content-around mr-4">
<div class="pr-3 border-right">Filter</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<fa-icon class="pr-3" [icon]="faChevronDown"></fa-icon>
</div>
<button type="button" class="btn btn-warning">Register</button>
</div>
In addition to the code above, I have included Bootstrap in the angular.json styles array as follows:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/js/custom.js"
]
Despite following these steps, the dropdown menu remains invisible. While the button appears correctly, the dropdown menu fails to display.