The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body tag. I've experimented with various solutions such as changing the CDN link or trying different types of dropdowns, but none of them have resolved the issue. I even searched through multiple StackOverflow threads related to my problem, but unfortunately, nothing has worked so far.

Below is a simplified version of the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc4dbc6">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body style="position: relative;">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e110e13">[email protected]</a>/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

</html>

Appreciate any help you can provide!

htmlcssbootstrap-5

Answer №1

Here are the steps you need to follow to make it work:

data-toggle has been updated to data-bs-toggle.

Additionally, ensure to include the popper.js dependency:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8f839e89acdec2d5c2de">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

You can also opt for the bootstrap version that includes popper by default from the link: https://getbootstrap.com/docs/5.0/getting-started/download/

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

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Is there a way to isolate elements within a div, similar to how it would behave in an iFrame? I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only use ...

javascripthtmlcssangularjssharepoint

Achieving successful content loading through AJAX using the .load function

Our website features a layout where product listings are displayed on the left side, with the selected product appearing on the right side (all on the same page). Initially, when the page loads, the first product is shown on the right. Upon clicking a new ...

javascriptphpjqueryhtmlajax

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

javascriptjqueryhtmlcss

What is the best way to smoothly hide and reveal a flex child element?

I am looking to create a flex container where the child element can smoothly animate to shrink and grow, while the remaining child elements expand to fill in the space. The method I have found involves setting the max-width to 0px and the borders' wi ...

htmlcss

Bizarre display of miscellaneous items on the monitor

Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just o ...

htmlcss

How to Prompt CSS Rule Evaluation to Ensure Proper Functionality (Solution)

When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...

css

"Creating a visually appealing form with the input element

When using ASP.Net, there is a tag known as CheckboxList that generates the following output: <table class="checkbox"> <tbody> <tr> <td> <input id="/*longdynamicstring1*/" type="checkbox" name="/*longdynamicstring2*/ ...

asp.netcss

mandating the selection of checkboxes

Currently, I am exploring the possibility of automatically selecting a checkbox when an option is chosen from a dropdown menu. Below is a code snippet that demonstrates what I am aiming to tweak: $('.stackoverflow').on('change', func ...

javascriptjqueryhtml

Demonstrating various elements within an application using Vue3

I created two components and attempted to display them in a Vue 3 application. Here is my HTML code: <div id="app"> <image_preview> URL: [[image]] </image_preview> <file_uploader> Counter:[[coun ...

javascripthtmlvue.jsvuejs3

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

I am aiming to use different fill colors and opacity values for various shapes (such as Triangle, Circle, Square, Hexagon, etc.). Although I can draw the shapes, set different titles, and stroke colors with the code below, I'm struggling to define th ...

javascripthtmlcssopenlayers

Sometimes I receive a notification that the session ID cannot be regenerated because the session is not active, without any apparent cause

Despite reading numerous posts on this problem, none have provided a solution for me! Some suggest that using session_regenerate_id(true); before session_start(); could be causing the issue. However, this is not applicable to my code. Others recommend remo ...

phphtmlsession

Can you explain the HTML semantic layout for having multiple titles matched with their respective lists?

In my directional segment, I have included details such as the address, phone number, email, and service date/time. I envision it looking like the example below: https://i.sstatic.net/5h4SM.jpg Currently, my code appears as follows: <div class="co ...

htmltitlesemantic-markup

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments

Clicking with jQuery to float left and then bringing back

I have written this JavaScript code that is supposed to float the address div to the center when you click on the info panel using the "addressmoved" class. Challenges However, when I click on the trigger button, instead of the address div moving to the ...

jqueryhtmlcssajaxonclick

Use jQuery to parse the JSON below and then showcase the information in an HTML table

Can anyone assist me with parsing the following JSON using jQuery and presenting it in an HTML table? I want to showcase the values of "key" and "doc_count" in an HTML table. Your help would be greatly appreciated. Please find the JSON data below: { ...

javascriptjqueryhtmljson

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

Adjust picture to fit in div and align vertically

JSFiddle In my fluid layout, I have a div with a required aspect ratio of 1:1. This div can contain text, an image, or both. The challenge is to vertically align the text and ensure the image fits within the div without exceeding its boundaries or losing ...

css

Adjusting a Form Input Field

There seems to be an issue with the text alignment in my submission form input field, as the text appears a few pixels too low. This is causing certain letters like y, q, and j to bleed below the box in Chrome and only partially show in IE 8. To fix this p ...

htmlcss

Looking to assign a variable to the value selected from a dropdown menu in PHP/HTML

As a beginner in php and html, I have been tasked with creating a drop down list along with other inputs to establish parameters for a perl script. The objective is for the selected option from the drop-down menu to set a variable equal to the user's ...

phphtmldrop-down-menu