Bootstrap Dropdown menu is not working

Javascript Jquery Html Css Twitter Bootstrap

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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>

Solution 4 - Javascript

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>

Solution 5 - Javascript

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/

Solution 6 - Javascript

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

Solution 7 - Javascript

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.

Solution 8 - Javascript

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.

Solution 9 - Javascript

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

Solution 10 - Javascript

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

Solution 11 - Javascript

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!

Solution 12 - Javascript

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

Solution 13 - Javascript

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!

Solution 14 - Javascript

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

Solution 15 - Javascript

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)

Solution 16 - Javascript

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"

  ],

Solution 17 - Javascript

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>

Solution 18 - Javascript

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.

Solution 19 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	user2540528	View Question on Stackoverflow
Solution 1 - Javascript	Chris	View Answer on Stackoverflow
Solution 2 - Javascript	Iwan B.	View Answer on Stackoverflow
Solution 3 - Javascript	Hidayat ullah	View Answer on Stackoverflow
Solution 4 - Javascript	Seyibabs	View Answer on Stackoverflow
Solution 5 - Javascript	deilkalb	View Answer on Stackoverflow
Solution 6 - Javascript	Mohammad AlShaabi	View Answer on Stackoverflow
Solution 7 - Javascript	Munam Yousuf	View Answer on Stackoverflow
Solution 8 - Javascript	djvg	View Answer on Stackoverflow
Solution 9 - Javascript	Katelynn ruan	View Answer on Stackoverflow
Solution 10 - Javascript	Siddaram H	View Answer on Stackoverflow
Solution 11 - Javascript	Wes Duff	View Answer on Stackoverflow
Solution 12 - Javascript	Alvian Casablancas	View Answer on Stackoverflow
Solution 13 - Javascript	toddmo	View Answer on Stackoverflow
Solution 14 - Javascript	Victor Jimenez	View Answer on Stackoverflow
Solution 15 - Javascript	luskbo	View Answer on Stackoverflow
Solution 16 - Javascript	ATEF CHAREF	View Answer on Stackoverflow
Solution 17 - Javascript	Zeke	View Answer on Stackoverflow
Solution 18 - Javascript	Esmaeil MIRZAEE	View Answer on Stackoverflow
Solution 19 - Javascript	himanshu oberoi	View Answer on Stackoverflow