VS2017 Templates: ASP.NET Web Forms (and MVC): Bootstrap 3 to 4

 Invaluable page here:

https://www.mytecbits.com/microsoft/dot-net/how-to-add-bootstrap-in-asp-net#WebFormsNuGet

So couple things: 

1. Popper, how to get that included properly

2. The nav bar from the template is for BS3. Won't work with BS4.

Here's how the nav bar from template looks with BS4:

For Popper:

Go to Site.Master file and add the reference to popper.js either directly or by using BundleConfig and ScriptReference. (NOTE: Popper.js is needed only if you are using tooltips, popovers or dropdowns in bootstrap).

(Using Bootstrap 4.6.0)

Solved by adding the following to ScriptManager reference in Site.Master:

 <asp:scriptReference Path="~/Scripts/umd/popper.min.js" />

For the nav bar, here's the old code you need to replace in Site.Master:

<div class="navbar navbar-inverse navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" runat="server" href="~/">Application name</a>

                </div>

                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">

                        <li><a runat="server" href="~/">Home</a></li>

                        <li><a runat="server" href="~/About">About</a></li>

                        <li><a runat="server" href="~/Contact">Contact</a></li>

                    </ul>

                    <asp:LoginView runat="server" ViewStateMode="Disabled">

                        <AnonymousTemplate>

                            <ul class="nav navbar-nav navbar-right">

                                <li><a runat="server" href="~/Account/Register">Register</a></li>

                                <li><a runat="server" href="~/Account/Login">Log in</a></li>

                            </ul>

                        </AnonymousTemplate>

                        <LoggedInTemplate>

                            <ul class="nav navbar-nav navbar-right">

                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>

                                <li>

                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />

                                </li>

                            </ul>

                        </LoggedInTemplate>

                    </asp:LoginView>

                </div>

            </div>

        </div>

Replace with:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

<a class="navbar-brand" href="#">My Web Site</a>

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div id="navbar" class="navbar-collapse collapse">

<ul class="navbar-nav mr-auto">

<li class="nav-item active"><a class="nav-link" href="/Default.aspx">Home</a></li>

<li class="nav-item"><a class="nav-link" href="#about">About</a></li>

<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown04″>Dropdown <span class="caret"></span></a>

<div class="dropdown-menu" aria-labelledby="dropdown04″>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav>

=============

Here is the one you'd use if you have Accounts in your template:

        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

            <a class="navbar-brand" href="#">My Web Site</a>

            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div id="navbar" class="navbar-collapse collapse">

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item active"><a class="nav-link" href="/Default.aspx">Home</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>

                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>

                    <li class="nav-item">Login stuff to go here</li>

                    <asp:LoginView runat="server" ViewStateMode="Disabled">

                        <AnonymousTemplate>

                            <li class="nav-item"><a class="nav-link" runat="server" href="~/Account/Register">Register</a></li>

                            <li class="nav-item"><a class="nav-link" runat="server" href="~/Account/Login">Log in</a></li>

                        </AnonymousTemplate>

                        <LoggedInTemplate>

                            <li class="nav-item"><a class="nav-link" runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>

                            <li class="nav-item">

                                <asp:LoginStatus class="nav-link" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />

                            </li>

                        </LoggedInTemplate>

                    </asp:LoginView>

                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown04″">Dropdown <span class="caret"></span></a>

                        <div class="dropdown-menu" aria-labelledby="dropdown04″">

                            <a class="dropdown-item" href="#">Action</a>

                            <a class="dropdown-item" href="#">Another action</a>

                            <a class="dropdown-item" href="#">Something else here</a>

                        </div>

                    </li>

                </ul>

            </div>

        </nav>