CODEWITHSUNDEEP
twitter-bootstrap
Adam K.
Adam K.

Reputation: 3

twitter bootstrap not linking to jquery

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>

Upvotes: 0

Views: 93

Answers (1)

nozzleman
nozzleman

Reputation: 9649

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:

  1. with Bootstrap 3.2
  2. with Bootstrap 2.3.2

Upvotes: 1

Related Questions