title: Data-toggle and Data-target are not working as desired
body: <p>I have sample navigation bar. But I couldn't collapse it as the 'data-toggle' and 'data-target' are not working.  Please help me and also give suggestion if there is any other issue in my code. Here is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link rel="stylesheet" href="/css/bootstrap.min.css" /&gt;
      
      &lt;title&gt;Basic Log In Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                          &lt;span class="sr-only"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="Default.aspx" &gt;&lt;span&gt;&lt;img alt="logo" src="Images/logo.png" height="30" /&gt;&lt;/span&gt;BootStrap Demo&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li class="active"&gt;&lt;a href="Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Social&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;facebook&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Google+&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Instagram&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;script type="text/javascript" src="/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>