From be339a26525084b367af552ed5e700a2093de091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Onur=20P=C4=B1=C3=A7akc=C4=B1?= <onurpicakci@hotmail.com>
Date: Sat, 21 Jan 2023 23:53:56 +0300
Subject: [PATCH] Made some changes to the BookStore Angular documentation for
 the ui

---
 docs/en/Tutorials/Part-3.md | 12 ++++++------
 docs/en/Tutorials/Part-5.md |  2 +-
 docs/en/Tutorials/Part-9.md |  6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md
index 3e6fb13e38..2e9fe21c59 100644
--- a/docs/en/Tutorials/Part-3.md
+++ b/docs/en/Tutorials/Part-3.md
@@ -653,7 +653,7 @@ Open `/src/app/book/book.component.html` and make the following changes:
         <!-- Add the "new book" button here -->
         <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>
+            <i class="fa fa-plus me-1"></i>
             <span>{%{{{ "::NewBook" | abpLocalization }}}%}</span>
           </button>
         </div>
@@ -773,17 +773,17 @@ Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </n
 ```html
 <ng-template #abpBody>
   <form [formGroup]="form" (ngSubmit)="save()">
-    <div class="form-group">
+    <div class="mt-2">
       <label for="book-name">Name</label><span> * </span>
       <input type="text" id="book-name" class="form-control" formControlName="name" autofocus />
     </div>
 
-    <div class="form-group">
+    <div class="mt-2">
       <label for="book-price">Price</label><span> * </span>
       <input type="number" id="book-price" class="form-control" formControlName="price" />
     </div>
 
-    <div class="form-group">
+    <div class="mt-2">
       <label for="book-type">Type</label><span> * </span>
       <select class="form-control" id="book-type" formControlName="type">
         <option [ngValue]="null">Select a book type</option>
@@ -791,7 +791,7 @@ Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </n
       </select>
     </div>
 
-    <div class="form-group">
+    <div class="mt-2">
       <label>Publish date</label><span> * </span>
       <input
         #datepicker="ngbDatepicker"
@@ -1038,7 +1038,7 @@ Open `/src/app/book/book.component.html`  and add the following `ngx-datatable-
         aria-haspopup="true"
         ngbDropdownToggle
       >
-        <i class="fa fa-cog mr-1"></i>{%{{{ '::Actions' | abpLocalization }}}%}
+        <i class="fa fa-cog me-1"></i>{%{{{ '::Actions' | abpLocalization }}}%}
       </button>
       <div ngbDropdownMenu>
         <button ngbDropdownItem (click)="editBook(row.id)">
diff --git a/docs/en/Tutorials/Part-5.md b/docs/en/Tutorials/Part-5.md
index 4a6bebe958..b6125298f7 100644
--- a/docs/en/Tutorials/Part-5.md
+++ b/docs/en/Tutorials/Part-5.md
@@ -363,7 +363,7 @@ Open the `/src/app/book/book.component.html` file and replace the create button
 ````html
 <!-- Add the abpPermission directive -->
 <button *abpPermission="'BookStore.Books.Create'" id="create" class="btn btn-primary" type="button" (click)="createBook()">
-  <i class="fa fa-plus mr-1"></i>
+  <i class="fa fa-plus me-1"></i>
   <span>{%{{{ '::NewBook' | abpLocalization }}}%}</span>
 </button>
 ````
diff --git a/docs/en/Tutorials/Part-9.md b/docs/en/Tutorials/Part-9.md
index 4e27655d64..ba67e2d258 100644
--- a/docs/en/Tutorials/Part-9.md
+++ b/docs/en/Tutorials/Part-9.md
@@ -728,7 +728,7 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
       <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>
+            <i class="fa fa-plus me-1"></i>
             <span>{%{{{ '::NewAuthor' | abpLocalization }}}%}</span>
           </button>
         </div>
@@ -750,7 +750,7 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
               aria-haspopup="true"
               ngbDropdownToggle
             >
-              <i class="fa fa-cog mr-1"></i>{%{{{ '::Actions' | abpLocalization }}}%}
+              <i class="fa fa-cog me-1"></i>{%{{{ '::Actions' | abpLocalization }}}%}
             </button>
             <div ngbDropdownMenu>
               <button *abpPermission="'BookStore.Authors.Edit'" ngbDropdownItem (click)="editAuthor(row.id)">
@@ -785,7 +785,7 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
         <input type="text" id="author-name" class="form-control" formControlName="name" autofocus />
       </div>
 
-      <div class="form-group">
+      <div class="mt-2">
         <label>Birth date</label><span> * </span>
         <input
           #datepicker="ngbDatepicker"