bootstrap drop down not dropping down

Question

I am trying to get a bootstrap drop down menu to work but I seem to have something going wrong. Here is my html:

<head>
    <meta charset="utf-8">
    <title>memberpage</title>
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>

I get the button to show up but when I click it I don't get anything. I am using the default js and css files from bootstrap. I am want it to be just an normal drop down menu.

[EDIT] okay so after adding the jquery here is my code.

<head>
    <meta charset="utf-8">
    <title>memberpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>

I am still getting nothing from the page. I get the button but nothing else. no dropdown nor any response from the page.

You may find some help from the link below http://stackoverflow.com/questions/12458522/bootstrap-dropdown-not-working — salma sultana, Jan 24 '16 at 05:39

frunkad · Accepted Answer · 2016-01-24T05:56:08.727

You forgot jquery, Add this before bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Quoting from Bootstrap Javascript ,

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

This works well for me:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>
</body>

I am just using CDN for the files. Fiddle

edit your question with the new code and if possible add a screenshot of what you see — frunkad, Jan 24 '16 at 05:48

score 0 · Answer 2 · answered Jan 24 '16 at 06:05

0

You did not include js file.Please check all script link, is it ok or not.I just include js file and its working for me.Take a look WORKING FIDDLE.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

answered Jan 24 '16 at 06:05

Chonchol Mahmud

2,717
7
39
72

bootstrap drop down not dropping down

2 Answers2