Issue
I was creating a dropdown at Menubar. I am using Bootstrap 5.1 to do that. This is an ASP.NET Core 6 MVC project. It is a partial view. The exact code is as following:
<li class="nav-item dropdown show">
<a class="dropdown-toggle nav-link text-dark" href="#" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item">Categories</a>
<a class="dropdown-item">Media Types</a>
</div>
</li>
But whenever I click on this link the dropdown doesn't toggle. If someone can point out the problem that would be very helpful. The reference video is attached here
Solution
The above answer are all wrong. I have watched your video, and the reason behine is your code is using bootstrap-4, instead of bootstrap-5.
I have tested your code with bootstrap-4 starter template, and now it works.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<li class="nav-item dropdown show">
<a class="dropdown-toggle nav-link text-dark" href="#" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item">Categories</a>
<a class="dropdown-item">Media Types</a>
</div>
</li>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->
</body>
</html>
Check the starter template by here.
If you sure your whole ASP.NET Core MVC Bootstrap's version is 5.1, your code won't work.
Answered By - seantsang
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.