diff --git a/samples/demo-client/src/main/resources/templates/logged-out.html b/samples/demo-client/src/main/resources/templates/logged-out.html
index a0ee9c53..585499d4 100644
--- a/samples/demo-client/src/main/resources/templates/logged-out.html
+++ b/samples/demo-client/src/main/resources/templates/logged-out.html
@@ -9,8 +9,10 @@
 <body>
 <div th:replace="~{page-templates :: navbar}"></div>
 <div class="container">
-    <div class="row">
-        <h2>You are now logged out.</h2>
+    <div class="row justify-content-center">
+        <div class="col">
+            <h2>You are now logged out.</h2>
+        </div>
     </div>
 </div>
 <script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
diff --git a/samples/demo-client/src/main/resources/templates/page-templates.html b/samples/demo-client/src/main/resources/templates/page-templates.html
index acfdb097..4e83d929 100644
--- a/samples/demo-client/src/main/resources/templates/page-templates.html
+++ b/samples/demo-client/src/main/resources/templates/page-templates.html
@@ -36,26 +36,30 @@
     </div>
 </nav>
 <div class="container">
-    <div th:fragment="error-message" th:if="${error}" class="row alert alert-danger alert-dismissible fade show" role="alert">
-        <strong th:text="${error}"></strong>
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <div th:fragment="error-message" th:if="${error}" class="row justify-content-center alert alert-danger alert-dismissible fade show" role="alert">
+        <div class="col">
+            <strong th:text="${error}"></strong>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
     </div>
-    <div th:fragment="message-list" th:if="${messages}" class="row">
-        <table class="table table-striped caption-top">
-            <caption>Messages</caption>
-            <thead>
-            <tr>
-                <th scope="col">#</th>
-                <th scope="col">Message</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr th:each="message,iterStat : ${messages}">
-                <th scope="row" th:text="${iterStat.count}"></th>
-                <td th:text="${message}"></td>
-            </tr>
-            </tbody>
-        </table>
+    <div th:fragment="message-list" th:if="${messages}" class="row justify-content-start">
+        <div class="col">
+            <table class="table table-striped caption-top">
+                <caption>Messages</caption>
+                <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Message</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr th:each="message,iterStat : ${messages}">
+                    <th scope="row" th:text="${iterStat.count}"></th>
+                    <td th:text="${message}"></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </div>
 <script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
