Installing Bootstrap 5 in ASP.NET MVC web app on .NET 4.8

Question

I am trying to update an ASP.NET MVC app on .NET 4.8 to use Bootstrap 5.1.

I followed this steps:

Generate an ASP.NET Web Application (.NET Framework) application.
Update Bootstrap using NuGet Package Manager from version 3.4.1 to version 5.1.3
Installed popperjs/[email protected] using Add/Client-Side Library / jsdelivr
Create a ScriptBundle to popperjs/[email protected]
Change _Layout.cshtml

BundleConfig class:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        .....

        bundles.Add(new ScriptBundle("~/bundles/popperCore").Include(
                    "~/lib/popperjs/core/dist/cjs/popper.min.js"));

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

        ......
    }
}

OLD _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <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>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

NEW _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - DosMy ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            <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">@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>
    </nav>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

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

    @RenderSection("scripts", required: false)
</body>
</html>

with bundles, I get this error message:

System.NullReferenceException: Object reference not set to an instance of an object

If I use bootstrap.bundle.min.js cdn, it works fine.

<!DOCTYPE html>
<html>
<head>
    ....
</head>
<body>
    ....

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    @RenderSection("scripts", required: false)
</body>
</html>

If I used popper/core and bootstrap.min.js cdn it does NOT work.

<!DOCTYPE html>
<html>
<head>
    ....
</head>
<body>
    ....

       
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

    @RenderSection("scripts", required: false)
</body>
</html>

I don't know why it is not working with bundles? And how to solve this problem?

stackoverflow.com/questions/68251763/…

user2217421
– user2217421

2022-07-12 19:39:23 +00:00
Commented Jul 12, 2022 at 19:39 — user2217421
– user2217421, Commented Jul 12, 2022 at 19:39

Abdullah Mohmmed · Accepted Answer · 2022-07-31 15:25:03Z

4

To solve the problem of updating Bootstrap 5 with MVC 5 you have to hide

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

and add

<script src="~/Scripts/bootstrap.bundle.min.js"></script>

in layout

answered Jul 31, 2022 at 15:25

Abdullah Mohmmed

413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Conan KLOP · Accepted Answer · 2022-08-02 02:33:50Z

1

Can you try change:

BundleConfig class:

bundles.Add(new Bundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.bundle.min.js",                      
                      "..."));

I try it and done with Bootstrap 5

answered Aug 2, 2022 at 2:33

Conan KLOP

234 bronze badges

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

display-name unset Feb 21 at 3:11

Don't put <stuff>.min.js. BundleConfig will select the min file is it exists when building for Release configuration. "For ASP.NET MVC 4, this means with a debug configuration, the file jquery-1.7.1.js will be added to the bundle. In a release configuration, jquery-1.7.1.min.js will be added" from: learn.microsoft.com/en-us/aspnet/mvc/overview/performance/…

Collectives™ on Stack Overflow

Installing Bootstrap 5 in ASP.NET MVC web app on .NET 4.8

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related