Troubleshooting my unresponsive bootstrap drop down

I recently tried to implement a Bootstrap 4 drop-down list using code from w3schools.com in my visual studio code, but unfortunately, it's not functioning as expected. Surprisingly, the same code works perfectly fine in an online editor. I'm new to this, so I'm wondering if I've missed something crucial. Any guidance would be greatly appreciated! Here is the code snippet I used:

 `<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../Bootstrap4/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="../Bootstrap4/css/bootstrap.min.css">
  <link rel="stylesheet" href="../Bootstrap4/css/flexboxgrid.min.css">

</head>
<body>

<div class="container-fluid">
    <div class="row justify-content-center" style="background-color:#00061a;">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>


        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </li>  
    </ul>
    </div> 

</div; <!-- End of container -->

<script src="../Bootstrap4/js/jquery-3.2.1.min.js"></script>
<script src="../Bootstrap4/js/bootstrap.min.js"></script>

</body>
</html>` 

Answer №1

When working with bootstrap 4,

it is necessary to include the

id="dropdownMenuButton" on your a/button tag

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" 
    id="dropdownMenuButton"  href="#">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
    </div>
</li>  

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

Requesting a rendezvous with PHP

When it comes to asking for a date in an HTML form, I used to utilize various methods: Utilizing 3 separate fields for day, month, and year Using a text field with additional labeling like "Start date (example: 31-12-2013)" Employing a reverse date ...

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

Can a div section be defined and then filled with data in the same document?

Is it possible to initially declare a div section and later populate it with content in the same document? The following dummy code snippet illustrates the query... <div name="xyz" style="..."> <!-- Empty --> </div> < ... INTO "x ...

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

Aligning the page content in perfect harmony with the footer

I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Ad ...

Simple ways to increase the scalability of the jQuery .click function

I'm struggling to make this work properly. I have multiple anchor tags on a page that use scrollTop for their animation. Here's an example of the HTML: link <a id="TOS" href="#Svc">What are your terms of service?</a> and the target ...

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

Combining Jquery scripts for seamless integration

I am facing an issue while trying to execute two different jQuery scripts simultaneously - one named balancedgallery and the other museum. Individually, each script works perfectly fine. However, when running them together, the balancedgallery script seems ...

Issue with the Mat paginator items per page functionality not functioning properly in Angular 9

I have encountered an issue where changing the items displayed per page on a table I'm rendering from an observable is not functioning as expected. Despite trying methods such as ngAfterViewInit and calling page events, I did not see any changes. ...

Error in cloned selections with bootstrap-selectpicker showing one less item

When duplicating a bootstrap-select dropdown, the duplicate dropdown appears to be offsetting selections by 1. For example, if the second option is clicked, the first one is actually selected. Here is an illustration: If "New Castle" is clicked in the ...

Using v-model in Vue with jQuery integration

I wrote a jQuery code that is executed when the mounted hook runs mounted() { this.$progress.finish(); var geocoder = new google.maps.Geocoder(); var marker = null; var map = null; function initialize() { var $latitude = document.getEl ...

Steps for displaying the output of a post request in printing

I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

Loop through each HTML element and store it in a JavaScript array

I currently have a webpage with 3 select buttons named "Season". I am trying to figure out which buttons are selected and receive their values as an array on my webpage. Below is the code I am using: var season_array = $.each($(form).children("input.sele ...

Tips for implementing `overflow-x: hidden` on a `ValueContainer` when using `isMulti` in react-select V2

I'm currently grappling with finding a solution to have a react-select V2 component, configured as isMulti, hide selected values that exceed the width of the ValueContainer rather than breaking to a new line and expanding the component's height. ...

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image

https://i.sstatic.net/jp2VF.png I could really use some assistance! I've been working on Angular8 and I came across an image that shows how all the div elements are being selected when clicking on an image. Instead of just removing the border effect f ...

Chrome-specific bug in DataTable sorting with jQuery - looking for workaround to fix the issue

Here is my code snippet: jQuery.fn.dataTableExt.oSort['num-asc'] = function(a,b) { var x = a.replace( /<.*?>/g, "" ); var y = b.replace( /<.*?>/g, "" ); x = parseFloat( x ); y = parseFloat( y ); return ((x < y ...

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. https://i.sstatic.net/VNPDP.jpg For example, the first button appears normal and the second one turns blue after clicking. However, this background effec ...

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...