I'm currently working on a web application using Angular 17 and Bootstrap 5.3, but I've encountered some issues with certain Bootstrap features. Despite following the documentation available at https://getbootstrap.com/docs/4.1/components/navbar/, I can't seem to get the dropdown menu to work, even after trying multiple solutions. Additionally, the right alignment in the navbar isn't functioning as expected. It's frustrating because all other CSS elements are working perfectly fine. Here's an excerpt from my nav.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
After installing Bootstrap, Popper, and jQuery files using npm install --save, I added them to angular.json without success. Apart from the dropdown and alignment issues, only the remaining CSS styles were applied. I then attempted adding these dependencies directly into index.html, but that also didn't resolve the problem.
In my desperation, I resorted to including external links in my index.html file, which surprisingly worked. Here's how it looked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Intro</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- BootStrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
However, I'm aware that this method isn't ideal and I'm puzzled as to why it only works this way.