Updating ASP.NET Core Identity to use Bootstrap 4

This article shows how to update the default Identity Pages template to use Bootstrap 4. You need to scaffold the views into the project, and change the layouts and the views to use the new Bootstrap 4 classes and javascript. The base project is built using Webpack and npm. Bootstrap 4 is loaded from npm, unless using a CDN for production.

Code: https://github.com/damienbod/AspNetCorePagesWebpack

Create a new web application and add the Individual User accounts.

Scaffold the Identity UI views to the project. This blog explains how:

How to Scaffold Identity UI in ASP.NET Core 2.1

Switch the build to Webpack and npm and import Bootstrap 4.

You could do it like this:

An ASP.NET Core Razor Pages Bootstrap 4 Application using Webpack, Typescript, and npm

Or just import the the Bootstrap 4 stuff directly and remove the Bootstrap 3 stuff from the layout.

Now the Identity views need to be updated to use the Bootstrap 4 classes and scripts.

Change the base Layout in the Areas/Identity/Pages/Account/Manage/_Layout.cshtml file. The default layout must be used here, and not the hidden _Layout from the Identity package.

@{ 
    Layout = "/Pages/Shared/_Layout.cshtml";
}

<h2>Manage your account</h2>

<div>
    <h4>Change your account settings</h4>
    <hr />
    <div class="row">
        <div class="col-md-3">
            <partial name="_ManageNav" />
        </div>
        <div class="col-md-9">
            @RenderBody()
        </div>
    </div>
</div>

@section Scripts {
    @RenderSection("Scripts", required: false)
}

Update all the views to use the new Bootstrap 4 classes. For example the nav component classes have changed.

Here is the changed _ManageNav.cshtml view:

@inject SignInManager<IdentityUser> SignInManager
@{
    var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
}
<nav class="navbar navbar-light">
    <ul class="mr-auto navbar-nav">
        <li class="nav-item @ManageNavPages.IndexNavClass(ViewContext)"><a class="nav-link" asp-page="./Index">Profile</a></li>
        <li class="nav-item @ManageNavPages.ChangePasswordNavClass(ViewContext)"><a class="nav-link" id="change-password" asp-page="./ChangePassword">Password</a></li>
        @if (hasExternalLogins)
        {
            <li class="nav-item @ManageNavPages.ExternalLoginsNavClass(ViewContext)"><a class="nav-link" id="external-login" asp-page="./ExternalLogins">External logins</a></li>
        }
        <li class="nav-item @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)"><a class="nav-link" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
        <li class="nav-item @ManageNavPages.PersonalDataNavClass(ViewContext)"><a class="nav-link" asp-page="./PersonalData">Personal data</a></li>
    </ul>
</nav>

Also remove the Bootstrap 3 stuff from the _ValidationScriptsPartial.cshtml in the Identity Area.

And now your set.