update bootstrap and use floating label

SimpleWebChat.BlazorWasm/App.razor

@@ -1,45 +1,67 @@
 @inject HttpClient http
 @code {
     private string nickName;
-    private string nickNameClass => string.IsNullOrWhiteSpace(nickName) ? "border-warning border-4 form-control" : "form-control";
+    private string nickNameClass => string.IsNullOrWhiteSpace(nickName) ? "is-invalid form-control" : "form-control";
 
     private string message;
-    private string messageClass => string.IsNullOrWhiteSpace(message) ? "border-warning border-4 form-control" : "form-control";
+    private string messageClass => string.IsNullOrWhiteSpace(message) ? "is-invalid form-control" : "form-control";
 
     private int connState = 0;
     private const int maxDisplayMessage = 1000;
     private List<string> displayingMessages = new List<string>(maxDisplayMessage);
 }
 
-<h2>Simple Web Chat</h2>
+<div class="container">
+    <h2>Simple Web Chat</h2>
 
-@if (connState == 0)
-{
-    <div class="input-group mb-3">
-        <InputText class="@nickNameClass" placeholder="Nick name" type="search" onsearch="@Connect" @oninput="NickNameChanged" ValueExpression="()=>nickName"></InputText>
-        <button @onclick="@Connect" class="btn btn-outline-secondary" type="button">Connect</button>
-    </div>
-}
-else if (connState == 1)
-{
-    <span>Conecting...</span>
-}
-else if (connState == 2)
-{
-    <div class="input-group mb-3">
-        <InputText class="@messageClass" placeholder="Message to send" type="search" onsearch="@Send" @oninput="MessageChanged" Value="@message" ValueExpression="()=>message"></InputText>
-        <button @onclick="@Send" class="btn btn-outline-secondary" type="button">Send</button>
-    </div>
-
-    @foreach (var item in displayingMessages)
+    @if (connState == 0)
     {
-        <pre class="font-monospace" style="white-space:pre-wrap">@item</pre>
+        <div class="input-group mb-3">
+            <div class="form-floating">
+                <InputText class="@nickNameClass" placeholder="Nick name" type="search" onsearch="@Connect" @oninput="NickNameChanged" ValueExpression="()=>nickName"></InputText>
+                @if (string.IsNullOrEmpty(nickName))
+                {
+                    <label>Please enter nick name</label>
+                }
+                else
+                {
+                    <label>Nick name</label>
+                }
+            </div>
+            <button @onclick="@Connect" class="btn btn-outline-primary" type="button">Connect</button>
+        </div>
     }
-}
-else
-{
-    <span>Error</span>
-}
+    else if (connState == 1)
+    {
+        <span>Conecting...</span>
+    }
+    else if (connState == 2)
+    {
+        <div class="input-group mb-3">
+            <div class="form-floating">
+                <InputText class="@messageClass" placeholder="Message to send" type="search" onsearch="@Send" @oninput="MessageChanged" Value="@message" ValueExpression="()=>message"></InputText>
+                @if (string.IsNullOrEmpty(message))
+                {
+                    <label>Please enter message</label>
+                }
+                else
+                {
+                    <label>Message to send</label>
+                }
+            </div>
+            <button @onclick="@Send" class="btn btn-outline-secondary" type="button">Send</button>
+        </div>
+
+        @foreach (var item in displayingMessages)
+        {
+            <pre class="font-monospace" style="white-space:pre-wrap">@item</pre>
+        }
+    }
+    else
+    {
+        <span>Error</span>
+    }
+</div>
 
 @code {
     private System.Net.WebSockets.ClientWebSocket sck;