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.

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

I just copied your code and added js/css and it works on my machine — Chris, Mar 13 '14 at 15:48
'I copied the source straight from bootstrap's website' @user2540528, Can you give me that link? — STP38, Mar 13 '14 at 15:50
@Chris, i just looked in the dev tools in chrome, and the JS was throwing an error, saying "Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/BarApplication/resource/js/jquery-1.11.0.js Uncaught Error: Bootstrap's JavaScript requires jQuery Uncaught ReferenceError: $ is not defined". — user2540528, Mar 13 '14 at 15:51
So basically your jQuery isn't loaded. check if you have it on your server (localhost). — Chris, Mar 13 '14 at 15:53

score 161 · Accepted Answer · answered Mar 13 '14 at 15:49

161

Maybe try with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

and see if it will work.

answered Mar 13 '14 at 15:49

Chris

3,405
4
29
34

This did it. Any reason why the local files wouldn't work? And these js sources if I deploy this on a domain correct? Just want to make sure my app still works after I finish it and publish it. (It's my first one, so thats why I ask) – user2540528 Mar 13 '14 at 15:55
@user2540528 Probably the file is named differently then `jquery-1.11.0.js` or it is not there at all. – Chris Mar 13 '14 at 15:58
user2540528 You seemed to miss bootstrap.css – Avec Jun 28 '14 at 12:18
2

My problem was that i had the bootstrap.css in the right place but didn't have the bootstrap.min.js included in my bundle – codingNightmares Mar 04 '16 at 16:22
I realized that the order of those code lines is also important. If you put google apis as last line of code, then it does not work. – Efe Büyük May 09 '17 at 16:16
It might help to pre-pend each of those links with "http", like "http//ajax.google.....". – Rickka Feb 27 '18 at 12:23
I don't have enough points to downvote comments, so I'll point out here @Rickka that http without the colon will result in invalid syntax, and it's not needed anyway, because the //... syntax is valid in its own right, omitting the protocol on purpose. – Bob Kline Jul 31 '20 at 18:38

score 134 · Answer 2 · answered Mar 12 '15 at 09:30

134

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();
});

answered Mar 12 '15 at 09:30

Iwan B.

3,982
2
27
18

Solved an issue I had with Bootstrap 3 and Rails 4.2 where the dropdown would work only the first time around, but not on second click. – bovender Jan 02 '16 at 19:07
Grails project w/ Spud CMS - This solved my drop-down toggle issue. – Tyler Rafferty Jan 05 '16 at 20:34
thank you SO much for this 1. everyone is saying "add the jquery before the bootstrap". but it was like that. This is they only answer, after more than an hour looking, that worked! – MaNTiS Jan 11 '16 at 20:26
Where did you put this to fix it? I have my navbar in applications.html.erb and placed this in applications.js.erb and it doesn't seem to fix the problem. – Riptyde4 Jan 13 '16 at 07:45
I also had an update and after that dropdown stopped working. But this solution worked. Thanks again. – gunjan maheshwari Sep 27 '16 at 13:10
2

This helped me immensely. Any idea why this fix is needed? – Brack Aug 05 '17 at 08:42
1

This solution worked for me. It turned out that I had imported bootstrap on my site twice, after I imported it only once, it started working without the fix in this solution. – harshpatel991 Sep 30 '17 at 05:29
Or if you load dropdown dynamically after document is ready, you can have the following: ```$('body').on('click', '.dropdown-toggle', function () { $(this).dropdown(); });``` – GogromaT Oct 25 '17 at 18:23
I had the same issue as @harshpatel991 , I was loading bootstrap twice for some reason and after page refresh the drop-down was not working. – Zdravko Donev Jun 08 '19 at 21:13
Worked for me, in a custom WordPress theme that was using Bootstrap 3.3.7. Thanks! – supernaut Oct 05 '19 at 19:36
Worked for me. Thanks! – Vinicius Alcantara Mar 18 '20 at 17:55
that fixed it! thanks, have spent ages on this. I'm converting a .Net 4.5 MVC app to .Net 6, this is just one of the strange headaches I have run into.. – punkologist Aug 08 '22 at 06:25

score 29 · Answer 3 · answered Mar 10 '15 at 13:44

29

100% working solution

just place your Jquery link first of all js and css links

Example Correct

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

Example Wrong!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>

answered Mar 10 '15 at 13:44

Hidayat ullah

307
3
2

Didn't work in my case. Had to use Iwan B.'s solution. – toddmo Jan 02 '17 at 23:25
1

@Nabin It works because, we have to load jquery first and then bootstrap, since bootstrap uses jquery – Siddaram H Jan 14 '18 at 07:56
@toddmo It works, just check the jquery,bootstrap and css loaded correctly or not from networy tab in google crome dbugger – LMK Mar 08 '20 at 18:15
Noppe. That's my order on a "init.jsp" file (loading the css's after that) – ieselisra Sep 14 '21 at 12:35

score 16 · Answer 4 · edited Jan 06 '17 at 20:44

16

Put the jquery js link before the bootstrap js link like so:

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

instead of:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

edited Jan 06 '17 at 20:44

Khaneliman

334
3
13

answered Jun 02 '15 at 12:15

Seyibabs

177
1
2

`Put the jquery css ...` > `Put the jquery js ...` – allcaps Nov 26 '15 at 13:16
2

Your words are correct but the code blocks are the opposite of what you say. – Astra Bear Sep 14 '16 at 22:00

deilkalb · Answer 5 · 2021-06-29T18:49:49.377

10

According to getBootstrap.com (version 4), 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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/

edited Jun 29 '21 at 18:49

answered Aug 16 '18 at 19:30

deilkalb

445
1
4
10

1

For the version 4 this is the answer which is a big change when we are used to only include Jquery and bootstrap in our projects. – Vindic Apr 19 '19 at 06:54
1

Yes, the order really matters. – deilkalb Apr 24 '19 at 13:21
1

This is the one that worked for me. Copied the same codes from the Bootstrap page, but this is the right order they should be in. – marcogemaque Mar 25 '20 at 20:45

score 3 · Answer 6 · edited Jul 12 '17 at 04:20

3

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 <asp:ScriptManager runat="server"> in the master page. It seems it creates a conflict with the jQuery and Bootstrap references that you put in the <header>.

edited Jul 12 '17 at 04:20

Nathan Tuggy

2,237
27
30
38

answered Jul 12 '17 at 04:03

Mohammad AlShaabi

79
6

score 2 · Answer 7 · answered Sep 22 '15 at 17:14

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.

score 2 · Answer 8 · answered Oct 03 '18 at 13:00

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.

score 1 · Answer 9 · answered Nov 01 '14 at 15:42

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

score 1 · Answer 10 · answered Apr 27 '17 at 17:09

1

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!

answered Apr 27 '17 at 17:09

toddmo

20,682
14
97
107

score 1 · Answer 11 · answered Jan 14 '18 at 08:03

My bootstrap version was pointing to bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

changed to 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

and it started working

score 0 · Answer 12 · answered Oct 09 '14 at 03:28

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!

score 0 · Answer 13 · answered Feb 14 '16 at 03:55

0

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

answered Feb 14 '16 at 03:55

Alvian Casablancas

93
8

score 0 · Answer 14 · answered Jun 05 '18 at 22:40

0

the problem is that href is href="#" you must remove href="#" in all tag

answered Jun 05 '18 at 22:40

Victor Jimenez

598
3
6

score 0 · Answer 15 · answered Jul 06 '18 at 14:06

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)

score 0 · Answer 16 · answered Aug 15 '18 at 10:35

0

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"

  ],

answered Aug 15 '18 at 10:35

ATEF CHAREF

387
5
8
18

score 0 · Answer 17 · answered Oct 03 '18 at 17:02

0

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.

<script src="jquery/jquery-1.11.1.min.js"></script>

answered Oct 03 '18 at 17:02

Zeke

562
4
14

score 0 · Answer 18 · answered Feb 26 '20 at 00:41

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.

score 0 · Answer 19 · answered May 21 '21 at 14:58

I was using pug with node js and encountered this issue. The problem was my jquery version. I just googled and used cdn link to the latest Jquery version which caused the issue. Jquery and Popper js are dependencies of bootstrap.

In order to solve I used the recommended versions of these libraries mentioned here

score 0 · Answer 20 · answered Jun 09 '22 at 18:22

0

two links to bootstrap.bundle.min caused that problem here be sure we call it only once

answered Jun 09 '22 at 18:22

Mohamad Elnaqeeb

541
4
13

Bootstrap Dropdown menu is not working

20 Answers20

Summary (a.k.a. tl;dr)

Background

Symptoms

Solution

Linked

Related