Bootstrap dropdown not working with standard JS and CSS

Question

I have no idea what I am doing when it comes to front-end development. I have an anchor tag, and upon a click, I want a Bootstrap dropdown menu to show, here is the HTML:

<div class="dropdown"> <a data-target="#" class="dropdown-toggle" data-toggle="dropdown">Developer Ctrls</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div>

The above HTML is taken directly from http://getbootstrap.com/2.3.2/javascript.html#dropdowns

The problem is that although the anchor tag shows up, when I click it nothing happens - the dropdown menu does not appear.

I have both bootstrap js and css, from: https://www.bootstrapcdn.com/

What is the step that I am missing in order to get the dropdown to show?

Which version of Bootstrap is referenced in your code? And do you have jQuery too? — DavidG
– DavidG, Commented Mar 8, 2016 at 23:59
thanks, yeah I have jQuery and I have the latest version of bootstrap js/css from the CDN that I mentioned — Alexander Mills
– Alexander Mills, Commented Mar 9, 2016 at 0:00
I ask about Bootstrap version as the docs you link are for Bootstrap v2, not v3. — DavidG
– DavidG, Commented Mar 9, 2016 at 0:01

canon · Accepted Answer · 2016-03-09 16:25:40Z

To fix this issue you will need bootstrap version 2.3.2. To do this, take the cdn from your link and change it from this:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

... to this:

https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css

As commented below:

The BETTER option would be to build in the newer version of bootstrap, see fiddle http://jsfiddle.net/DIRTY_SMITH/70vmmrrx/2/

 <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Developer Ctrls <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> </div>

I'd much rather recommend using v3 HTML instead of using old (unsupported) versions of libraries.
@DavidG I agree, however that would not answer the OP's question. That would be an alternative solution, but not the answer. right?
Well OP is using the wrong docs, so it's still a valid solution.
@DavidG lol, well kind of. I don't feel like writing the HTML to match the newer version of boostrap. But yes, I see your point.

Collectives™ on Stack Overflow

Bootstrap dropdown not working with standard JS and CSS

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related