[EDIT]スマホ画面のデザインに統一しました

src/main/resources/templates/login.html

@@ -1,50 +1,101 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>ログイン</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
-	<div th:replace="~{header :: header}">
-		</div>
-	
-	<main>
-		<h1>ログイン</h1>
-		
-		<div th:if="${errorMessage}" th:text="${errorMessage}"></div>
-		<form th:action="@{/login}" th:object="${loginForm}" method="post">
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				
-				<input type="email"
-				id="mailAddress"
-				th:field="*{mailAddress}"
-				required>
-			</div>
-			
-			<div>
-				<label for="password">パスワード</label>
-				
-				<input type="password"
-				id="password"
-				th:field="*{password}"
-				required>
-			</div>
-			
-			<div>
-				<button type="submit">ログイン</button>
-			</div>
-		</form>
-		
-		<div>
-			<a th:href="@{user/register}">新規会員登録</a>
-		</div>
-		
-		<div>
-			<a th:href="@{/authentication}">パスワードを忘れた方</a>
-		</div>
-	</main>
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            ログイン
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <div th:if="${errorMessage}"
+                     class="alert alert-danger">
+
+                    <span th:text="${errorMessage}">
+                    </span>
+
+                </div>
+
+                <form th:action="@{/login}"
+                      th:object="${loginForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>
+
+                        <input type="password"
+                               id="password"
+                               class="form-control"
+                               th:field="*{password}"
+                               required>
+
+                    </div>
+
+                    <div class="d-grid">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            ログイン
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div class="text-center mt-3">
+
+            <a th:href="@{/user/register}">
+                新規会員登録
+            </a>
+
+        </div>
+
+        <div class="text-center mt-2">
+
+            <a th:href="@{/authentication}">
+                パスワードを忘れた方
+            </a>
+
+        </div>
+
+    </div>
+
 </body>
 </html>