Not able to install bootstrap 4 (beta) nuget package to .Net MVC (.Net version 4.6.2)

Question

I am not able to install bootstrap 4(beta) to my MVC project. To be precise popper.js nuget dependency is failing to install. Please let me know any possible way to do it(bower

Answer 1

The Popper.js NuGet package has been broken until version 1.12.2.
Bootstrap is still requiring the version 1.11.x, which is, unfortunately, broken.

You should wait for Bootstrap to close this issue:
https://github.com/twbs/bootstrap/issues/23622

meanwhile you can follow the suggestion of Rob Quincey.

Answer 2

Again, not a fix, but similar to the fix by @Alex.

I resolved it by installing them separately using NuGet, so first installing popperjs (just search for popper in the NuGet package manager) then installing Bootstrap 4. It seems to only hit the above error when it needs to download it as a dependency rather than standalone. Very odd.

Answer 3

I managed to get around this problem by downloading the latest (1.12.3 at the time of writing) popper.js nuget package before updating to bootstrap 4.0.

Then in the bundles.config I added the popper js like this

bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                      "~/Scripts/umd/popper.js"));

The umd version is the only one that worked for me the others gave an console error of

Unrecognised Token Export

Just make sure to include the popper js file before the bootstrap one.

@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/bootstrap")

I also noticed that this then broke the majority of the auto produced template as it's based on previous versions of bootstrap. The navbar almost completely vanishes. I managed to fix mine by replacing it with the following, but this doesn't include any items in the mobile menu.

<div class="navbar navbar-expand-lg navbar-dark bg-dark">   
        <a class="navbar-brand" href="#">My Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</li>
            </ul>                
        </div>        
    </div>

I know this question has a few good answers but this was the full solution that worked for me so I thought I'd share it in the hope that it spares someone a bit of time in the future.