0

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'ss also 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

Improve this question
0

3 Answers 3

Reset to default
1

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/[email protected]/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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You have a typo here:

Before

<a class="dropdown-item">>Categories</a>

After

<a class="dropdown-item">Categories</a>

Update

Adding to the typo you had, like @seantsang94121 said the other problem here is that you are using this code in bootstrap 5 and it only works in bootstrap 4 as his example shown on his answer -> Answer

Improve this answer

Comments

0

you need those:

<head>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </head>
Improve this answer

1 Comment

Bootstrap 5 is already integrated with ASP.NET Core 6 MVC projects.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.