Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Dropdown menu is not working

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.


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

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>

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>

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/


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


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.