Bootstrap 3 dropdown not working
You have to include jQuery 1.X or 2.X when you put this in your own HTML page (Bootstrap versions before 3.3.7 are not compatible with JQuery 3.X). Make sure to include jquery.js before bootstrap.js (or dropdown.js). Usually you do this just before the </body> tag.
This is a complete working example, Bootstrap and jQuery are loaded from external CDNs:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- include javascript, jQuery FIRST -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Put this in a .html file and open it in your browser.
Bootstrap 3 simple dropdown not working
I'm pretty sure that you simply forgot to add bootstrap.js and also jquery.
With that included, everything works for me.
Bootstrap dropdown not working
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>
Dropdown Not Working - Bootstrap
You must have overwritten your bootstrap css somewhere.
because when i click on the button i see the class open appear on dropdown.
I added the following css to fix the dropdown menu:
.dropdown > .dropdown-menu { display: none; //hides .dropdown-menu directly inside .dropdown}.dropdown.open > .dropdown-menu { display: block; //shows .dropdown-menu directly inside .dropdown if it has class .open}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul></li>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.
Bootstrap 3.3.7 dropdown not working
Make sure all the links to Bootstrap are working. The code bellow is a link to the online version of bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
dropdown navbar at bootstrap 3 not working
Recheck the paths to your external js and style files. They may not be applying correctly. In the example below I used the Bootstrap CDNs and everything seems to be working as expected.
<link href="css/bootstrap.css" rel="stylesheet">
change to
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> // use this jquery instead
<script src="js/bootstrap.js"></script> // remove not needed if you are using the below line.
<script src="js/bootstrap.min.js"></script>
Also, created a fiddle for review.
Let me know if that helps
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML BEGINS -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid theme-showcase" style="background-color: #87cefa;"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle Navigator</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php" style="background-color: #fff;">Brand Image</a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav style"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">action</a></li> <li><a href="#">action</a></li> </ul> </li>
</ul> <form class="navbar-form"><a href="login_page.php"><button type="button" class="btn btn-default" role="button">Login</button></a> </form> </div> </div> </nav>Related Topics
Is There a Shortcut for Setting !Important on Every Property in a CSS File
CSS Media Query to Handle New High Resolution Mobiles Whilst Ignoring Tablets
Css, Nested Divs & Margins VS. Padding
Easy Equal Height Divs Without JavaScript Possible
Overflow:Hidden Not Working as Expected in Google Chrome
How to Have an Image Placeholder in Angularjs
CSS Selectors - Selecting a Specific Child Element
Ionic 2 How to Customize Ion-Range
Less: How to Pass a Mixin as an Argument to Another Mixin
How to Make a Scrollable Element Fill 100% of the Remaining Height of a Parent Element
How to Write a Caption Under an Image
Why Is My CSS Media Query Being Ignored or Overridden
Phonegap + Windows Phone 8: Viewport Meta & Scaling Issue
Overflow: Hidden on Div and Body, Different Behavior
Background Image Not Displaying in Chrome Browser