Creating a Bootstrap dropdown: step-by-step guide

I encountered an issue while creating a dropdown in the 'Menubar' using Bootstrap 5.1 in my 'ASP.NET Core 6 MVC' project. The dropdown is implemented as a partial view and the code snippet I used is:

<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>

However, when I click on the link, the dropdown does not toggle properly. I would greatly appreciate it if someone could help me identify the problem. You can watch the reference video here.

htmlcssasp.net-corefrontendbootstrap-5

Answer №1

It seems the previous answers are incorrect. After reviewing your video, it appears that the issue lies in using Bootstrap-4 instead of Bootstrap-5 in your code.

I have tested your code with a Bootstrap-4 starter template, and now it is functioning correctly.

<!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.0/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/bootstrap@4.6.0/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.0/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/bootstrap@4.6.0/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.0/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Explore the Bootstrap-4 starter template here.

If you are certain that your ASP.NET Core MVC application requires Bootstrap version 5.1, the current code will not function properly.

Answer №2

Oops! Found a typo:

Before

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

After

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

An Important Update!

Not only was there a typo, but as pointed out by @seantsang94121, the issue also lies in using this code with Bootstrap 5 instead of Bootstrap 4, as demonstrated in his helpful answer -> Answer

Answer №3

you must have the following:

<head>
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f415f43">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

refers to the spacing between elements

I currently have 4 nested divs. My goal is to ensure that the margins between each div are equal, maintaining the same distance from the left edge of the parent div to the first nested div, between each pair of nested div, and from the last nested div to t ...

htmlcss

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

Looking to design this chart using CSS and HTML?

Could someone please help me with resizing the circle border in this code? I am facing difficulties adjusting the size and would appreciate any assistance. By running the code snippet, you can see the issue I am encountering and how it differs from the pro ...

htmlcsscss-shapes

What is the code to position the brand name to the right of a logo in HTML?

As I work on building my webpage, I am facing an issue where I want the brand name to appear directly next to the logo, on the right side. I have attempted to use the float-left property without success. I've included both the HTML and CSS code here. ...

htmlcssbootstrap-5

Incorporate an MP3 audio track into an image

Greetings, I have an image and I am interested in embedding the associated MP3 file directly onto the image instead of having it displayed separately below. Is this achievable? Thank you Best regards, Gary <!doctype html> <html> <head&g ...

htmlmp3embedaudio

Execute a command via a hyperlink

I have a script that displays information in a div using a button. I am trying to modify it so that it works from a link instead, but I haven't had any success yet. Any ideas on how to make this work? <script> function showCustomer(str) { va ...

javascriptphphtmlajax

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

I currently have a block of HTML code that is repeated multiple times. <!-- Metropolitan Map --> <div> <app-map [name] = "(( environment.metropole_name ))" [layer_url] = "(( environment.metropole_layer_url ))" ...

htmlangularngfor

Is there a way for me to stack the submenu links on top of each other?

Is there a way to rearrange the submenu links so they appear stacked vertically instead of horizontally? Currently, they line up next to each other under the main menu and subsequent links fall below the submenu. I believe it involves adjusting the positio ...

cssmenu

Tips for adjusting page content responsively when toggling the sidebar

I am in the process of designing a website that includes a left sidebar and Bootstrap 4 fixed size cards in the main content area. However, when the viewport size is toggled from >768px to smaller sizes, the page content does not respond as expected, r ...

htmlcssbootstrap-4

Styling containers with Pandoc

Currently, I am utilizing Pandoc for the purpose of transforming Pandoc Markdown documents into HTML5 documents. Within my md input, I incorporate custom divs by employing a special Pandoc syntax, like so: ::: Resources A nice document Informative website ...

htmlmarkdownpandoc

Sample code for table_class_list and table_row_class_list is provided below:

I am excited to start using the newest version of the TinyMCE plugin, with its enhanced features. I experimented with the URL to understand how the table plugin functions. In the example provided, I noticed two classes named Dog and Cat, each associated ...

csstinymce-4

Tips for integrating '.jar' files into React Native for Android operating systems

My English skills are not great. I work as a FRONT-END developer. Currently, we require an App that can connect to a Bluetooth Printer on Android using React-Native for development. The SDK file provided by the Printer's manufacturer has a 'ja ...

javascriptjavaandroidreact-nativefrontend

What is the best method to update the content of one div with content from another page using AJAX?

Having trouble achieving smoother page loads? My goal is to utilize AJAX to specifically fetch a certain div from another page and then swap out the content of a div on this current page with the response. Below is my JavaScript script that uses AJAX to r ...

javascripthtmljqueryajax

Enhance the spacing between the UL-LI navigation menu and the currently selected item

I'm struggling with adjusting the spacing between items in my navigation menu, specifically the li elements that are currently too close together. I've attempted to increase the margin-left within the .main_menu li CSS rule, but it doesn't s ...

htmlcss

Feeling puzzled by the concept of CSS Block Formatting Contexts (BFCs)

In the World Wide Web Consortium (W3C), the concept of Block Formatting Context (BFC) is explained as follows: Within a block formatting context, boxes are arranged one after another in a vertical manner, starting at the top of a containing block. The dist ...

cssblock

What steps can I take to prevent divs from changing when hovered over individually?

Firstly, I am open to any superior suggestions that could save me some time and effort. My goal is to create a vertically oriented circular/elliptical carousel. Despite my extensive searching on Google for days, I have not come across anything similar, wh ...

jqueryhtmlcsscarouselcss-transforms

Rotate the text 180 degrees on hover using either jquery or css

One of our clients is requesting a flip effect on the menu items of their website. When hovered over, the items should flip upside down on the horizontal axis and then return to their original position. An example similar to what they're looking for c ...

jquerycsstextflip

Automated JQuery image carousel

I am currently working on a basic jQuery image slider that is set to slide automatically on a timer. My goal is to make it loop seamlessly, but it seems to be getting stuck after reaching the last slide. As I am relatively new to jQuery, I might be overloo ...

jqueryhtmlcss

items flexing to fill the width on larger displays

After completing my first web page using flexbox, I encountered an issue with the layout when viewed on a larger screen resolution (1894x787). The content appears stretched and distorted. Here are the screenshots for comparison: At 1326x768 https://i.sst ...

htmlcssflexbox