Bootstrap Dropdown menu is not working

Question

I am having trouble getting my dropdowns to work  I can get the navbar to show up perfectly  but when I click on  Dropdown   either of them  it does not display the dropdown menu  I have tried looking on other posts about this  but nothing that fixed everyone s problems helped  I copied the source straight from bootstrap s website  but I can t seem to get it to work on my machine  Anyone have any ideas  I have been staring at it for an hour and can t seem to figure out what the problem is    lt head gt   lt script src  resource js jquery-1 11 0 js  gt  lt  script gt   lt script src  resources js bootstrap js  gt  lt  script gt    lt script type  text javascript  gt    document  ready function            dropdown-toggle   dropdown        lt  script gt   lt  head gt   lt body gt   lt nav class  navbar navbar-default  role  navigation  gt     lt div class  container-fluid  gt       lt  -- Brand and toggle get grouped for better mobile display -- gt       lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle  data-toggle  collapse  data-    target   bs-example-navbar-collapse-1  gt       lt span class  sr-only  gt Toggle navigation lt  span gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt     lt  button gt     lt a class  navbar-brand  href     gt Brand lt  a gt   lt  div gt    lt  -- Collect the nav links  forms  and other content for toggling -- gt   lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt     lt ul class  nav navbar-nav  gt       lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li class  dropdown  gt         lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt         lt ul class  dropdown-menu  role  menu  gt           lt li gt  lt a href     gt Action lt  a gt  lt  li gt           lt li gt  lt a href     gt Another action lt  a gt  lt  li gt           lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt         lt  ul gt       lt  li gt     lt  ul gt     lt form class  navbar-form navbar-left   gt       lt div class  form-group  gt         lt input type  text  class  form-control  placeholder  Search  gt       lt  div gt       lt button type  submit  class  btn btn-default  gt Submit lt  button gt     lt  form gt     lt ul class  nav navbar-nav navbar-right  gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li class  dropdown  gt         lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt         lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt Action lt  a gt  lt  li gt           lt li gt  lt a href     gt Another action lt  a gt  lt  li gt           lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt         lt  ul gt       lt  li gt     lt  ul gt   lt  div gt  lt  --   navbar-collapse -- gt

User · Answer

Looks like there is more to be done for Rails 4    Inside you Gemfile add   gem  bootstrap-sass       3 2 0 2    as seen here   Next you need to run    bundle install   This is the part no one has mentioned  Open you config application rb file   add this right before the second to last end  config assets precompile     w   png   jpg   jpeg   gif    as seen here about a 20  down the page    Next create a custom css scss file in this directory  app assets stylesheets   as seen here a little further down from the above task   Inside that file include   import  bootstrap       Now stop your server and restart and everything should work fine   I tried to run bootstrap without using a gem but it didn t work for me   Hope that helps someone out

User · Answer

I think it s the matter of the route of your route file  Not the bootstrap nor the JQuery file

User · Answer

I am using rails 4 0 and ran into the same problem  Here is my solution that passed test  add to Gemfile  gem  bootstrap-sass    run  bundle install   then add to app assets javascripts application js      require bootstrap   Then the dropdown should work  By the way  Chris s solution also work for me   But I think it is less conform to the asset pipeline idea

User · Answer

According to getBootstrap com  dropdowns are built on third-party library Popper js  So  if the dropdown menu does not work onclick but is working only on hover of the dropdown include popper js  bootstrap js and bootstrap css  Not including popper js before including bootstrap bundles could be one of the reasons     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 11 0 umd popper min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta js bootstrap min js  gt  lt  script gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta css bootstrap min css  gt  lt  link gt    https   getbootstrap com docs 4 0 components dropdowns

User · Answer

My bootstrap version was pointing to bootstap4-alpha    lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt    changed to 4-beta   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    and it started working

User · Answer

I tried all the above answers and the only version who works for me is the jquery 1 11 1  I tried with all the other versions 1 3 2  1 4 4  1 8 2  3 3 1 and navbar dropdown doesn t work    lt script src  jquery jquery-1 11 1 min js  gt  lt  script gt

User · Answer

If you face the problem in Ruby on Rails  the exhaustive solution is provided by Bootstrap Ruby Gem readme file    or in short    rename application css to application scss add  import  bootstrap   add gem  jquery-rails  to Gemfile unless it exists  add     require jquery3         require popper         require bootstrap         require bootstrap-sprockets to application js

User · Answer

Put the jquery js link before the bootstrap js link like so    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    instead of    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

User · Answer

I had a bootstrap   rails project  and dropdown worked fine  They stopped to works after an update     This is the solution that fixed the problem  add the following to  js file     document  ready function             dropdown-toggle   dropdown

User · Answer

For Bootstrap 4 you need an additional library   If you read your browser console  Bootstrap will actually print an error message telling you that you need it for drop down to work   Error  Bootstrap dropdown require Popper js  https   popper js org

User · Answer

in angular projects we add angular-cli json or angular json theses lines          scripts             node modules jquery dist jquery min js           node modules bootstrap dist js bootstrap min js

User · Answer

I faced this while I was using ASP  NET Forms  The solution I used was deleting or commenting out jQuery and Bootstrap references from the  lt asp ScriptManager runat  server  gt  in the master page  It seems it creates a conflict with the jQuery and Bootstrap references that you put in the  lt header gt

User · Answer

In case anyone still facing same problem be sure to check your your view Page source in your browser to check whether all the jquery and bootstrap files are loaded and paths to the file are correct  Most important  make sure to use latest stable jquery file

User · Answer

100  working solution   just place your Jquery link first of all js and css links  Example Correct    lt script src  jquery jquery js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap min js  gt  lt  script gt   lt link rel  stylesheet  href  css bootstrap css    gt    Example Wrong    lt script type  text javascript  src  js bootstrap min js  gt  lt  script gt   lt link rel  stylesheet  href  css bootstrap css    gt   lt script src  jquery jquery js  gt  lt  script gt

User · Answer

Maybe try with    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    and see if it will work

User · Answer

the problem is that href is href     you must remove href     in all  tag

User · Answer

In my case  disabling Chrome Extensions fixed it  I removed them from Chrome one by one until I found the culprit   Since I m the author of the offending Chrome extension  I guess I better fix the extension

User · Answer

Maybe someone out there can benefit from this   Summary  a k a  tl dr   Bootstrap dropdowns stopped dropping down due to upgrade from django-bootstrap3 version 6 2 2 to 11 0 0   Background  We encountered a similar issue in a legacy django site which relies heavily on bootstrap through django-bootstrap3  The site had always worked fine  and continued to do so in production  but not on our local test system  There were no obvious related changes in the code  so a dependency issue was most likely    Symptoms  When visiting the site on the local django test server  it looked perfectly O K  at first glance  style layout using bootstrap as expected  including the navbar  However  all dropdown menus failed to drop down   No errors in the browser console  All static js and css files were loaded successfully  and functionality from other packages relying on jquery was working as expected    Solution  It turned out that the django-bootstrap3 package in our local python environment had been upgraded to the latest version  11 0 0  whereas the site was built using 6 2 2    Rolling back to django-bootstrap3  6 2 2 solved the issue for us  although I have no idea what exactly caused it

[javascript] Bootstrap Dropdown menu is not working

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap