twitter bootstrap not linking to jquery

Question

I am going through Twitter Bootstrap tutorials and have been having problems with getting my initial output to work correctly. I've been researching the issue for a while, and it seems like the problem might be incorrect linking to jquery, but none of the posted code solutions have fixed my issue. The code below is from a tutorial and is not my own. In the tutorial, this code created a responsive collapsing navbar, however my output looks like this:

enter image description here

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap 3</title>

    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>

    <!-- Fixed Navigation Bar with drop down menu
    =============================================-->

    <div class="navbar navbar-default 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 href="#" class="navbar-brand"> WORDS <a>
            </div>
        </div>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials <b class="carrot"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Bootstrap Tutorials</a></li>
                    <li><a href="#">Bootstrap Tutorials</a></li>
                    <li><a href="#">Bootstrap Tutorials</a></li>
                    <li><a href="#">Bootstrap Tutorials</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

Are both the JavaScript files loading properly? And are you sure you're using the right versions of both jQuery and Bootstrap? — Nick McCurdy, Aug 08 '14 at 03:03
@NicolasMcCurdy I think that the JavaScript files may not be loading properly, I'm not sure what I need to be doing differently. I downloaded jQuery version 1.11.1 uncompressed today, and bootstrap version 2.3.2 today — Adam K., Aug 08 '14 at 03:10
you need to point to the correct src, the name should be the same name as your file name — Se0ng11, Aug 08 '14 at 03:13
@Se0ng11 sorry for the delay, I had to look up how to check for errors. I have the following errors "Resource interpreted as Script but transferred with MIME type text/plain: "file:///C:/Users/Adam/Documents/webpage_testing/js/jquery.js". attempt.htm:7 Resource interpreted as Script but transferred with MIME type text/plain: "file:///C:/Users/Adam/Documents/webpage_testing/js/bootstrap.js". attempt.htm:8 " — Adam K., Aug 08 '14 at 03:15
@Se0ng11 the names are the are the same as the file names (I changed it to jquery.js as is seen in the code for consistancy with the tutorial code), sorry if that wasn't clear — Adam K., Aug 08 '14 at 03:17
This might be an issue with your Windows registry. Check out [this question](http://stackoverflow.com/questions/12003107/resource-interpreted-as-script-but-transferred-with-mime-type-text-plain-for-l). — Nick McCurdy, Aug 08 '14 at 03:18
That link was relevent, and that issue was occuring. I made the fix that it described, and now there are no errors listed in the console. However, the output still looks the same — Adam K., Aug 08 '14 at 03:26
how bout go to the network tab in the debugger tools, refresh your page and see if there is any red color file appear in there? — Se0ng11, Aug 08 '14 at 03:29
@Se0ng11 There are no red color files, in fact based on this it looks like jquery is loading correctly http://imgur.com/DEYV5H7 — Adam K., Aug 08 '14 at 03:32

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

This works fine for Bootstrap 3.x. In your comment, you said you are using bootstrap 2.3.2 which is incompatible.

Linking the resources for Bootstrap 3 instead of those for version 2 will make your site work fine. See this bootplies as proof:

edited May 23 '17 at 12:20

Community

1
1

answered Aug 08 '14 at 10:28

nozzleman

9,529
4
37
58

Yes, this was the problem, and I'm up and running now! Thank you for your help with the trouble shooting, it ended up being kind of a stupid error, but it was one that I would not have figured out on my own. Thank you also to Se0ng11 and NicolasMcCurdy to take time to help me out! – Adam K. Aug 08 '14 at 23:45

twitter bootstrap not linking to jquery

1 Answers1