I recently installed Bootstrap 5 and jQuery 3.6 on my website, but I'm encountering an issue where the dropdown button is not functioning properly when I try to embed them. Could there be

I have this code: I recently downloaded Bootstrap 5 and JQuery 3.6, but I am facing an issue where the dropdown button is not working when I embed them in my project. Can you take a look at my code to see if anything is missing?

<head>
    <title>
        Restaurant
    </title>

    <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">


</head>

<body>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
            data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>


    <script type="text/javascript" src="./bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    
</body>"

Answer №1

It is essential to ensure that you import jquery, popper before importing bootstrap. Below is an example of the correct order:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- css --> 
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3e243c243a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

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

Issue: Map container not located when implementing a leaflet map with Angular

Here is the complete error message: core.js:6479 ERROR Error: Map container not found. at NewClass._initContainer (leaflet-src.js:4066) at NewClass.initialize (leaflet-src.js:3099) at new NewClass (leaflet-src.js:296) at Object.createMap [a ...

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

Issues arise when attempting to implement a basic quiz using jQuery or JavaScript

I’ve created a quick quiz to determine how many correct answers a person gets when they click the 'submit' button. However, it keeps showing zero as the result. Can someone please assist me? $(document).ready(function(){ $('button' ...

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

The order of event handlers in jQuery

I am currently setting up event binding for a text element dynamically. Take a look at the following code snippet: <input type="text" id="myTxt" /> <script type="text/javascript"> function attachEvent1(element){ element.keyup(func ...

The table is not visible when using Bootstrap Vue

Can anyone help me with displaying a table of flowers? I am having trouble making it show up on my page. Not quite sure how to use my data to get the flowers to display properly. Any guidance or advice would be greatly appreciated. <b-table> ...

When conditions are met, all items are added to the array

In my Angular app, I have a user list that I am trying to filter based on the condition age > 45. However, all users are being pushed into the validForScheme array instead of just those meeting the condition. I am unable to figure out what is going wron ...

Using jQuery ajax and PHP to add information to a MySQL database

I've been puzzling over how to use jQuery's ajax() function to post form data from a textarea to a mysql database. The problem is, I'm struggling to grasp the underlying concept. Imagine there's a form: <form method="post" action=" ...

Jquery cloning problem: Original element vanishes unexpectedly in certain cases

My code clones an element and inserts it in the right place, but sometimes the original disappears. Can you help me figure out what's wrong? The main purpose of this script is to show a specific element at the top of the page whenever there is a hash ...

How can you use JQuery to assign a single function as an onClick handler for multiple radio buttons?

I have a custom function named handleOnClickRadio(i, j);, and multiple radio buttons with the IDs in the format of id="something-radio[i][j]". These radio buttons are all contained within a table labeled "bigtable". Is there a way to link the function han ...

The function of the Angular ng-include form action for posting a URL appears to be malfunctioning

When a form post is included in a parent HTML using ng-include, it does not trigger the submission action. <div ng-include src="'form.html'"></div> The code in the form.html file is as follows: <form action="next/login" method = ...

Is there a way to incorporate a custom method into a JQuery tab widget?

Need assistance with extending the functionality of the jQuery UI tabs widget by implementing a new method for all instances. Attempted using both $.extend() and jQuery.widget(), but encountered an issue where the newly added method remains undefined when ...

How can I display the console log output from JavaScript on an HTML webpage?

If I have a JavaScript function that logs its output in the console using console.log(), is there a way to then export that result into the HTML console? Appreciate any advice on this. ...

triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including ::selection{color: white; background: #2f3f58;}, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a ...

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

The #skrollr-body element causes all mobile content to disappear

Currently, I am utilizing Skrollr.js for parallax effects and you can find it here: https://github.com/Prinzhorn/skrollr. At the beginning of development, I made sure to test this on mobile to ensure it functioned properly. Initially, everything was workin ...

Navigating through various resources in AJAX content

I'm currently exploring possible solutions for resolving relatively referenced resources in dynamically loaded content. For instance, let's say I have this page downloaded from /index.html: <html><body> <div id="insert-here" /> ...

Tips for aligning divs in Zurb Foundation 3 framework

My design conundrum involves a 12 column row and trying to make a series of four div blocks stay in a row without stacking as the browser size decreases. Currently, the divs start to stack when the browser gets smaller. I have 4 divs that should be displa ...