Bootstrap 4 Dropdown Menu not working

Question

I copied the official Bootstrap 4 example for dropdown menus but it is not working  that is nothing is dropped down    lt li class  nav-item dropdown  gt       lt a class  nav-link dropdown-toggle  href     id  dropdown01  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt Dropdown lt  a gt       lt div class  dropdown-menu  aria-labelledby  dropdown01  gt       lt a class  dropdown-item  href     gt Action lt  a gt       lt a class  dropdown-item  href     gt Another action lt  a gt       lt a class  dropdown-item  href     gt Something else here lt  a gt     lt  div gt   lt  li gt

User · Accepted Answer

Edit  In case anyone else is having this problem  I believe the solution for OP was that he had not imported popper js  Check that jQuery and all the relevant Bootstrap components are there  Also check the console and make sure there are no errors   x000D   x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt  -- Required meta tags -- gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt      lt  -- Bootstrap CSS -- gt     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta css bootstrap min css  integrity  sha384- Y6pD6FV Vv2HJnA6t vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M  crossorigin  anonymous  gt   lt  head gt   lt body gt     lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt       lt a class  navbar-brand  href     gt Navbar lt  a gt         lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt         lt span class  navbar-toggler-icon  gt  lt  span gt       lt  button gt       lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt         lt ul class  navbar-nav  gt           lt li class  nav-item active  gt             lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt           lt  li gt           lt li class  nav-item  gt             lt a class  nav-link  href     gt Features lt  a gt           lt  li gt           lt li class  nav-item  gt             lt a class  nav-link  href     gt Pricing lt  a gt           lt  li gt           lt li class  nav-item dropdown  gt             lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt          Dropdown link          lt  a gt           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt             lt a class  dropdown-item  href     gt Action lt  a gt             lt a class  dropdown-item  href     gt Another action lt  a gt             lt a class  dropdown-item  href     gt Something else here lt  a gt           lt  div gt           lt  li gt         lt  ul gt       lt  div gt     lt  nav gt      lt  -- Optional JavaScript -- gt     lt  -- jQuery first  then Popper js  then Bootstrap JS -- gt     lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 11 0 umd popper min js  integrity  sha384-b U6ypiBEHpOf 4 1nzFpr53nxSS GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4  crossorigin  anonymous  gt  lt  script gt   lt -- Always remember to call the above files first before calling the bootstrap min js file -- gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta js bootstrap min js  integrity  sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1  crossorigin  anonymous  gt  lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Make sure to include the Bootstrap CSS either via the Bootstrap CDN  or download it and link it locally

User · Answer

Add this code to  your jquery         dropdown   click function                dropdown-menu   toggleClass  show

User · Answer

Assuming Bootstrap and Popper libraries were installed using Nuget package manager  for a web application using Visual Studio  in the Master page file  Site Master   right below where body tag begins  include the reference to popper min js by typing    lt script src  Scripts umd popper min js  gt  lt  script gt    Here is an image to better display the location     Notice the reference of the popper library to be added should be the one inside umd folder and not the one outside on Scripts folder    This should fix the problem

User · Answer

Via JavaScript Call the dropdowns via JavaScript   Paste this is code after bootstrap min js      dropdown-toggle   dropdown     Also  make sure you include popper min js before bootstrap min js  Dropdowns are positioned thanks to Popper js  except when they are contained in a navbar

User · Answer

include them with this order this will work i dont know why  D   lt  -- jQuery -- gt   lt script src  js jquery-3 4 1 min js  gt  lt  script gt    lt  -- Popper -- gt   lt script src  js popper min js  gt  lt  script gt    lt  -- Bootstrap js -- gt   lt script src  js bootstrap min js  gt  lt  script gt

User · Answer

A simple answer is to replace this line    lt script type  text javascript  src  your directory bootstrap min js  gt  lt  script gt    for this other    lt script type  text javascript  src  your directory bootstrap bundle min js  gt  lt  script gt

User · Answer

It s an issue with popper js file  What I found at the official site was that bundle files include popper in itself but not jquery  I managed to fix it by adding link to these files   bootstrap bundle js bootstrap bundle min js  I removed popper js however since it comes within the bundle file

User · Answer

try to add these lines at the end of the file   lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  integrity  sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q  crossorigin  anonymous  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  integrity  sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl  crossorigin  anonymous  gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

This is my solution I just downloaded jquery s latest version from their official website and then added it as a js file in my project folder and then to my HTML file  After that it was working fine for me

User · Answer

I used NuGet to install BootStrap 4   I was also having issues with it not displaying the Dropdown on click   It kept throwing an error in jquery base on what the Chrome console was telling me   I originally had the following   lt  -- CSS --  gt   lt link type  text css  rel  stylesheet  href   Content bootstrap css    gt     lt  -- JS --  gt   lt script type  text javascript  src   Scripts jquery-3 3 1 min js  gt  lt  script gt   lt script type  text javascript  src   Scripts bootstrap min js  gt  lt  script gt    But I changed it to use the bundled version instead and it started to work   lt  -- CSS --  gt   lt link type  text css  rel  stylesheet  href   Content bootstrap css    gt    lt  -- JS --  gt   lt script type  text javascript  src   Scripts jquery-3 3 1 min js  gt  lt  script gt   lt script type  text javascript  src   Scripts bootstrap bundle min js  gt  lt  script gt

User · Answer

You need to enqueue the script bootstrap js or bootstrap min js  I had the same problem with bootstrap 4 5 3 and the menu worked when I enqueued one of the above scripts  It can be either

User · Answer

It needs to be  bootstrap js  not  bootstrap min js

[javascript] Bootstrap 4 Dropdown Menu not working?

Examples related to javascript

Examples related to css

Examples related to html

Examples related to bootstrap-4