Bootstrap dropdown not working

Question

I can t make bootstrap dropdown to work   Here is my html for nav    lt ul class  nav  gt     lt li class  active  gt Home lt  li gt     lt li class  dropdown  gt       lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Personal asset loans lt  a gt       lt ul class  dropdown-menu  role  menu  gt         lt li gt  lt a href     gt asds lt  a gt  lt  li gt         lt li class  divider  gt  lt  li gt       lt  ul gt     lt  li gt     lt li gt Payday loans lt  li gt     lt li gt About lt  li gt     lt li gt Contact lt  li gt   lt  ul gt    And here are the scripts    lt script type  text javascript  src  js bootstrap bootstrap-dropdown js  gt  lt  script gt   lt script gt         document  ready function                dropdown-toggle   dropdown            lt  script gt    What am I doing wrong  Thanks for your answers

User · Answer

you have to import this files into the  lt head gt  lt  head gt  of your html    lt script src  http   code jquery com jquery-1 11 0 min js  gt  lt  script gt   lt script src  http   code jquery com jquery-migrate-1 2 1 min js  gt  lt  script gt   lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css  gt   lt script src    maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap min js  gt  lt  script gt

User · Answer

For me  it was a CORS issue  I removed crossorigin  anonymous  from my script importing tags  and it started working again   BTW the latest script tags  in the correct order  can always be found here  https   getbootstrap com   Edit  Apparently adding defer to the script tag will also break all the Bootstrap goodies

User · Answer

Have you included  jquery js     Also  compare this line of code with yours    lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Personal asset loans lt b class  caret  gt  lt  b gt  lt  a gt    See this version that works ok    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8    gt       lt title gt Bootstrap dropdown lt  title gt       lt link href  css bootstrap css  rel  stylesheet  type  text css    gt    lt  head gt   lt body gt       lt div class  navbar  gt           lt div class  navbar-inner  gt               lt div class  container  gt                   lt ul class  nav  gt                       lt a class  brand  href     gt w3resource lt  a gt                       lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                       lt li gt  lt a href     gt Blog lt  a gt  lt  li gt                       lt li gt  lt a href     gt About lt  a gt  lt  li gt                       lt li gt  lt a href     gt Contact lt  a gt  lt  li gt                       lt li class  dropdown  id  accountmenu  gt                           lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Tutorials lt b class  caret  gt  lt  b gt  lt  a gt                           lt ul class  dropdown-menu  gt                               lt li gt  lt a href     gt PHP lt  a gt  lt  li gt                               lt li gt  lt a href     gt MySQL lt  a gt  lt  li gt                               lt li class  divider  gt  lt  li gt                               lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt                               lt li gt  lt a href     gt HTML5 lt  a gt  lt  li gt                           lt  ul gt                       lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  div gt       lt div class  container-fluid  gt        lt h1 gt Dropdown Example lt  h1 gt       lt  div gt       lt script type  text javascript  src  js jquery-latest js  gt  lt  script gt       lt script type  text javascript  src  js bootstrap js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                      dropdown-toggle   dropdown                    lt  script gt   lt  body gt   lt  html gt

User · Answer

I figured it out and the simplest way to do this ist just copy and past the CDN of bootstrap link that can be found in https   www bootstrapcdn com  and the Jquery CDN Scripts that can be found here https   code jquery com  and after you copy the links  the bootstrap links paste on the head of HTML and the Jquery Script paste in body of HTML like the example below         lt  DOCTYPE html gt       lt html gt         lt head gt            lt title gt Purrfect Match Landing Page lt  title gt           lt  -- Latest compiled and minified CSS -- gt           lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt           lt  -- lt link rel  stylesheet  href  griddemo css  gt            lt  -- Optional theme -- gt           lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  gt           lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet  gt          lt  head gt          lt body gt            lt  -- Latest compiled and minified JavaScript -- gt           lt script src  https   code jquery com jquery-3 1 1 js  gt  lt  script gt           lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt        lt  script gt             lt  body gt       lt  html gt    For me works perfect hope it works also for you

User · Answer

Copy paste the CSS link followed by the JS link from the bootstrap site here  Then the dropdown should work   My page looks like    lt html gt     lt head gt       lt meta charset  utf-8  gt       lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt       lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt       lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt       lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt        lt title gt Website Title lt  title gt     lt  head gt     lt body gt       lt div id  content    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   navbarSupportedContent  aria-controls  navbarSupportedContent  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  navbarSupportedContent  gt           lt ul class  navbar-nav mr-auto  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 Link lt  a gt             lt  li gt             lt li class  nav-item dropdown  gt               lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt                Dropdown              lt  a gt               lt div class  dropdown-menu  aria-labelledby  navbarDropdown  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 div class  dropdown-divider  gt  lt  div gt                 lt a class  dropdown-item  href     gt Something else here lt  a gt               lt  div gt             lt  li gt             lt li class  nav-item  gt               lt a class  nav-link disabled  href     gt Disabled lt  a gt             lt  li gt           lt  ul gt           lt form class  form-inline my-2 my-lg-0  gt             lt input class  form-control mr-sm-2  type  search  placeholder  Search  aria-label  Search  gt             lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt           lt  form gt         lt  div gt       lt  nav gt     lt  body gt   lt  html gt     Navbar from here

User · Answer

I had a similar issue only to observe that i had added the bootstrap script twice and the second bootstrap script was after above the jquery script   Solution    Ensure that bootstrap min js and jquery min js are only included once in your file  The bootstrap min js script should be included after jquery min js

User · Answer

Check popper js library because I had same problem  you can find bootstrap  jquery and popper CDNs for drop down on https   getbootstrap com  or jus copy the following script tags

User · Answer

Working demo  http   codebins com bin 4ldqp73  try this    lt ul class  nav  gt     lt li class  active  gt Home lt  li gt     lt li gt       lt div class  dropdown  gt         lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Personal asset loans lt  a gt         lt ul class  dropdown-menu  role  menu  aria-labelledby  dLabel  gt                       lt li gt  lt a href     gt asds lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt         lt  ul gt       lt  div gt          lt  li gt       lt li gt Payday loans lt  li gt     lt li gt About lt  li gt     lt li gt Contact lt  li gt   lt  ul gt

User · Answer

I had the same issue which brought me here   My Issue   I was using the recommended jquery 1 12 0 version as my jquery script file   Solution   replaced the jquery script with jquery 2 2 0 version   That solved it for me

User · Answer

Copy-paste below jQuery  lt script gt  and stylesheet  lt link gt  into your  lt head gt  to make sure you re loading all necessary files       It s important that your JQuery  js file is above  css stylesheet   Simply paste the following line to test   lt script src    ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src    netdna bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  gt  lt  script gt   lt link rel  stylesheet  type  text css  href    netdna bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt       The problem occurs mostly with loading of jQuery script  make sure you   add references correctly    Now test  Still if it doesn t work  check bootstrap website they ve a sample implementation    https   getbootstrap com docs 4 3 components navbar  supported-content

User · Answer

Add following lines within the body tags    lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt     lt script src  https   code jquery com jquery js  gt  lt  script gt     lt  -- Include all compiled plugins  below   or include individual files          as needed -- gt     lt script src  js bootstrap min js  gt  lt  script gt

User · Answer

Both bootstrap and jquery must be included    lt link type  text css  href    ProjectName  css ui-lightness jquery-ui-1 8 18 custom css  rel  stylesheet    gt   lt script type  text javascript  src    ProjectName  js jquery-x x x custom min js  gt  lt  script gt    lt link type  text css  href    ProjectName  css bootstrap css  rel  stylesheet    gt   lt script type  text javascript  src    ProjectName  js bootstrap js  gt  lt  script gt    NOTE  jquery-x x x min js version must be version 2 x x

User · Answer

I had the same problem when I included the bootstrap min js twice  Removed one of them and it began working

User · Answer

Here what i did is         Just removed bootstrap min js from my Project and added bootstrap js to it and it started working          bundles Add new ScriptBundle    bundles bootstrap   Include                       Scripts bootstrap js                         Scripts bootstrap min js

User · Answer

Try this in the head section   lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt   lt script src    netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt   lt link rel  stylesheet  type  text css  href    netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt

User · Answer

I just added JS part of bootstrap to my index page  then it worked  Paste this  if you re using the latest version of bootstrap  lt script src  quot https   code jquery com jquery-3 5 1 slim min js quot  integrity  quot sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj quot  crossorigin  quot anonymous quot  gt  lt  script gt   lt script src  quot https   cdn jsdelivr net npm bootstrap 4 5 3 dist js bootstrap bundle min js quot  integrity  quot sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ JpcUGGOn Y7RsweNrtN tE3MoK7ZeZDyx quot  crossorigin  quot anonymous quot  gt  lt  script gt

User · Answer

I had the same problem  After a couple of hours of trouble shooting found that   I had    lt script type  text javascript  src  Scripts bootstrap min js  gt  lt  script gt   lt script type  text javascript  src  Scripts jquery-2 1 1 min js  gt  lt  script gt    instead of    lt script type  text javascript  src  Scripts jquery-2 1 1 min js  gt  lt  script gt   lt script type  text javascript  src  Scripts bootstrap min js  gt  lt  script gt    Hope this helps someone

User · Answer

FYI  If you have bootstrap js  you should not add bootstrap-dropdown js   I m unsure of the result with bootstrap min js

User · Answer

You ll have to check conflicting css files properties for example you could have   nav  custom style contents elsewhere try to disable your own css files and check if that works then check which file or custom style that makes the conflicts also make sure you are including the bootstrap min js in your code

User · Answer

For latest Bootstrap you will need Popper js  lt script src  quot http   code jquery com jquery-1 11 0 min js quot  gt  lt  script gt    lt link rel  quot stylesheet quot  href  quot http   maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css quot  gt   lt script src  quot   maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap min js quot  gt  lt  script gt    lt script src  quot https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js quot  gt  lt  script gt   Copy the link in the End of the Body section just before the  lt body gt  Tag  inside  lt Head gt  Tag

User · Answer

Try this code    lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta http-equiv  X-UA-Compatible  content  ie edge  gt       lt title gt Bootstrap Tutorial lt  title gt     lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt   lt  head gt   lt body gt       lt h1 gt Welcome to Bootstrap lt  h1 gt       lt div class  dropdown  gt           lt button class  btn btn-secondary dropdown-toggle  type  button  id  dropdownMenuButton  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt              Dropdown button          lt  button gt           lt div class  dropdown-menu  aria-labelledby  dropdownMenuButton  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  div gt         lt script src  https   code jquery com jquery js  gt  lt  script gt       lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap bundle min js  gt  lt  script gt       lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

I had setup with Angular 7  jQuery 3 4 1  Popper 1 12 9 and Bootstrap 4 3 1  nothing was working for me unitll I did this little hack in styles    dropdown show  dropdown-menu       opacity  1  important      Html looks like this    lt nav class  navbar navbar-expand-lg navbar-dark fixed-top py-1  gt    lt div class  container-fluid  gt       lt ul class  navbar-nav  gt           lt li class  nav-item dropdown  gt               lt button class  btn btn-secondary dropdown-toggle  type  button  data-toggle  dropdown  aria-haspopup  true  id  dropdown-id                  aria-expanded  false  gt Menu lt  button gt               lt div class  dropdown-menu  aria-labelledby  dropdown-id  gt                   lt a class  dropdown-item   routerLink          gt Main page lt  a gt                   lt a class  dropdown-item   routerLink      about    gt About lt  a gt                   lt div class  dropdown-divider  gt  lt  div gt                   lt a class  dropdown-item   routerLink      about terms    gt Terms lt  a gt                   lt a class  dropdown-item   routerLink      about privacy    gt Privacy lt  a gt               lt  div gt           lt  li gt        lt  ul gt     lt  div gt   lt  nav gt

User · Answer

My  same  problem arose when I mixed up the css and the bootstrap versions  I was using version 3 bootstrap min js with version 4 5 bootstrap min css If you ve loaded or overwrote a bunch of css and js files to your static folder recently  it would be a good place to start  Good luck

User · Answer

For your style you need to include the css files of bootstrap  generally just before  lt  head gt  element   lt link href  css bootstrap css  rel  stylesheet  gt        Next you ll need to include the js files  it s recommended to include them at the end of the document  generally before the  lt  body gt  so pages load faster    lt script src  js jquery js  gt  lt  script gt           lt script src  js bootstrap js  gt  lt  script gt

[html] Bootstrap dropdown not working

Examples related to html

Examples related to drop-down-menu

Examples related to twitter-bootstrap