diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index a197405837..24fd4e0f54 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,4 +1,4 @@
-<div class="form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
+<div class="mb-3 form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
   <ng-template ngSwitchCase="input">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <input
@@ -18,18 +18,18 @@
   </ng-template>
 
   <ng-template ngSwitchCase="checkbox">
-    <div class="custom-checkbox custom-control" validationTarget>
+    <div class="form-check" validationTarget>
       <input
         #field
         [id]="prop.id"
         [formControlName]="prop.name"
         [abpDisabled]="disabled"
         type="checkbox"
-        class="custom-control-input"
+        class="form-check-input"
       />
       <ng-template
         [ngTemplateOutlet]="label"
-        [ngTemplateOutletContext]="{ $implicit: 'custom-control-label' }"
+        [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
       ></ng-template>
     </div>
   </ng-template>
@@ -41,7 +41,7 @@
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
-      class="custom-select form-control"
+      class="form-select form-control"
     >
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
@@ -60,7 +60,7 @@
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
       multiple="multiple"
-      class="custom-select form-control"
+      class="form-select form-control"
     >
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
@@ -132,7 +132,7 @@
 </div>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes"
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"
     >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
   >
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html
index 6172cacd20..185569a1bc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html
@@ -5,7 +5,7 @@
     aria-haspopup="true"
     ngbDropdownToggle
   >
-    <i [ngClass]="icon" [class.mr-1]="icon"></i>{{ text | abpLocalization }}
+    <i [ngClass]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }}
   </button>
   <div ngbDropdownMenu>
     <ng-container
@@ -33,7 +33,7 @@
       class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
       [class.text-center]="actionList.length === 1"
     >
-      <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+      <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
       <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
       <ng-template #ellipsis>
         <div abpEllipsis>{{ action.text | abpLocalization }}</div>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
index 38be2289d7..bb000c4ebc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
@@ -10,7 +10,7 @@
 
         <ng-template #button>
           <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
-            <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+            <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
             {{ action.text | abpLocalization }}
           </button>
         </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 33e8307824..a80440eb0e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -24,7 +24,7 @@ import {
       (focus)="focus.next($event); abpFocus.next($event)"
       (blur)="blur.next($event); abpBlur.next($event)"
     >
-      <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
+      <i [ngClass]="icon" class="me-1"></i><ng-content></ng-content>
     </button>
   `,
 })
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
index 046e8bb67a..1cd142e1cb 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
@@ -8,7 +8,7 @@
     *ngIf="!hideCloseIcon"
     id="abp-close-button"
     type="button"
-    class="close mr-2"
+    class="close me-2"
     (click)="destroy()"
   >
     <span aria-hidden="true">&times;</span>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index ee0d99b7cb..aa34499e08 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -7,12 +7,10 @@
     <button
       id="abp-modal-close-button"
       type="button"
-      class="close"
+      class="btn-sm btn-close"
       aria-label="Close"
       (click)="modal.dismiss()"
-    >
-      <span aria-hidden="true">&times;</span>
-    </button>
+    ></button>
   </div>
   <div id="abp-modal-body" class="modal-body">
     <ng-container *ngTemplateOutlet="abpBody"></ng-container>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html
index a3a142cc01..0bac9d87da 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html
@@ -1,3 +1,3 @@
-<div class="float-right {{ iconClass }}">
+<div class="float-end {{ iconClass }}">
   <span class="{{ icon }}"></span>
 </div>