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

Before installing the package using NuGet, expand "Options" and change the "Dependency Behavior" to "Highest". Now when you install the package the latest popper.js will get installed first allowing bootstrap to get installed as well.

This prevented me from having to install popper separately.

Answer 2

For uses of ASP.NET Webforms:

I've created a new Project with preinstalled Packages (Bootstrap, Popper, jQuery), updated them to the newest version and did:

1. add to App_Start/BundleConfig.cs

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

2. Add to Header (Master Page)

   <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/popper") %> <%: Scripts.Render("~/bundles/bootstrap")%> </asp:PlaceHolder>

Answer 3

I was finally able to get Bootstrap 4-Beta working by doing the following:

1.) Install the popper.js NuGet Package V1.12.3

2.) Install Bootstrap4-beta NuGet Package

3.) Update your BundleConfig.cs to include the following: Note the popper.js path

bundles.Add(new ScriptBundle("~/Scrpts/Bootstrap").Include(
                             /*** Make sure popper.js is pointing to umd ***/
                             "~/Scripts/umd/popper.js", 
                             "~/Scripts/bootstrap.js",
                             ));

bundles.Add(new StyleBundle("~/CSS/Bootstrap").Include(
                            "~/Content/bootstrap.css"));

For some reason if you try to use the popper.js in the root of the \Scripts folder you will receive the error:

SyntaxError: export declarations may only appear at top level of a module

but the version in the /Scripts/umd seems to work.

Answer 4

Same problem here... I created an issue on GitHub for this: https://github.com/FezVrasta/popper.js/issues/387

Answer 5

You can get around this by manually adding the popper.js package to your packages config.

<package id="popper.js" version="1.11.1" targetFramework="net462" />

Then you can go into the nuget package manager and install normally.

Answer 6

I was not happy with all the files and folders and typescript-related code and NuGet and debugger messages that came with Popper, so I am using CDNs, like so:

@Scripts.Render("~/bundles/jquery")

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

So far it's all worked fine.