CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Tanvir Rahman
Tanvir Rahman

Reputation: 709

Why my dropdown menu is not working in bootstrap?

Code(In head): 

 <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all" />
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        <script type="text/javascript" src="js/boootstrap.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <title></title>
    </head>

Code(In body):

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="d" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown Menu
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="d">
            <li><a href="#">Dropdown</a></li>
            <li><a href="#">Dropdown</a></li>
            <li><a href="#">Dropdown</a></li>
            <li><a href="#">Dropdown</a></li>
        </ul>
    </div>

I looked and tried in many way from stackoverflow to solve this problem.But nothing worked for me.This code is working in https://jsfiddle.net/DTcHh/10972/ but when i open it with browser it is not working.

Upvotes: 1

Views: 448

Answers (4)

Tal
Tal

Reputation: 1231

I tested your code and found a console error. Then i tried with below CDN'S and it worked. Use these CDN and it would work fine

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>

Upvotes: 0

Tanvir Rahman
Tanvir Rahman

Reputation: 709

Problem solved:

1)There was a console error.(Solved by Abhishek Ghosh)

2)The jquery script should be before bootstrap(Solved by AlexG)

Upvotes: 0

AlexG
AlexG

Reputation: 5919

<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

here seems to be the problem. include jquery before bootstrap

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/boootstrap.min.js"></script>

jQuery after Bootstrap

jQuery before Bootstrap

Upvotes: 2

arc-guardian
arc-guardian

Reputation: 41

@AlexG's answer is correct (i haven't enough reputation to comment).

The very first line in the bootstrap.js is to check for jquery

if(typeof jQuery==='undefined'){throw new Error('Bootstrap\'s JavaScript requires jQuery')}

Because you load jquery after bootstrap, it will throw an exception. So even if this doesn't solve your problem with the drop down, you still must include it first.

Upvotes: 3

Related Questions