Bootstrap dropdown not working
HtmlDrop Down-MenuTwitter BootstrapHtml Problem Overview
I can't make bootstrap dropdown to work. Here is my html for nav:
<ul class='nav'>
<li class='active'>Home</li>
<li class='dropdown'>
<a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
And here are the scripts:
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
What am I doing wrong? Thanks for your answers!
Html Solutions
Solution 1 - Html
I had the same problem. After a couple of hours of trouble shooting found that,
I had
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
instead of,
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
Hope this helps someone
Solution 2 - Html
I had the same problem when I included the bootstrap.min.js twice. Removed one of them and it began working.
Solution 3 - Html
FYI: If you have bootstrap.js, you should not add bootstrap-dropdown.js.
I'm unsure of the result with bootstrap.min.js.
Solution 4 - Html
Working demo: http://codebins.com/bin/4ldqp73
try this
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
Solution 5 - Html
For your style you need to include the css files of bootstrap, generally just before </head> element
<link href="css/bootstrap.css" rel="stylesheet">
Next you'll need to include the js files, it's recommended to include them at the end of the document, generally before the </body> so pages load faster.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
Solution 6 - Html
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 (01.12.2020)
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Solution 7 - Html
Add following lines within the body tags.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
Solution 8 - Html
you have to import this files into the <head></head> of your html.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Solution 9 - Html
Have you included jquery.js ?
Also, compare this line of code with yours:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
See this version that works ok.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3resource</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
Solution 10 - Html
Both bootstrap and jquery must be included:
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
NOTE: jquery-x.x.x.min.js version must be version 2.x.x !!!
Solution 11 - Html
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:
<!DOCTYPE html>
<html>
<head>
<title>Purrfect Match Landing Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="griddemo.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
For me works perfect hope it works also for you :)
Solution 12 - Html
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"));
Solution 13 - Html
Try this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Solution 14 - Html
In bootstrap 5, need to change from data-toggle='dropdown' to data-bs-toggle='dropdown'
Solution 15 - Html
Try this in the head section
<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">
Solution 16 - Html
Copy-paste below jQuery <script> and stylesheet <link> into your <head> 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
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
> 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
Solution 17 - Html
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
Solution 18 - Html
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
Solution 19 - Html
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
Solution 20 - Html
For latest Bootstrap you will need Popper.js
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Copy the link in the End of the Body section just before the <body> Tag, inside <Head> Tag.
Solution 21 - Html
In my case the original question turned out to be the answer. On bootstraps documentation page there is no mention of using a script to enable dropdowns but it appears to be necessary for it to function, at least in my case.
Once I added this script from the original question it magically started working.
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
--Edit: The root cause was something to do with the formatting of my parent nav container, I blew away my entire nav section and replaced it with bootstraps example and it started working without the script. So either solution works but blowing it away seemed to be the "correct" way for me as the script felt like a cheat.
Solution 22 - Html
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.
Solution 23 - Html
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.
Solution 24 - Html
Copy/paste the CSS link followed by the JS link from the bootstrap site here. Then the dropdown should work.
My page looks like:
<html>
<head>
<meta charset="utf-8">
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Website Title</title>
</head>
<body>
<div id="content" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
(Navbar from here)
Solution 25 - Html
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.
Solution 26 - Html
I had this issue using Angular 12 and Bootstrap 5. My problem was that I had mistakenly put a CSS file into the scripts section:
"styles": [
"node_modules/angular-calendar/css/angular-calendar.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"node_modules/sweetalert2/src/sweetalert2.scss",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/sweetalert2/src/sweetalert2.scss" <===== in wrong section
]
The app built OK and ran with no errors shown in the browser console, but the dropdown toggle did nothing.
Solution 27 - Html
If you are facing a dropdown menu problem, maybe this help you to get out of it
Step 1: BootStrap Download Page
Step 2: Jump over to this *"CDN via jsDelivr"*Copy and Paste CDN into the Web-Head tag
or
Otherwise, just copy the code below and paste it into the head tag, and good to go.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I hope this would help you. Regards, Ahmad Iqbal Bhatti
Solution 28 - Html
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:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
aria-expanded="false">Menu</button>
<div class="dropdown-menu" aria-labelledby="dropdown-id">
<a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
<a class="dropdown-item" [routerLink]='["/about"]'>About</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
<a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
</div>
</li>
</ul>
</div>
</nav>