1

I am playing around with trying to get a nav bar. I haven't even customized the code directly from here Components - Bootstrap

<!DOCTYPE html>

<html>
<head>
<title>Nav Bar</title>
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="templates/template100/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="templates/template100/css/bootstrap-theme.min.css">


</head>
<body>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

</body>
</html>

That is the entirety of my html. the code in the body tags is directly copy and pasted from the linked webpage above. In that webpage the toggle works on the dropdown but does not when I load my html file which you can find here test.html. Why is this not working for me?

2 Answers 2

0

You need to include jquery if you plan on using bootstrap.js.

3
  • Thank you. Now I've added '<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>' but it's still not working.
    – Shanan
    Commented Dec 10, 2014 at 20:38
  • I thought maybe I had my script tags in the wrong place. So I moved them to the bottom of the body and it's still not working.
    – Shanan
    Commented Dec 10, 2014 at 21:05
  • I've managed to get the dropdown working here [mariahswind.com/TNGSandBox/test2.html] but I've yet to isolate the element that is making the difference.
    – Shanan
    Commented Dec 10, 2014 at 22:00
0

You forgot to include jQuery, which is required.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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