BootStrap Navbar-Toggle Not Working In asp.net Using Visual Studio 2010

asp.net, css, jquery, twitter-bootstrap

Solution

I'm pretty sure you need to reference jQuery before Bootstrap like so.

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

UPDATE 2

The problem is with your script reference. Remove the "~". When directly in a script element the page doesn't understand "~".

The ~ refers to the root of the project understood by c# code. Not html elements.

So it should be:

 <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

UPDATE

You are referencing both the minified version of bootstrap.js and the full version. Remove the:

    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

I wonder if they are conflicting.

Problem

I have installed nuget package then I installed bootstrap. Now I have folders ``` Contents containing bootstrap css files Scripts containing .js files ``` In header of Master Page I have included it like this ``` <script type="text/javascript" src="~/Scripts/bootstrap.js"></script> <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script> ``` Then I tried to make nav like ``` <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-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 class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li> </ul> </div> </div> ``` But error is attribute data toggle is not a valid attribute of button. How can I get this to work in asp.net??? Please guide me .. Thank you

Original source