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 -->
This question is related to
javascript
jquery
html
css
twitter-bootstrap
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();
});
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.
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>.
Maybe someone out there can benefit from this:
Bootstrap dropdowns stopped dropping down due to upgrade from django-bootstrap3 version 6.2.2 to 11.0.0.
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.
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.
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.
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!
I think it's the matter of the route of your route file. Not the bootstrap nor the JQuery file.
If you face the problem in Ruby on Rails, the exhaustive solution is provided by Bootstrap Ruby Gem readme file.
or in short:
application.css to application.scss@import "bootstrap";gem 'jquery-rails' to Gemfile unless it exists.//= require jquery3
//= require popper
//= require bootstrap
//= require bootstrap-sprockets
to application.js.the problem is that href is href="#" you must remove href="#" in all tag
Looks like there is more to be done for Rails 4.
Inside you Gemfile add.
gem 'bootstrap-sass', '~> 3.2.0.2'
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!
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"
],
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>
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>
According to getBootstrap.com, 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>
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
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>
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)
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
Source: Stackoverflow.com