1

This is probably a very simple thing to fix, but I've followed as instructed on lots of other posts however still my drop down menu isnt working. just to note, this is my first time using bootstrap. I tested with javascript console and got this error back "Uncaught Error: Bootstrap requires jQuery " - but i have clearly linked jquery.... This is my code 

<!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <link type="text/css" rel="stylesheet" href="custom/style.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <title>Bootstrap Proj. 1</title>
</head>
<body>
    <div class="dark top-bar">
        <div class="navbar-brand"></div>
        <ul class="nav nav-tabs">
            <li><a href="#home">Home</a></li>
            <li><a href="#who">Who we are</a></li>
            <li><a href="#what">What we do</a></li>
            <li><a href="#how">How we do it</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"  href="#">Get in touch<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">FaceBook</a></li>  
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">LinkedIn</a>/li>
                    <li><a href="#">Google +</a></li>
                </ul>
            </li>
        </ul>
    </div>    
</body>

Nick Lewers
  • 109
  • 1
  • 10
  • 1
    Just put `` before `` – lifus Nov 30 '13 at 21:26
  • Oooh you legend - lifus! Fixed it straight away. – Nick Lewers Nov 30 '13 at 21:30
  • You are welcome. Remember that browser ["will execute the scripts in the order it finds them"](http://stackoverflow.com/a/8996905/2286990). In your case, it will try to execute bootstrap before jquery. Also, as a side note, you may also put your 'links' before your 'scripts'. It's considered as a best practice and [allows to render a page slightly faster](https://developers.google.com/speed/articles/include-scripts-properly). – lifus Nov 30 '13 at 21:39

1 Answers1

0

Order is important.

Bootstrap requires jQuery

so you should load jquery before bootstrap:

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

Also, you may include CSS files before JavaScript files. It's not critical but it's considered as a best practice since it speeds up browser rendering time.

Community
  • 1
  • 1
lifus
  • 8,074
  • 1
  • 19
  • 24