BootStrap Navbar-Toggle Not Working In asp.net Using Visual Studio 2010
11,230
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.
Author by
Afnan Ahmad
Updated on June 15, 2022Comments
-
Afnan Ahmad almost 2 years
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><!--/.nav-collapse --> </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