title: ASP.NET WebForms and Bootstrap 4.1.3 Navbar not working
body: <p>I'm trying to learn Bootstrap 4 Navbar and getting it to work with a ASP.NET Webform using framework 4.7.2 (Visual Studio 2013). I copied code from Bootstraps own website and place it in the master Page. In the &lt; HEAD > I have:</p>
  
  <pre><code>        &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link type="text/css" rel="stylesheet" href="../../CSS/bootstrap.min.css" /&gt;
      &lt;script type="text/javascript" src="../../JavaScript/jquery-3.3.1.min.js" &gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../JavaScript/bootstrap.min.js" &gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../JavaScript/bootstrap.bundle.min.js" &gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../JavaScript/popper.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and in the &lt; BODY > I have:</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
  
          &lt;div class="container"&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
            &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
            &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
  
            &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                    Dropdown
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
          &lt;/div&gt;        
  
          &lt;asp:ContentPlaceHolder ID="body_content" runat="server" &gt;&lt;/asp:ContentPlaceHolder&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>The page renders fine as per the Bootstrap example but the dropdown doesn't do anything. Yet, if I create a .HTML page and paste the exact same code, it works fine. So i'm wondering why this code wouldn't work in a WebForm?</p>
  
  <p>I'm using the later Bootstrap.JS (4.1.3), Latest jQuery (3.1.1) and the latest popper.js.</p>
  
  <p>Thanks.</p>