From 7e73bdd68d04d9f3e8a4fe41d57bd34278d2afe3 Mon Sep 17 00:00:00 2001
From: maliming <liming.ma@volosoft.com>
Date: Fri, 26 Nov 2021 16:59:35 +0800
Subject: [PATCH] Update Index.md

---
 docs/en/Tutorials/Todo/Index.md | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/docs/en/Tutorials/Todo/Index.md b/docs/en/Tutorials/Todo/Index.md
index 476a5d2175..ea2551d4f5 100644
--- a/docs/en/Tutorials/Todo/Index.md
+++ b/docs/en/Tutorials/Todo/Index.md
@@ -591,17 +591,16 @@ Open the `Index.razor` file in the `Pages` folder of the *TodoApp.Blazor* projec
         </CardHeader>
         <CardBody>
             <!-- FORM FOR NEW TODO ITEMS -->
-            <form id="NewItemForm" 
-                  @onsubmit:preventDefault
-                  @onsubmit="() => Create()"
-                  class="form-inline">
-                <input type="text" 
-                       @bind-value="@NewTodoText"
-                       class="form-control me-2" 
-                       placeholder="enter text...">
-                <button type="submit" class="btn btn-primary">Submit</button>
+            <form id="NewItemForm" @onsubmit:preventDefault @onsubmit="() => Create()" class="row row-cols-lg-auto g-3 align-items-center">
+                <div class="col-12">
+                  <div class="input-group">
+                    <input name="NewTodoText" type="text" @bind-value="@NewTodoText" class="form-control" placeholder="enter text..." />
+                  </div>
+                </div>
+                <div class="col-12">
+                  <button type="submit" class="btn btn-primary">Submit</button>
+                </div>
             </form>
-
             <!-- TODO ITEMS LIST -->
             <ul id="TodoList">
                 @foreach (var todoItem in TodoItems)