Upgrade Blazor to Bootstrap 5.

framework/src/Volo.Abp.AspNetCore.Components.Server.Theming/Bundling/BlazorGlobalScriptContributor.cs

@@ -9,7 +9,7 @@ namespace Volo.Abp.AspNetCore.Components.Server.Theming.Bundling
         {
             context.Files.AddIfNotContains("/_framework/blazor.server.js");
             context.Files.AddIfNotContains("/_content/Blazorise/blazorise.js");
-            context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap/blazorise.bootstrap.js");
+            context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap5/blazorise.bootstrap5.js");
             context.Files.AddIfNotContains("/_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js");
         }
     }

framework/src/Volo.Abp.AspNetCore.Components.Server.Theming/Bundling/BlazorGlobalStyleContributor.cs

@@ -15,7 +15,7 @@ namespace Volo.Abp.AspNetCore.Components.Server.Theming.Bundling
         public override void ConfigureBundle(BundleConfigurationContext context)
         {
             context.Files.AddIfNotContains("/_content/Blazorise/blazorise.css");
-            context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap/blazorise.bootstrap.css");
+            context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
             context.Files.AddIfNotContains("/_content/Blazorise.Snackbar/blazorise.snackbar.css");
         }
     }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/ComponentsComponentsBundleContributor.cs

@@ -8,7 +8,7 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly.Theming
         {
             context.Add("_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js");
             context.Add("_content/Blazorise/blazorise.js");
-            context.Add("_content/Blazorise.Bootstrap/blazorise.bootstrap.js");
+            context.Add("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.js");
             context.Add("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js");
         }
 
@@ -25,7 +25,7 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly.Theming
             
             context.Add("_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css");
             context.Add("_content/Blazorise/blazorise.css");
-            context.Add("_content/Blazorise.Bootstrap/blazorise.bootstrap.css");
+            context.Add("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
             context.Add("_content/Blazorise.Snackbar/blazorise.snackbar.css");
         }
     }

framework/src/Volo.Abp.BlazoriseUI/AbpCrudPageBase.cs

@@ -307,8 +307,8 @@ namespace Volo.Abp.BlazoriseUI
         protected virtual async Task OnDataGridReadAsync(DataGridReadDataEventArgs<TListViewModel> e)
         {
             CurrentSorting = e.Columns
-                .Where(c => c.Direction != SortDirection.None)
+                .Where(c => c.SortDirection != SortDirection.None)
-                .Select(c => c.Field + (c.Direction == SortDirection.Descending ? " DESC" : ""))
+                .Select(c => c.Field + (c.SortDirection == SortDirection.Descending ? " DESC" : ""))
                 .JoinAsString(",");
             CurrentPage = e.Page;
 
@@ -321,7 +321,10 @@ namespace Volo.Abp.BlazoriseUI
         {
             try
             {
-                CreateValidationsRef?.ClearAll();
+                if (CreateValidationsRef != null)
+                {
+                    await CreateValidationsRef.ClearAll();
+                }
 
                 await CheckCreatePolicyAsync();
 
@@ -329,10 +332,14 @@ namespace Volo.Abp.BlazoriseUI
 
                 // Mapper will not notify Blazor that binded values are changed
                 // so we need to notify it manually by calling StateHasChanged
-                await InvokeAsync(() =>
+                await InvokeAsync(async () =>
                 {
                     StateHasChanged();
-                    CreateModal?.Show();
+                    if (CreateModal != null)
+                    {
+                        await CreateModal.Show();
+                    }
+
                 });
             }
             catch (Exception ex)
@@ -356,7 +363,10 @@ namespace Volo.Abp.BlazoriseUI
         {
             try
             {
-                EditValidationsRef?.ClearAll();
+                if (EditValidationsRef != null)
+                {
+                    await EditValidationsRef.ClearAll();
+                }
 
                 await CheckUpdatePolicyAsync();
 
@@ -365,10 +375,13 @@ namespace Volo.Abp.BlazoriseUI
                 EditingEntityId = entity.Id;
                 EditingEntity = MapToEditingEntity(entityDto);
 
-                await InvokeAsync(() =>
+                await InvokeAsync(async () =>
                 {
                     StateHasChanged();
-                    EditModal?.Show();
+                    if (EditModal != null)
+                    {
+                        await EditModal.Show();
+                    }
                 });
             }
             catch (Exception ex)
@@ -418,7 +431,12 @@ namespace Volo.Abp.BlazoriseUI
         {
             try
             {
-                if (CreateValidationsRef?.ValidateAll() ?? true)
+                var validate = true;
+                if (CreateValidationsRef != null)
+                {
+                    validate = await CreateValidationsRef.ValidateAll();
+                }
+                if (validate)
                 {
                     await OnCreatingEntityAsync();
 
@@ -451,7 +469,12 @@ namespace Volo.Abp.BlazoriseUI
         {
             try
             {
-                if (EditValidationsRef?.ValidateAll() ?? true)
+                var validate = true;
+                if (EditValidationsRef != null)
+                {
+                    validate = await EditValidationsRef.ValidateAll();
+                }
+                if (validate)
                 {
                     await OnUpdatingEntityAsync();
 

framework/src/Volo.Abp.BlazoriseUI/Components/ToolbarButton.razor

@@ -1,7 +1,7 @@
 <Button Color="@Color" Clicked="@Clicked" Disabled="@Disabled">
     @if (Icon != null)
     {
-        <Icon Name="IconName.Add" Class="mr-1"></Icon>
+        <Icon Name="IconName.Add" Class="me-1"></Icon>
     }
     @Text
 </Button>

framework/src/Volo.Abp.BlazoriseUI/Components/UiMessageAlert.razor.cs

@@ -113,7 +113,7 @@ namespace Volo.Abp.BlazoriseUI.Components
             {
                 await Okayed.InvokeAsync(null);
 
-                ModalRef.Hide();
+                await ModalRef.Hide();
             });
         }
 
@@ -121,7 +121,7 @@ namespace Volo.Abp.BlazoriseUI.Components
         {
             await InvokeAsync(async () =>
             {
-                ModalRef.Hide();
+                await ModalRef.Hide();
 
                 if (IsConfirmation && Callback != null)
                 {
@@ -136,7 +136,7 @@ namespace Volo.Abp.BlazoriseUI.Components
         {
             await InvokeAsync(async () =>
             {
-                ModalRef.Hide();
+                await ModalRef.Hide();
 
                 if (IsConfirmation && Callback != null)
                 {

framework/src/Volo.Abp.BlazoriseUI/Volo.Abp.BlazoriseUI.csproj

@@ -14,10 +14,10 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Blazorise" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise" Version="0.9.5-preview2.1" />
-        <PackageReference Include="Blazorise.DataGrid" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise.DataGrid" Version="0.9.5-preview2.1" />
-        <PackageReference Include="Blazorise.Snackbar" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise.Snackbar" Version="0.9.5-preview2.1" />
-        <PackageReference Include="Blazorise.Components" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise.Components" Version="0.9.5-preview2.1" />
     </ItemGroup>
 
 </Project>

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor

@@ -15,7 +15,7 @@
                 {
                     if (MenuItem.Icon.StartsWith("fa"))
                     {
-                        <i class="@MenuItem.Icon mr-1"></i>
+                        <i class="@MenuItem.Icon me-1"></i>
                     }
                 }
                 @MenuItem.DisplayName
@@ -32,7 +32,7 @@ else
                 {
                     if (MenuItem.Icon.StartsWith("fa"))
                     {
-                        <i class="@MenuItem.Icon mr-1"></i>
+                        <i class="@MenuItem.Icon me-1"></i>
                     }
                 }
                 @MenuItem.DisplayName

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor

@@ -12,7 +12,7 @@
         <a class="dropdown-item @cssClass @disabled" href="@url" target="@MenuItem.Target" id="@elementId">
             @if (MenuItem.Icon != null)
             {
-                <i class="@MenuItem.Icon mr-1"></i>
+                <i class="@MenuItem.Icon me-1"></i>
             }
             <span>
                 @MenuItem.DisplayName
@@ -27,7 +27,7 @@ else
                 aria-haspopup="true" aria-expanded="false">
             @if (MenuItem.Icon != null)
             {
-                <i class="@MenuItem.Icon mr-1"></i>
+                <i class="@MenuItem.Icon me-1"></i>
             }
             <span>
                 @MenuItem.DisplayName

modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml

@@ -162,19 +162,19 @@ public class DynamicFormsModel : PageModel
             <option selected="selected" value="3">Coupe</option>
         </select>
     </div>
-    <div class="custom-control custom-radio custom-control-inline">
+    <div class="custom-control custom-control-inline">
         <input type="radio" id="MyDetailedModel.YourCarTypeRadio0" name="MyDetailedModel.YourCarType" value="0" checked="checked" class="custom-control-input">
         <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio0">Sedan</label>
     </div>
-    <div class="custom-control custom-radio custom-control-inline">
+    <div class="custom-control custom-control-inline">
         <input type="radio" id="MyDetailedModel.YourCarTypeRadio1" name="MyDetailedModel.YourCarType" value="1" class="custom-control-input">
         <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio1">Hatchback</label>
     </div>
-    <div class="custom-control custom-radio custom-control-inline">
+    <div class="custom-control custom-control-inline">
         <input type="radio" id="MyDetailedModel.YourCarTypeRadio2" name="MyDetailedModel.YourCarType" value="2" class="custom-control-input">
         <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio2">StationWagon</label>
     </div>
-    <div class="custom-control custom-radio custom-control-inline">
+    <div class="custom-control custom-control-inline">
         <input type="radio" id="MyDetailedModel.YourCarTypeRadio3" name="MyDetailedModel.YourCarType" value="3" class="custom-control-input">
         <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio3">Coupe</label>
     </div>

modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml

@@ -390,19 +390,19 @@
             <abp-tab title="Rendered">
                 <pre><code>
 &lt;div&gt;
-    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+    &lt;div class=&quot;custom-control custom-control-inline&quot;&gt;
         &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioNY&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;NY&quot; class=&quot;custom-control-input&quot;&gt;
         &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioNY&quot;&gt;New York&lt;/label&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+    &lt;div class=&quot;custom-control custom-control-inline&quot;&gt;
         &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioLDN&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;LDN&quot; class=&quot;custom-control-input&quot;&gt;
         &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioLDN&quot;&gt;London&lt;/label&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+    &lt;div class=&quot;custom-control custom-control-inline&quot;&gt;
         &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioIST&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;IST&quot; checked=&quot;checked&quot; class=&quot;custom-control-input&quot;&gt;
         &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioIST&quot;&gt;Istanbul&lt;/label&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+    &lt;div class=&quot;custom-control custom-control-inline&quot;&gt;
         &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioMOS&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;MOS&quot; class=&quot;custom-control-input&quot;&gt;
         &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioMOS&quot;&gt;Moscow&lt;/label&gt;
     &lt;/div&gt;

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Edit.cshtml

@@ -72,7 +72,7 @@
                             </div>
 
                             <div class="actions d-flex">
-                                <div class="text-muted editor-info d-none d-lg-block mr-auto">
+                                <div class="text-muted editor-info d-none d-lg-block me-auto">
 
                                     <div>
                                         <svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/New.cshtml

@@ -67,7 +67,7 @@
                             </div>
 
                             <div class="actions d-flex">
-                                <div class="text-muted editor-info d-none d-lg-block mr-auto">
+                                <div class="text-muted editor-info d-none d-lg-block me-auto">
 
                                     <div>
                                         <svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">

modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/Index.cshtml

@@ -40,7 +40,7 @@
                             <input type="text"
                                    id="Name"
                                    name="Name"
-                                   class="form-control mr-sm-2">
+                                   class="form-control me-sm-2">
                         </div>
                     </div>
 
@@ -51,7 +51,7 @@
                             <input type="text"
                                    id="Version"
                                    name="Version"
-                                   class="form-control mr-sm-2">
+                                   class="form-control me-sm-2">
                         </div>
                     </div>
 
@@ -62,7 +62,7 @@
                             <input type="text"
                                    id="LanguageCode"
                                    name="LanguageCode"
-                                   class="form-control mr-sm-2">
+                                   class="form-control me-sm-2">
                         </div>
                     </div>
 
@@ -74,7 +74,7 @@
                             <input type="text"
                                    id="FileName"
                                    name="FileName"
-                                   class="form-control mr-sm-2">
+                                   class="form-control me-sm-2">
                         </div>
                     </div>
 
@@ -85,7 +85,7 @@
                             <input type="text"
                                    id="Format"
                                    name="Format"
-                                   class="form-control mr-sm-2">
+                                   class="form-control me-sm-2">
                         </div>
                     </div>
 

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/MyCompanyName.MyProjectName.Blazor.Server.Tiered.csproj

@@ -13,8 +13,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Bootstrap5" Version="0.9.5-preview2.1" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5-preview2.1" />
     <PackageReference Include="Serilog.AspNetCore" Version="4.1.0" />
     <PackageReference Include="Serilog.Sinks.Async" Version="1.4.0" />
     <PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="6.0.0-rc.*" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/MyProjectNameBlazorModule.cs

@@ -1,7 +1,7 @@
 using System;
 using System.IO;
 using System.Net.Http;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.DataProtection;
@@ -243,7 +243,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Server.Tiered
         private void ConfigureBlazorise(ServiceConfigurationContext context)
         {
             context.Services
-                .AddBootstrapProviders()
+                .AddBootstrap5Providers()
                 .AddFontAwesomeIcons();
         }
 

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Pages/Index.razor

@@ -34,14 +34,14 @@
                         <a href="https://docs.abp.io/en/abp/latest?ref=tmpl" target="_blank" class="btn btn-link px-1">See Documents <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> Samples</h5>
                         <p>See the example projects built with the ABP Framework.</p>
                         <a href="https://docs.abp.io/en/abp/latest/Samples/Index?ref=tmpl" target="_blank" class="btn btn-link px-1">All samples <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-users text-secondary d-block my-3 fa-2x"></i> ABP Community</h5>
                         <p>Get involved with a vibrant community and become a contributor.</p>
@@ -58,7 +58,7 @@
                         <a href="https://blog.abp.io/abp?ref=tmpl" target="_blank" class="btn btn-link px-1">See Blog <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-github text-secondary d-block my-3 fa-2x"></i> Github</h5>
                         <p>Do you love the ABP Framework? Please <strong>give a star</strong> to support it!</p>
@@ -67,7 +67,7 @@
 
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-stack-overflow text-secondary d-block my-3 fa-2x"></i> Stackoverflow</h5>
                         <p>See answers to previously asked questions or ask a new one.</p>
@@ -100,7 +100,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Application Modules
@@ -108,7 +108,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Developer<br />Tools
@@ -116,7 +116,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> UI<br /> Themes
@@ -124,7 +124,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Premium Support
@@ -132,7 +132,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Additional Services

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/MyCompanyName.MyProjectName.Blazor.Server.csproj

@@ -13,8 +13,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Bootstrap5" Version="0.9.5-preview2.1" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5-preview2.1" />
     <PackageReference Include="Serilog.AspNetCore" Version="4.1.0" />
     <PackageReference Include="Serilog.Sinks.Async" Version="1.4.0" />
   </ItemGroup>

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/MyProjectNameBlazorModule.cs

@@ -1,7 +1,7 @@
 using System;
 using System.IO;
 using System.Net.Http;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
@@ -216,7 +216,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Server
         private void ConfigureBlazorise(ServiceConfigurationContext context)
         {
             context.Services
-                .AddBootstrapProviders()
+                .AddBootstrap5Providers()
                 .AddFontAwesomeIcons();
         }
 

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Pages/Index.razor

@@ -34,14 +34,14 @@
                         <a href="https://docs.abp.io/en/abp/latest?ref=tmpl" target="_blank" class="btn btn-link px-1">See Documents <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> Samples</h5>
                         <p>See the example projects built with the ABP Framework.</p>
                         <a href="https://docs.abp.io/en/abp/latest/Samples/Index?ref=tmpl" target="_blank" class="btn btn-link px-1">All samples <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-users text-secondary d-block my-3 fa-2x"></i> ABP Community</h5>
                         <p>Get involved with a vibrant community and become a contributor.</p>
@@ -58,7 +58,7 @@
                         <a href="https://blog.abp.io/abp?ref=tmpl" target="_blank" class="btn btn-link px-1">See Blog <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-github text-secondary d-block my-3 fa-2x"></i> Github</h5>
                         <p>Do you love the ABP Framework? Please <strong>give a star</strong> to support it!</p>
@@ -67,7 +67,7 @@
 
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-stack-overflow text-secondary d-block my-3 fa-2x"></i> Stackoverflow</h5>
                         <p>See answers to previously asked questions or ask a new one.</p>
@@ -100,7 +100,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Application Modules
@@ -108,7 +108,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Developer<br />Tools
@@ -116,7 +116,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> UI<br /> Themes
@@ -124,7 +124,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Premium Support
@@ -132,7 +132,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Additional Services

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/MyCompanyName.MyProjectName.Blazor.csproj

@@ -8,8 +8,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Bootstrap5" Version="0.9.5-preview2.1" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5-preview2.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0-rc.*" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0-rc.*" />
   </ItemGroup>

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/MyProjectNameBlazorModule.cs

@@ -1,6 +1,6 @@
 using System;
 using System.Net.Http;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using IdentityModel;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -63,7 +63,7 @@ namespace MyCompanyName.MyProjectName.Blazor
         private void ConfigureBlazorise(ServiceConfigurationContext context)
         {
             context.Services
-                .AddBootstrapProviders()
+                .AddBootstrap5Providers()
                 .AddFontAwesomeIcons();
         }
 

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/Index.razor

@@ -36,14 +36,14 @@
                         <a href="https://docs.abp.io/en/abp/latest?ref=tmpl" target="_blank" class="btn btn-link px-1">See Documents <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> Samples</h5>
                         <p>See the example projects built with the ABP Framework.</p>
                         <a href="https://docs.abp.io/en/abp/latest/Samples/Index?ref=tmpl" target="_blank" class="btn btn-link px-1">All samples <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fas fa-users text-secondary d-block my-3 fa-2x"></i> ABP Community</h5>
                         <p>Get involved with a vibrant community and become a contributor.</p>
@@ -60,7 +60,7 @@
                         <a href="https://blog.abp.io/abp?ref=tmpl" target="_blank" class="btn btn-link px-1">See Blog <i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-github text-secondary d-block my-3 fa-2x"></i> Github</h5>
                         <p>Do you love the ABP Framework? Please <strong>give a star</strong> to support it!</p>
@@ -69,7 +69,7 @@
 
                     </div>
                 </div>
-                <div class="col-lg-4 border-left">
+                <div class="col-lg-4 border-start">
                     <div class="p-4">
                         <h5 class="mb-3"><i class="fab fa-stack-overflow text-secondary d-block my-3 fa-2x"></i> Stackoverflow</h5>
                         <p>See answers to previously asked questions or ask a new one.</p>
@@ -102,7 +102,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Application Modules
@@ -110,7 +110,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Developer<br />Tools
@@ -118,7 +118,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> UI<br /> Themes
@@ -126,7 +126,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Premium Support
@@ -134,7 +134,7 @@
                         </h6>
                     </div>
                 </div>
-                <div class="col-lg-2 border-left">
+                <div class="col-lg-2 border-start">
                     <div class="p-3">
                         <h6>
                             <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Additional Services

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html

@@ -8,7 +8,7 @@
     <base href="/" />
 
     <!--ABP:Styles-->
-    <link href="global.css?_v=637673162022921650" rel="stylesheet"/>
+    <link href="global.css?_v=637680004550925458" rel="stylesheet"/>
     <link href="main.css" rel="stylesheet"/>
     <!--/ABP:Styles-->
     <link href="MyCompanyName.MyProjectName.Blazor.styles.css" rel="stylesheet"/>
@@ -23,7 +23,7 @@
     </div>
 
     <!--ABP:Scripts-->
-    <script src="global.js?_v=637673162026021646"></script>
+    <script src="global.js?_v=637680004553770785"></script>
     <!--/ABP:Scripts-->
 
 </body>

templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyCompanyName.MyProjectName.Blazor.Host.csproj

@@ -8,8 +8,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Bootstrap5" Version="0.9.5-preview2.1" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.4.1" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5-preview2.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly"  Version="6.0.0-rc.*" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0-rc.*" />
   </ItemGroup>

templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyProjectNameBlazorHostModule.cs

@@ -1,6 +1,6 @@
 using System;
 using System.Net.Http;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.Configuration;
@@ -64,7 +64,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Host
         private void ConfigureBlazorise(ServiceConfigurationContext context)
         {
             context.Services
-                .AddBootstrapProviders()
+                .AddBootstrap5Providers()
                 .AddFontAwesomeIcons();
         }
 

templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html

@@ -8,7 +8,7 @@
     <base href="/" />
 
     <!--ABP:Styles-->
-    <link href="global.css?_v=637673256943327850" rel="stylesheet"/>
+    <link href="global.css?_v=637680005034492561" rel="stylesheet"/>
     <link href="main.css" rel="stylesheet"/>
     <!--/ABP:Styles-->
 </head>
@@ -22,7 +22,7 @@
 </div>
 
 <!--ABP:Scripts-->
-    <script src="global.js?_v=637673256946279677"></script>
+    <script src="global.js?_v=637680005037393828"></script>
     <!--/ABP:Scripts-->
 
 </body>

templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Server.Host/MyCompanyName.MyProjectName.Blazor.Server.Host.csproj

@@ -12,8 +12,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Blazorise.Bootstrap" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise.Bootstrap5" Version="0.9.5-preview2.1" />
-        <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.4.1" />
+        <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5-preview2.1" />
         <PackageReference Include="Serilog.AspNetCore" Version="4.1.0" />
         <PackageReference Include="Serilog.Sinks.Async" Version="1.4.0" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.0-rc.*" />

templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Server.Host/MyProjectNameBlazorHostModule.cs

@@ -1,7 +1,7 @@
 using System;
 using System.IO;
 using System.Net.Http;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.Extensions.DependencyInjection;
@@ -189,7 +189,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Server.Host
             });
 
             context.Services
-                .AddBootstrapProviders()
+                .AddBootstrap5Providers()
                 .AddFontAwesomeIcons();
 
             Configure<AbpNavigationOptions>(options =>