How to install and reference bootstrap version 5 in razor pages app

Viewed 2690

I suspect this is very simple, but I searched and didn't find and/or didn't understand. I'm working on a Razor Pages app to learn web dev, and I'm trying to put a navbar in the _Layout.cshtml, but while the default declaration of it works fine, if I change it to "navbar-inverse" bootstrap class then it doesn't work any more. I thought if it might be the version of bootstrap, and I then installed the latest (bootstrap 5) as a Nuget package. What I would need now is how to reference the new version 5 of bootstrap in my _Layout.cshtml file (<link rel="..." and <script src="...") and I want to reference from the file system (or whatever it is that works). Also I would like you to confirm if actually the problem in my code is because of the bootstrap old version. The navbar with "navbar-inverse" class doesn't work and before with a default class it did.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebAppPersonas</title>
    <link rel="stylesheet" href="~/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
    <script src="~/js/bootstrap.js"> </script>
    @RenderSection("Head", false)
</head>
<body>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <header>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/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; 2021 - WebAppPersonas - <a asp-area="" asp-page="/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>

Thank you in advance Pablo

3 Answers

When using bootstrap from nuget, you can use the Solution Explorer to see, where the nuget files are being located. Click on Dependencies > Packages > bootstrap > Content Files.

Under there you should see links like in the image below: any/any/wwwroot/css/bootstrap.css. Since asp.net core stores and looks for static files in the wwwroot folder as the root folder per default, your css link would look like this:

<link rel="stylesheet" href="~/css/bootstrap.css" />

Analog for the js files:

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

enter image description here

If you right click on the project and choose Add from the context menu, you can then choose to Add a Client Side Library.

From there you can choose the Provider and library. When installed they will be available in the wwwroot directory for the project.

I use js and css as the following showa,it can work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebAppPersonas</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="~/css/site.css" />
    @RenderSection("Head", false)
</head>
<body>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <header>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a></li>
                    <li><a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a></li>
                </ul>
            </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; 2021 - WebAppPersonas - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

result: enter image description here

Related