diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md
index 6d636d5ecb3..50b90b516dc 100644
--- a/docs/en/Tutorials/Part-2.md
+++ b/docs/en/Tutorials/Part-2.md
@@ -512,7 +512,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
           {%{{{ '::Menu:Books' | abpLocalization }}}%}
         </h5>
       </div>
-      <div class="text-right col col-md-6"></div>
+      <div class="text-end col col-md-6"></div>
     </div>
   </div>
   <div class="card-body">
diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md
index 182ffa40054..24f922cb188 100644
--- a/docs/en/Tutorials/Part-3.md
+++ b/docs/en/Tutorials/Part-3.md
@@ -145,7 +145,7 @@ Open the `Pages/Books/Index.cshtml` and set the content of `abp-card-header` tag
         <abp-column size-md="_6">
             <abp-card-title>@L["Books"]</abp-card-title>
         </abp-column>
-        <abp-column size-md="_6" class="text-right">
+        <abp-column size-md="_6" class="text-end">
             <abp-button id="NewBookButton"
                         text="@L["NewBook"].Value"
                         icon="plus"
@@ -175,7 +175,7 @@ The final content of `Index.cshtml` is shown below:
             <abp-column size-md="_6">
                 <abp-card-title>@L["Books"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 <abp-button id="NewBookButton"
                             text="@L["NewBook"].Value"
                             icon="plus"
@@ -687,10 +687,10 @@ Open `/src/app/book/book.component.html` and make the following changes:
       <div class="col col-md-6">
         <h5 class="card-title">{%{{{ '::Menu:Books' | abpLocalization }}}%}</h5>
       </div>        
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
           
         <!-- Add the "new book" button here -->
-        <div class="text-lg-right pt-2">
+        <div class="text-lg-end pt-2">
           <button id="create" class="btn btn-primary" type="button" (click)="createBook()">
             <i class="fa fa-plus mr-1"></i>
             <span>{%{{{ "::NewBook" | abpLocalization }}}%}</span>
diff --git a/docs/en/Tutorials/Part-5.md b/docs/en/Tutorials/Part-5.md
index 9c2863ca0af..810c79e736b 100644
--- a/docs/en/Tutorials/Part-5.md
+++ b/docs/en/Tutorials/Part-5.md
@@ -227,7 +227,7 @@ Open the `Pages/Books/Index.cshtml` file and change the content as shown below:
             <abp-column size-md="_6">
                 <abp-card-title>@L["Books"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 @if (await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create))
                 {
                     <abp-button id="NewBookButton"
diff --git a/docs/en/Tutorials/Part-9.md b/docs/en/Tutorials/Part-9.md
index 0e271a5e4e4..4e7914eba14 100644
--- a/docs/en/Tutorials/Part-9.md
+++ b/docs/en/Tutorials/Part-9.md
@@ -73,7 +73,7 @@ Create a new razor page, `Index.cshtml` under the `Pages/Authors` folder of the
             <abp-column size-md="_6">
                 <abp-card-title>@L["Authors"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 @if (await AuthorizationService
                     .IsGrantedAsync(BookStorePermissions.Authors.Create))
                 {
@@ -722,8 +722,8 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
           {%{{{ '::Menu:Authors' | abpLocalization }}}%}
         </h5>
       </div>
-      <div class="text-right col col-md-6">
-        <div class="text-lg-right pt-2">
+      <div class="text-end col col-md-6">
+        <div class="text-lg-end pt-2">
           <button *abpPermission="'BookStore.Authors.Create'" id="create" class="btn btn-primary" type="button" (click)="createAuthor()">
             <i class="fa fa-plus mr-1"></i>
             <span>{%{{{ '::NewAuthor' | abpLocalization }}}%}</span>
diff --git a/docs/en/UI/Angular/Component-Replacement.md b/docs/en/UI/Angular/Component-Replacement.md
index b75184c1ed8..1baf7e18bec 100644
--- a/docs/en/UI/Angular/Component-Replacement.md
+++ b/docs/en/UI/Angular/Component-Replacement.md
@@ -227,7 +227,7 @@ Open the generated `routes.component.html` in `src/app/routes` folder and replac
             abpEllipsis="210px"
             [abpEllipsisEnabled]="!smallScreen"
             role="button"
-            class="btn d-block text-left dropdown-toggle"
+            class="btn d-block text-start dropdown-toggle"
           >
             <i class="fa fa-id-card-o"></i>
             {%{{{ 'AbpIdentity::Menu:IdentityManagement' | abpLocalization }}}%}
@@ -264,7 +264,7 @@ Open the generated `routes.component.html` in `src/app/routes` folder and replac
             abpEllipsis="210px"
             [abpEllipsisEnabled]="!smallScreen"
             role="button"
-            class="btn d-block text-left dropdown-toggle"
+            class="btn d-block text-start dropdown-toggle"
           >
             <i class="fa fa-users"></i>
             {%{{{ 'AbpTenantManagement::Menu:TenantManagement' | abpLocalization }}}%}
diff --git a/docs/en/UI/Angular/Config-State-Service.md b/docs/en/UI/Angular/Config-State-Service.md
index 3c1930d908e..b3884f65e1f 100644
--- a/docs/en/UI/Angular/Config-State-Service.md
+++ b/docs/en/UI/Angular/Config-State-Service.md
@@ -110,7 +110,7 @@ this.config.getSetting$("Abp.Identity.TwoFactor.Behaviour").subscribe(twoFactorB
 
 #### State Properties
 
-Please refer to `ApplicationConfiguration.Response` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [application-configuration.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/application-configuration.ts#L4).
+Please refer to `ApplicationConfigurationDto` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [models.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/proxy/volo/abp/asp-net-core/mvc/application-configurations/models.ts#L11).
 
 
 ## Set State
diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md
index ef48332580c..3c864d2bbaa 100644
--- a/docs/en/UI/Angular/Confirmation-Service.md
+++ b/docs/en/UI/Angular/Confirmation-Service.md
@@ -2,12 +2,10 @@
 
 You can use the `ConfirmationService` in @abp/ng.theme.shared package to display a confirmation popup by placing at the root level in your project.
 
-
 ## Getting Started
 
 You do not have to provide the `ConfirmationService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
 
-
 ```js
 import { ConfirmationService } from '@abp/ng.theme.shared';
 
@@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ConfirmationS
 ### How to Display a Confirmation Popup
 
 ```js
-const confirmationStatus$ = this.confirmation.success('Message', 'Title');
+const confirmationStatus$ = this.confirmation.success("Message", "Title");
 ```
 
 - The `ConfirmationService` methods accept three parameters that are `message`, `title`, and `options`.
@@ -48,18 +46,16 @@ this.confirmation
   });
 ```
 
-
 - The `message` and `title` parameters accept a string, localization key or localization object. See the [localization document](./Localization.md)
 - `Confirmation.Status` is an enum and has three properties;
-    - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
-    - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
-    - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
-
+  - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
+  - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
+  - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
 
 If you are not interested in the confirmation status, you do not have to subscribe to the returned observable:
 
 ```js
-this.confirmation.error('You are not authorized.', 'Error');
+this.confirmation.error("You are not authorized.", "Error");
 ```
 
 ### How to Display a Confirmation Popup With Given Options
@@ -71,16 +67,16 @@ const options: Partial<Confirmation.Options> = {
   hideCancelBtn: false,
   hideYesBtn: false,
   dismissible: false,
-  cancelText: 'Close',
-  yesText: 'Confirm',
-  messageLocalizationParams: ['Demo'],
+  cancelText: "Close",
+  yesText: "Confirm",
+  messageLocalizationParams: ["Demo"],
   titleLocalizationParams: [],
 };
 
 this.confirmation.warn(
-  'AbpIdentity::RoleDeletionConfirmationMessage',
-  'Are you sure?',
-  options,
+  "AbpIdentity::RoleDeletionConfirmationMessage",
+  "Are you sure?",
+  options
 );
 ```
 
@@ -110,7 +106,7 @@ this.confirmation.warn(
     Do you confirm that?
   `,
   '<span class="my-custom-title">Are you sure?</span>',
-  options,
+  options
 );
 ```
 
@@ -138,8 +134,7 @@ success(
 ): Observable<Confirmation.Status>
 ```
 
-> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
-
+> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
 
 ### warn
 
diff --git a/docs/en/UI/Angular/Environment.md b/docs/en/UI/Angular/Environment.md
index 9802eb62641..026c5c5fc7d 100644
--- a/docs/en/UI/Angular/Environment.md
+++ b/docs/en/UI/Angular/Environment.md
@@ -1,6 +1,6 @@
 # Environment
 
-Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well. 
+Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well.
 
 Current `Environment` configuration holds sub config classes as follows:
 
@@ -30,7 +30,7 @@ export interface ApiConfig {
 ```
 
 Api config has to have a default config and it may have some additional ones for different modules.
-I.e. you may want to connect to different Apis for different modules. 
+I.e. you may want to connect to different Apis for different modules.
 
 Take a look at following example
 
@@ -39,35 +39,34 @@ Take a look at following example
   // ...
   "apis": {
     "default": {
-      "url": "https://localhost:8080",
+      "url": "https://localhost:8080"
     },
     "AbpIdentity": {
-      "url": "https://localhost:9090",
+      "url": "https://localhost:9090"
     }
-  },
+  }
   // ...
 }
 ```
 
-When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`. 
+When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`.
 Everything else will be sent to `"https://localhost:8080"`
 
-* `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore
+- `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore
 
 ## Application
 
 ```js
- export interface Application {
+export interface Application {
   name: string;
   baseUrl?: string;
   logoUrl?: string;
 }
 ```
 
-* `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided.
-* `logoUrl`: Url of the application logo. It is used by `logo.component`
-* `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver)
-
+- `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided.
+- `logoUrl`: Url of the application logo. It is used by `logo.component`
+- `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver)
 
 ## AuthConfig
 
@@ -75,7 +74,7 @@ For authentication, we use angular-oauth2-oidc. Please check their [docs](https:
 
 ## RemoteEnvironment
 
-Some applications need to integrate an existing config into the `environment` used throughout the application. 
+Some applications need to integrate an existing config into the `environment` used throughout the application.
 Abp Framework supports this out of box.
 
 To integrate an existing config json into the `environment`, you need to set `remoteEnv`
@@ -83,29 +82,28 @@ To integrate an existing config json into the `environment`, you need to set `re
 ```js
 export type customMergeFn = (
   localEnv: Partial<Config.Environment>,
-  remoteEnv: any,
+  remoteEnv: any
 ) => Config.Environment;
 
 export interface RemoteEnv {
   url: string;
-  mergeStrategy: 'deepmerge' | 'overwrite' | customMergeFn;
+  mergeStrategy: "deepmerge" | "overwrite" | customMergeFn;
   method?: string;
   headers?: ABP.Dictionary<string>;
 }
 ```
 
-* `url` *: Required. The url to be used to retrieve environment config
-* `mergeStrategy` *: Required. Defines how the local and the remote `environment` json will be merged
-  * `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized. 
-  * `overwrite`: Remote `environment` will be used and local environment will be ignored.
-  * `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
-* `method`: HTTP method to be used when retrieving environment config. Default: `GET`
-* `headers`: If extra headers are needed for the request, it can be set through this field.
+- `url` \*: Required. The url to be used to retrieve environment config
+- `mergeStrategy` \*: Required. Defines how the local and the remote `environment` json will be merged
+  - `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized.
+  - `overwrite`: Remote `environment` will be used and local environment will be ignored.
+  - `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
+- `method`: HTTP method to be used when retrieving environment config. Default: `GET`
+- `headers`: If extra headers are needed for the request, it can be set through this field.
 
 ## EnvironmentService
 
-` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
-
+` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
 
 ### Before Use
 
@@ -124,7 +122,6 @@ class DemoComponent {
 
 You do not have to provide the `EnvironmentService` at module or component/directive level, because it is already **provided in root**.
 
-
 ### Get Methods
 
 `EnvironmentService` has numerous get methods which allow you to get a specific value or all environment object.
@@ -141,9 +138,9 @@ You can use the `getEnvironment` or `getEnvironment$` method of `EnvironmentServ
 const environment = this.environment.getEnvironment();
 
 // or
-this.environment.getEnvironment$().subscribe(environment => {
-   // use environment here
-})
+this.environment.getEnvironment$().subscribe((environment) => {
+  // use environment here
+});
 ```
 
 #### How to Get API URL
@@ -156,14 +153,13 @@ The `getApiUrl` or `getApiUrl$` method is used to get a specific API URL from th
 const apiUrl = this.environment.getApiUrl();
 // environment.apis.default.url
 
-this.environment.getApiUrl$("search").subscribe(searchUrl => {
-// environment.apis.search.url
-})
+this.environment.getApiUrl$("search").subscribe((searchUrl) => {
+  // environment.apis.search.url
+});
 ```
 
 This method returns the `url` of a specific API based on the key given as its only parameter. If there is no key, `'default'` is used.
 
-
 #### How to Set the Environment
 
 `EnvironmentService` has a method named `setState` which allows you to set the state value.
@@ -178,4 +174,4 @@ Note that **you do not have to call this method at application initiation**, bec
 
 #### Environment Properties
 
-Please refer to `Environment` type for all the properties. It can be found in the [config.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L13).
\ No newline at end of file
+Please refer to `Environment` type for all the properties. It can be found in the [environment.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/environment.ts#L4).
diff --git a/docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md b/docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md
index 46a97b2c7b9..d388e48ade1 100644
--- a/docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md
+++ b/docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md
@@ -171,7 +171,7 @@ Open the generated `src/app/my-role/my-role.component.html` file and replace its
       <div class="col col-md-6">
         <h5 class="card-title">My Roles</h5>
       </div>
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
         <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
       </div>
     </div>
diff --git a/docs/en/UI/Angular/Quick-Start.md b/docs/en/UI/Angular/Quick-Start.md
index c17f069c5f7..b487a1472b6 100644
--- a/docs/en/UI/Angular/Quick-Start.md
+++ b/docs/en/UI/Angular/Quick-Start.md
@@ -198,7 +198,7 @@ In addition, you can [deploy your application to certain targets using the Angul
 - [Azure](https://github.com/Azure/ng-deploy-azure#readme)
 - [Firebase](https://github.com/angular/angularfire#readme)
 - [Netlify](https://github.com/ngx-builders/netlify-builder#readme)
-- [Vercel](https://github.com/vercel/ng-deploy-vercel#readme)
+- [Vercel `vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular)
 - [GitHub Pages](https://github.com/angular-schule/angular-cli-ghpages/#readme)
 
 ---
diff --git a/docs/en/UI/Angular/Testing.md b/docs/en/UI/Angular/Testing.md
index bf6d3e1b26f..bd40c7b55f0 100644
--- a/docs/en/UI/Angular/Testing.md
+++ b/docs/en/UI/Angular/Testing.md
@@ -123,7 +123,7 @@ The **queries in Angular Testing Library follow practices for maintainable tests
 
 - [Queries](https://testing-library.com/docs/dom-testing-library/api-queries)
 - [User Event](https://testing-library.com/docs/ecosystem-user-event)
-- [Examples](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/app/examples)
+- [Examples](https://github.com/testing-library/angular-testing-library/tree/main/apps/example-app/src/app/examples)
 
 ### Clearing DOM After Each Spec
 
@@ -377,4 +377,4 @@ npm test -- --prod
 
 ## See Also
 
-* [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3)
+- [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3)
diff --git a/docs/en/UI/Angular/Toaster-Service.md b/docs/en/UI/Angular/Toaster-Service.md
index 059fd720a89..3152eba1af5 100644
--- a/docs/en/UI/Angular/Toaster-Service.md
+++ b/docs/en/UI/Angular/Toaster-Service.md
@@ -2,12 +2,10 @@
 
 You can use the `ToasterService` in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project.
 
-
 ## Getting Started
 
 You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
 
-
 ```js
 import { ToasterService } from '@abp/ng.theme.shared';
 
@@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ToasterServic
 ### How to Display a Toast Overlay
 
 ```js
-this.toaster.success('Message', 'Title');
+this.toaster.success("Message", "Title");
 ```
 
 - The `ToasterService` methods accept three parameters that are `message`, `title`, and `options`.
@@ -72,12 +70,11 @@ With the options above, the toast overlay looks like this:
 The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast:
 
 ```js
-const toastId = this.toaster.success('Message', 'Title')
+const toastId = this.toaster.success("Message", "Title");
 
 this.toaster.remove(toastId);
 ```
 
-
 ### How to Remove All Toasts
 
 The all open toasts can be removed manually via the `clear` method:
@@ -85,11 +82,13 @@ The all open toasts can be removed manually via the `clear` method:
 ```js
 this.toaster.clear();
 ```
+
 ## Replacing ToasterService with 3rd party toaster libraries
 
 If you want the ABP Framework to utilize 3rd party libraries for the toasters instead of the built-in one, you can provide a service that implements `Toaster.Service` interface, and provide it as follows (ngx-toastr library used in example):
 
-> You can use *LocalizationService* for toaster messages translations. 
+> You can use _LocalizationService_ for toaster messages translations.
+
 ```js
 // your-custom-toaster.service.ts
 import { Injectable } from '@angular/core';
@@ -167,6 +166,7 @@ export class CustomToasterService implements Toaster.Service {
   }
 }
 ```
+
 ```js
 // app.module.ts
 
@@ -178,10 +178,11 @@ import { ToasterService } from '@abp/ng.theme.shared';
       {
         provide: ToasterService,
         useClass: CustomToasterService,
-      },  
+      },
   ]
 })
 ```
+
 ## API
 
 ### success
@@ -197,8 +198,7 @@ success(
 - `Config` namespace can be imported from `@abp/ng.core`.
 - `Toaster` namespace can be imported from `@abp/ng.theme.shared`.
 
-> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
-
+> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
 
 ### warn
 
diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Figure.md b/docs/en/UI/AspNetCore/Tag-Helpers/Figure.md
index e3b0e0d0a48..20f0450565e 100644
--- a/docs/en/UI/AspNetCore/Tag-Helpers/Figure.md
+++ b/docs/en/UI/AspNetCore/Tag-Helpers/Figure.md
@@ -7,7 +7,7 @@ Basic usage:
 ````html
 <abp-figure>
   <abp-image src="..." class="img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
-  <abp-figcaption class="text-right">A caption for the above image.</abp-figcaption>
+  <abp-figcaption class="text-end">A caption for the above image.</abp-figcaption>
 </abp-figure>
 ````
 
diff --git a/docs/en/UI/AspNetCore/Theming.md b/docs/en/UI/AspNetCore/Theming.md
index af721f76788..6a378cd29af 100644
--- a/docs/en/UI/AspNetCore/Theming.md
+++ b/docs/en/UI/AspNetCore/Theming.md
@@ -363,7 +363,7 @@ Another pre-defined section is the Content Toolbar section which can be used by
 
 ````html
 <div id="AbpContentToolbar">
-    <div class="text-right mb-2">
+    <div class="text-end mb-2">
         @RenderSection("content_toolbar", false)
     </div>
 </div>
diff --git a/docs/pt-BR/Tutorials/Angular/Part-II.md b/docs/pt-BR/Tutorials/Angular/Part-II.md
index b4b86350b01..f948bca55a4 100644
--- a/docs/pt-BR/Tutorials/Angular/Part-II.md
+++ b/docs/pt-BR/Tutorials/Angular/Part-II.md
@@ -108,7 +108,7 @@ Adicione um botão rotulado `New book`para mostrar o modal:
       Books
     </h5>
   </div>
-  <div class="text-right col col-md-6">
+  <div class="text-end col col-md-6">
     <button id="create-role" class="btn btn-primary" type="button" (click)="createBook()">
       <i class="fa fa-plus mr-1"></i> <span>New book</span>
     </button>
diff --git a/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md b/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md
index 763157e0498..5ee45311311 100644
--- a/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md
+++ b/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md
@@ -113,7 +113,7 @@ Abra `Pages/Books/Index.cshtml`e altere a `abp-card-header`tag, como mostrado ab
         <abp-column size-md="_6">
             <h2>@L["Books"]</h2>
         </abp-column>
-        <abp-column size-md="_6" class="text-right">
+        <abp-column size-md="_6" class="text-end">
             <abp-button id="NewBookButton"
                         text="@L["NewBook"].Value"
                         icon="plus"
diff --git a/docs/zh-Hans/Tutorials/Part-2.md b/docs/zh-Hans/Tutorials/Part-2.md
index 378985235a0..1207c668710 100644
--- a/docs/zh-Hans/Tutorials/Part-2.md
+++ b/docs/zh-Hans/Tutorials/Part-2.md
@@ -514,7 +514,7 @@ export class BookComponent implements OnInit {
           {%{{{ '::Menu:Books' | abpLocalization }}}%}
         </h5>
       </div>
-      <div class="text-right col col-md-6"></div>
+      <div class="text-end col col-md-6"></div>
     </div>
   </div>
   <div class="card-body">
diff --git a/docs/zh-Hans/Tutorials/Part-3.md b/docs/zh-Hans/Tutorials/Part-3.md
index 216dd48ce79..1e32aacc5fa 100644
--- a/docs/zh-Hans/Tutorials/Part-3.md
+++ b/docs/zh-Hans/Tutorials/Part-3.md
@@ -145,7 +145,7 @@ namespace Acme.BookStore.Web.Pages.Books
         <abp-column size-md="_6">
             <abp-card-title>@L["Books"]</abp-card-title>
         </abp-column>
-        <abp-column size-md="_6" class="text-right">
+        <abp-column size-md="_6" class="text-end">
             <abp-button id="NewBookButton"
                         text="@L["NewBook"].Value"
                         icon="plus"
@@ -175,7 +175,7 @@ namespace Acme.BookStore.Web.Pages.Books
             <abp-column size-md="_6">
                 <abp-card-title>@L["Books"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 <abp-button id="NewBookButton"
                             text="@L["NewBook"].Value"
                             icon="plus"
@@ -688,11 +688,10 @@ export class BookComponent implements OnInit {
     <div class="row">
       <div class="col col-md-6">
         <h5 class="card-title">{%{{{ '::Menu:Books' | abpLocalization }}}%}</h5>
-      </div>
-      <div class="text-right col col-md-6">
-
+      </div>        
+      <div class="text-end col col-md-6">
         <!-- Add the "new book" button here -->
-        <div class="text-lg-right pt-2">
+        <div class="text-lg-end pt-2">
           <button id="create" class="btn btn-primary" type="button" (click)="createBook()">
             <i class="fa fa-plus mr-1"></i>
             <span>{%{{{ "::NewBook" | abpLocalization }}}%}</span>
diff --git a/docs/zh-Hans/UI/Angular/Component-Replacement.md b/docs/zh-Hans/UI/Angular/Component-Replacement.md
index 0877ac7a326..bb54bb64979 100644
--- a/docs/zh-Hans/UI/Angular/Component-Replacement.md
+++ b/docs/zh-Hans/UI/Angular/Component-Replacement.md
@@ -490,7 +490,7 @@ export class NavItemsComponent implements AfterViewInit {
         {%{{{ (currentUser$ | async)?.userName }}}%}
       </a>
       <div
-        class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
+        class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
         aria-labelledby="dropdownMenuLink"
         [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
       >