Twitter Bootstrap dropdown not working in any browser

Question

I'm trying to do a dropdown menu and it seems to work in Jsfiddle. It seems that the javascript and css files are correctly loaded: http://imgur.com/YYiJS4p

But it doesn't work in any of my browsers. I have tested it in Firefox 19.0.2, Google Chrome 25.0.1364.172 and Internet Explorer 9.0.2. Javascript is enabled and running.

Javascript is included before Bootstrap and bootstrap-dropdown.js is the only bootstrap file I have included, I mean that I have not included bootstrap.js.

There is nothing in my error console.

Thanks in advance.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Bootstrap, from Twitter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
              }
              .sidebar-nav {
                padding: 9px 0;
              }
        </style>
        <link href="./css/bootstrap-responsive.min.css" rel="stylesheet">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Fav and touch icons -->
        <link rel="shortcut icon" href="../assets/ico/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
    </head>

    <body>
        <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">  
            <div class="container">  
                <ul class="nav">  
                    <a class="brand" href="#">w3resource</a>  
                    <li class="active"><a href="#">Home</a></li>  
                    <li><a href="#">Blog</a></li>  
                    <li><a href="#">About</a></li>  
                    <li><a href="#">Contact</a></li>  
                    <li class="dropdown" id="accountmenu">  
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>  
                        <ul class="dropdown-menu">  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="#">MySQL</a></li>  
                            <li class="divider"></li>  
                            <li><a href="#">JavaScript</a></li>  
                            <li><a href="#">HTML5</a></li>  
                        </ul>  
                    </li>  
                </ul>  
            </div>  
        </div>  
        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">Componentes</li>
                            <li>
                                <a href="#">Link</a>
                            </li>
                            <li>
                                <a href="#">Link</a>
                            </li>
                        </ul>
                    </div>
                    <!--/.well -->
                </div>
                <!--/span-->
                <div class="span9">
                    <div class="row-fluid">
                        <div class="span4">
                             <h2>Canvas</h2>
                             <canvas id="myCanvas">Tu explorador no soporta canvas.</canvas>
                            <script>

                            var c=document.getElementById("myCanvas");
                            var ctx=c.getContext("2d");
                            ctx.fillStyle="#AA0000";
                            ctx.fillRect(0,0,150,75);

                            </script>

                        </div>
                        <!--/span-->
                    <!--/row-->
                </div>
                <!--/span-->
            </div>
            <!--/row-->
        </div>
        <!--/.fluid-container-->

    <!-- Placed at the end of the document so the pages load faster -->
            <hr>
            <footer>
                <p>© Company 2013</p>
            </footer>
        <script src="./js/jquery-1.9.1.js"></script>
        <script src="./js/bootstrap-dropdown.js"></script>
    </body>

</html>

The Dropdown menu of the section Tutorials, works fine for me... but i'm loading the bootstrap for another source. So my guess is that you are not loading some file properly. — Fede
@Fede I'm loading bootstrap.min.css, bootstrap-responsive.min.css, jquery-1.9.1.js and bootstrap-dropdown.js. Maybe should I use a lower jquery version? — Cod1ngFree

Fede Fede · Accepted Answer · 2013-03-23T22:31:37

This is what i'm loading:

 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

I tried your code, loading a bootrasp I have in my machine and a the jquery from the site. and it works perfectly in FF, chrome and safari. I don't have a explorer to test it.

Twitter Bootstrap dropdown not working in any browser

4 Answers