CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Alexander Mills
Alexander Mills

Reputation: 100486

Bootstrap dropdown not working with standard JS and CSS

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?

Upvotes: 3

Views: 303

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

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>

Upvotes: 4

Related Questions