I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working.
Here is the code:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525504b574b57">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href='https://css.gg/add.css' rel='stylesheet'>
<link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="/static/img/AdiAvi.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/static/js/dashboard.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/dashboard.css">
<link rel="stylesheet" href="/static/css/base.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279657965">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avyukt's Dashboard</title>
<style>
.trigger {
display: none !important;
}
#loginButton {
display: none !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(0, 0, 0);">
<a class="navbar-brand" href="/">
<img class="ms-3" src="/static/img/AdiAvi.png" width="30" height="30" class="d-inline-block align-top" alt="">
AdiAvi
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-start align-items-lg-center">
<li class="nav-item">
<a class="nav-link active" class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/static/profilePictures/A.png" width="50" height="50" class="rounded-circle mt-8">
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/dashboard">Dashboard</a>
<a class="dropdown-item" href="/account">Edit Profile</a>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>Any idea how to solve this issue? I'm using Bootstrap 5 and believe I have the latest bundle versions.
Screenshot: https://ibb.co/pQPVdx2
I can't even click on the dropdown menu.