Bootstrap in ASP.NET Core MVC

Question

I am creating an ASP.NET Core MVC app. It has on default bootstrap files in the wwwroot folder. My _Layout file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication3</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/WebApplication3.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication3</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - WebApplication3 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Then this is my Index view:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal window
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Example modal window</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Some information
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Button has bootstrap style, but when I clicked on button 'Open modal window' changes nothing.

Why does my modal window not work? Does Bootstrap exist in my app?

Do you get any errors in the JavaScript console in your browser? — mason, Commented Apr 9 at 19:32
@mason No. Just - unload event listeners are deprecated and will be removed. — Fer, Commented Apr 9 at 19:44
@mason I noticed href and src are red in these code <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/> <script src="~/lib/jquery/dist/jquery.min.js"> </script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>. Could be problem in this? But this code VS gives on default — Fer, Commented Apr 9 at 19:56
Did you go look and see if the files are at that spot? What happens if you try to browse to those URL's? Do you see the expected CSS or JS? — mason, Commented Apr 9 at 19:58
@mason These files are in the appropriate folders in my computer. — Fer, Commented Apr 9 at 20:09

Dave B · Accepted Answer · 2025-04-17 17:08:19Z

It's possible that the sample code your using for the modal dialog is out-of-sync with the version of Bootstrap installed with the ASP.NET MVC template you're using.

I can replicate your scenario using your sample HTML with the latest MVC template. The MVC template on my machine is using Bootstrap v5.1.0 while your sample HTML is from a v4 sample.

I copied the sample button and modal dialog HTML from the v5.1.0 Bootstrap site, and the modal dialog was displayed correctly.

Per the <script> tag in your sample _Layout.cshtml file, navigate to the bootstrap.bundle.min.js file in your code editor.

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

Open the file and check the version of Bootstrap in your solution. The version on my installation of Visual Studio is v5.1.0.

I copied the demo code for launching a modal dialog from https://getbootstrap.com/docs/5.1/components/modal/#live-demo and it worked with your _Layout.cshtml file and the code sample from v5.1 in the Index.cshtml file.

Collectives™ on Stack Overflow

Bootstrap in ASP.NET Core MVC

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related