diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md
index 7c8efde9d0..e28e27a9e4 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 below:
           {%{{{ '::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 92e04d0b41..683032d63f 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 the `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 4a4611809a..68fb16a646 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 0e271a5e4e..4e7914eba1 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 b75184c1ed..1baf7e18be 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/How-Replaceable-Components-Work-with-Extensions.md b/docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md
index 46a97b2c7b..d388e48ade 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/AspNetCore/Tag-Helpers/Figure.md b/docs/en/UI/AspNetCore/Tag-Helpers/Figure.md
index e3b0e0d0a4..20f0450565 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 af721f7678..6a378cd29a 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 b4b86350b0..f948bca55a 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 763157e049..5ee4531131 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 231ca226fa..102fc92f71 100644
--- a/docs/zh-Hans/Tutorials/Part-2.md
+++ b/docs/zh-Hans/Tutorials/Part-2.md
@@ -517,7 +517,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 90dd1326c3..3185dfec60 100644
--- a/docs/zh-Hans/Tutorials/Part-3.md
+++ b/docs/zh-Hans/Tutorials/Part-3.md
@@ -149,7 +149,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"
@@ -179,7 +179,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"
@@ -691,10 +691,10 @@ export class BookComponent implements OnInit {
       <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/zh-Hans/UI/Angular/Component-Replacement.md b/docs/zh-Hans/UI/Angular/Component-Replacement.md
index 0877ac7a32..bb54bb6497 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()"
       >