Encountering a TypeError while trying to implement a dropdown button feature in Bootstrap 5

I'm attempting to implement a Dropdown button using Bootstrap 5, but encountering an error:

Uncaught TypeError: t.createPopper is not a function

Here is the HTML code I am using:

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <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>

Below are the script files being used:

<script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you're in need of an offline library that includes Popper, consider using either bootstrap.bundle.min.js or bootstrap.bundle.js. Example:

<script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>

Using this method resolved my issue. Hopefully it will be useful to someone else.

Answer №2

Your code seems to be functioning correctly, but it's possible that either Bootstrap or the Popper Library is not fully installed. Consider using a CDN instead of the offline library for better performance.

Check out the official Bootstrap documentation.

<html>
   <head>
      <!--official Bootstrap CDN-->
         <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f120f110c404d51494010">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

   </head>
   <body>
      <div class="dropdown">
         <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
         Dropdown link
         </a>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <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 src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607d607e632f223e262f7f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </body>
</html>

Answer №3

The issue lies in the popper version update. It's unclear what changes were made, but the recent version of popper causes the dropdown feature to malfunction.

To resolve this, I reverted back to using version 1.14.3, which fixed the problem. You can view the working example in this fiddle: https://jsfiddle.net/e5n1astx/

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

Above is the code snippet I used to make it work and the link to the popper version that resolved the issue: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

Answer №4

To ensure proper functionality, you must include the popper.js library in your code. You can do so by visiting this link: . Once added, everything should work as expected.

<script src="https://unpkg.com/@popperjs/core@2"></script>

Answer №5

this was a lifesaver:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebeb5b2b5b3a0b1e7bda7bdb2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7002030308090e085b6c0a17060b06044405015645130704000203045966414856">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69abaaaaaba4a5a3b0a1fdfaa5bfbbafb492a38cb78c82">[email protected]</a>/font/bootstrap-icons.css">
<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu">
  <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>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<lackscript src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1123131e081f261e0d301641510e00141a03101409470a0614">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<lackscript src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32d0ddddd6d1d6d097968785ac848ebef9c3cd90bebe">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>   
<lackscriptsrc="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35676868636463447e6166686f67686825614960686d238e8280">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<lackscriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<lackscript src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

Transfer data from TWO input fields within a PHP document to another PHP document using only one submission button

Is it possible to have two textboxes and submit the values entered in them to another PHP file using a single submit button? Transferring value from page1.php to page2.php Currently, I am able to pass a value from one text box: <form action='pag ...

phphtmltextboxsubmit

How can I rearrange the button order in a Bootstrap table?

I'm having trouble getting this attribute to work in the table tag data-buttons-order=['paginationSwitch','refresh','toggle','fullscreen','column'] ...

jquerycsstwitter-bootstrap

Revise the data model by using option IDs instead of option values in the selection dropdown

Just getting started with angular js and facing an issue. I have a json value that will determine the content of my html. Specifically, I need to populate a select dropdown with two options and have one automatically selected based on the flag provided in ...

htmlangularjsangular-ngmodel

How can I trigger a function in code.gs to execute a script in an html file when a dialog is opened?

Within my Index.html file, I have a script tag that allows me to execute the code below when I launch the Modal Dialog on Google Sheets using google.run. --Index.html-- <script> function onSuccess(info) { ...add options to select tags... } functio ...

htmlgoogle-apps-scriptweb-applications

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

htmlcss

Can JavaScript and CSS be used to dynamically style textarea content as it is being typed by the user?

I am wondering if it is possible to apply styling to content in a textarea as a user inputs text. For instance: <textarea>abcdefghijklmnopqrstuvwxyz</textarea> Is there a way to highlight all the vowels in the textarea string above using jav ...

javascriptjqueryhtmlcssforms

The action of JQuery is modifying the value of the checkbox, but it is not visually showing as checked

I am working on a list that contains checkboxes and text, similar to an email inbox. My goal is to be able to check or uncheck the checkbox anytime I click anywhere on the list item (row). To achieve this functionality, I have used the following code withi ...

javascriptjqueryhtmlcheckbox

Vue application experiencing issues with applying Sweet Alert CSS styles

I successfully integrated vue-sweetalert2 into my Vue app (version 2.6). The setup in my main.js file looks like this: import VueSweetalert2 from 'vue-sweetalert2'; Vue.use(VueSweetalert2); In one of my components, I have a basic button with a ...

cssvue.jssweetalert2

Unable to set the height of WebDataRocks as a percentage

I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...

csspivotwebdatarocks

I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

document.getElementById("buttonClick").addEventListener("click", mouseOverClick); function mouseOverClick(){ document.getElementById("buttonClick").style.color = "blue"; } $("#buttonClick").hover(function() { $(this).css('cursor',&apos ...

javascriptjqueryhtmlcss

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

javascripthtmlcssfunction

Is there a way to showcase the content of a text file in a sequential manner using Javascript/AJAX?

I am attempting to retrieve text data from a server file and exhibit it within a specific division on my website. Check out the AJAX/Javascript code I have been working with: <body onload="loadXMLDoc()"> <script> function loadX ...

javascripthtmlajax

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

Reveal the table only once a search has been completed

Currently, I am in the process of developing a small project and my aim is to have the table with the results appear only upon clicking the button or initiating a search. If you are interested, you can view it at this link: . My objective is to keep the t ...

phpjavascriptjqueryhtml

Ensure each alternate div has a unique background hue

While attempting to use CSS to assign a different background color to every second div element, I encountered an issue where both divs were affected when using (odd) and none when using (even). How can this be explained? .hoverDiv:nth-child(odd) { ba ...

htmlcss

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

Currently stuck in a tricky situation. I've implemented a custom form submission to prevent redirecting when an express route is triggered by form submission. However, the issue arises when I lose the data being sent without redirection. document.get ...

javascripthtmlexpressxmlhttprequest

What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends out ...

htmlcssbootstrap-4

Top Method for Incorporating Syntax Highlighting into Code Blocks - React Sanity Blog

I'm currently exploring the most effective method to incorporate syntax highlighting into my react sanity.io blog. Here's a look at the article component I've developed using react: import React, {useEffect, useState} from "react"; import ...

javascriptcssreactjssyntaxsanity

Having a bottom border only on input fields appears strange when viewed on a mobile device

When trying to achieve a bottom border on mobile, I encountered an unexpected issue where a strange line appeared instead in the browser. Here is an image of the problem: https://i.sstatic.net/PqEOF.jpg I expected to see a straight line as intended (it w ...

css