Use `data-bs` attribute.

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ModalsDemo/Default.cshtml

@@ -3,7 +3,7 @@
 
 <abp-component-demo-section title="Example" view-path="@ModalsDemoViewComponent.ViewPath">
 
-    <abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
+    <abp-button button-type="Primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</abp-button>
 
     <abp-modal centered="true" size="Large" id="myModal">
         <abp-modal-header title="Modal title"></abp-modal-header>

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

@@ -2,8 +2,8 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4" id="main-navbar" style="min-height: 4rem;">
     <div class="container">
         <Branding />
-        <button @onclick="ToggleCollapse" class="navbar-toggler" type="button" data-toggle="collapse"
-                data-target="#main-navbar-collapse" aria-controls="main-navbar-collapse"
+        <button @onclick="ToggleCollapse" class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#main-navbar-collapse" aria-controls="main-navbar-collapse"
                 aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml

@@ -18,7 +18,7 @@
                     }
                     if (Model.Ratings != null)
                     {
-                        <a href="#" class="text-muted ms-1" data-toggle="modal" data-target="#ratingDetail">
+                        <a href="#" class="text-muted ms-1" data-bs-toggle="modal" data-bs-target="#ratingDetail">
                             <i class="far fa-question-circle"></i>
                         </a>
 
@@ -55,7 +55,7 @@
                 }
                 else
                 {
-                    <span class="my-rating text-dark p-1" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
+                    <span class="my-rating text-dark p-1" data-authenticated="True" data-bs-toggle="popover" data-bs-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
                     <span class="rating-login"></span>
                 }
             </div>

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

@@ -46,7 +46,7 @@
 }
 @if (Model.LoadSuccess)
 {
-    <div class="docs-page" data-spy="scroll" data-target="#docs-sticky-index">
+    <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
         <div class="row justify-content-end">
             <div class="col-md-3 docs-sidebar dark-sidebar">
                 <div class="docs-sidebar-wrapper">
@@ -110,7 +110,7 @@
                                             <div class="input-group">
 
                                                 <span class="input-group-text">
-                                                    <i class="fas fa-code-branch" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
+                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
                                                 </span>
         
 
@@ -131,7 +131,7 @@
                                         <div class="version-select">
                                             <div class="input-group">
                                                 @*<span class="input-group-text">
-                                                            <i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
+                                                            <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
                                                  </span>*@
                                                 <select asp-items="Model.LanguageSelectListItems"
                                                         class="form-control"
@@ -283,7 +283,7 @@
                                 }
                             </div>
 
-                            <div data-spy="scroll" data-target="#docs-sticky-index" data-offset="0">
+                            <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
                                 <article class="docs-body">
 
                                     @if (Model.DocumentLanguageCode != Model.LanguageCode)