34

I'm trying to get to grips with bootstrap and having little success. I am just trying to get a local version of this template working

http://getbootstrap.com/examples/jumbotron/

I have copied the html directly into a html page and referenced the css and js files in the same order as the webpage only using copies from the latest download on my machine. However nothing happens when the arrow next to dropdown is clicked (i.e. no menu appears)

I have tried to reproduce the code in a jsfiddle but that is even worse and doesnt display the menu properly at all. http://jsfiddle.net/andieje/kRX6n/

Here is my page's output. I also included the dropdown js too

<!DOCTYPE html>
<html>
<head><title>
    Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="JavaScript/html5shiv.js"></script>
      <script src="JavaScript/respond.min.js"></script>
    <![endif]-->
</head>
 <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>



<script type="text/javascript" src="JavaScript/jquery.js" />
  <script type="text/javascript" src="JavaScript/bootstrap-min.js" />

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />  

</body>
</html>

I also tried adding this code but to no avail

 <script type="text/javascript">  
        $(document).ready(function () {  
            $('.dropdown-toggle').dropdown();  
        });  
   </script> 
2
  • are you sure the bootstrap.min.js file isn't using a period and not a dash? I'm looking at the source right now, and its using a period.
    – Kristian
    Aug 20, 2013 at 22:07
  • hi - my file is named with a dash and not a period. thanks Aug 20, 2013 at 22:33

5 Answers 5

93

i faced the same problem , the solution worked for me , hope it will work for you too.

<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

Please include the "jquery.min.js" file before "bootstrap.min.js" file, if you shuffle the order it will not work.

5
  • 1
    Adding $('.dropdown-toggle').dropdown(); solved my problem thanks.
    – Murat
    Jan 19, 2015 at 14:47
  • 2
    The order does seem to be relevant. Flask-Bootstrap with has a Jinja2 template bootstrap/base.html which has exactly this order. In my case I didn't realize this and included the scripts again in a sub-template. This broke the dropdown apparently due the order problem described by ashishSober.
    – bvanlew
    Jun 17, 2015 at 14:40
  • 1
    Problem solved by adding the $('.dropdown-toggle').dropdown(); Thanks
    – Denis V
    Jul 15, 2016 at 10:18
  • No need to add a $('.dropdown-toggle').dropdown(). Just ensure jQuery is loaded before bootstrap's .js file. That fixed it for me. Jan 27, 2019 at 20:38
  • thanks a lot, I was looking the whole afternoon for the solution Dec 19, 2020 at 15:51
14

Just Remove the type="text/javascript"

<script src="JavaScript/jquery.js" />
<script src="JavaScript/bootstrap-min.js" />

Here is the update - http://jsfiddle.net/andieje/kRX6n/

1
  • 2
    Thanks for you answer. I was facing same problem and your solution worked. But can you explain what is problem of hainv 'text/javascript'? Jan 2, 2014 at 13:55
8

Adding this script to my code fixed the dropdown menu.

<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>
1
  • 1
    Adding this solved my problem thanks. Should be included as correct answer. Feb 26, 2019 at 15:46
2

Just add both these files after opening of body tag. Keep in mind 'Only after Body tag' any where after body tag. If you add below mentioned files inside body tag then your problems would still be unresolved.

So paste them after or before close of body tag... This works 100%. I've tested and got it working!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
-2

I had the same issue I remove the following script and it worked for me.

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.