Q:

ASP.NET WebForms and Bootstrap 4.1.3 Navbar not working

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 < HEAD > I have:
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="../../CSS/bootstrap.min.css" />
    <script type="text/javascript" src="../../JavaScript/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/bootstrap.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/bootstrap.bundle.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/popper.min.js"></script>

and in the < BODY > I have:
<form id="form1" runat="server">

        <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
        </div>        

        <asp:ContentPlaceHolder ID="body_content" runat="server" ></asp:ContentPlaceHolder>
    </form>

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?
I'm using the later Bootstrap.JS (4.1.3), Latest jQuery (3.1.1) and the latest popper.js.
Thanks.

A:

I found that the following worked i.e just by  single click on the text Dropdown, the menu opens. Using your code, it opened but by clicking the text twice.
I used the following code to test this scenario. Note that bootstrap.bundle.min.js inlcudes popper.js as well as bootstrap.min.js, so there is no need to include these JavaScript files. This may be why its not working as expected.
You can take a look at following documentation for specifics about bootstrap.bundle.min.js: Bootstrap Bundle JavaScript Includes what
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>BootStrap Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw=" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </form>
</body>
</html>

