boostrap 3.1.1 navbar - toggle button does not appear on page
- by PST
I am trying to use bootstrap nav bar with toggle functionality.
With sample code as below, my page is not showing toggle button on the header bar.
NavHeader (NavBarMenuCaption) and 1st menu item appears on the same line.
Bootply link http://www.bootply.com/123050#
what could be wrong in below code?
<!DOCTYPE html>
<html>
<head>
<title>Bootstap menu demo</title>
<link rel="stylesheet" href="vendor/bootstrap-3.1.1-dist/css/bootstrap.min.css">
</head>
<body>
<h2>This is bootstap navbar demo</h2>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<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="#">NavBarMenuCaption</a>
</div>
<div class="navbar-collapse collapse" id="example-navbar-collapse">
<ul class="nav nav-pills nav-stacked">
<li ><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="vendor/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
</body>
