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

4

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>

edited Mar 9, 2016 at 16:25

canon

41.8k10 gold badges77 silver badges102 bronze badges

answered Mar 9, 2016 at 0:05

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DavidG Over a year ago

I'd much rather recommend using v3 HTML instead of using old (unsupported) versions of libraries.

Adam Buchanan Smith Over a year ago

@DavidG I agree, however that would not answer the OP's question. That would be an alternative solution, but not the answer. right?

DavidG Over a year ago

Well OP is using the wrong docs, so it's still a valid solution.

Adam Buchanan Smith Over a year ago

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

Adam Buchanan Smith Over a year ago

@DavidG I stopped being lazing and updated my answer.

Collectives™ on Stack Overflow

Bootstrap dropdown not working with standard JS and CSS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related