bootstrap

Maria Usina · Maria Usina · commit 425694e13775 · 2024-11-29T15:38:18.000-06:00
diff --git a/src/main/resources/templates/events/create.html b/src/main/resources/templates/events/create.html
@@ -1,15 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org/">
 <head th:replace="fragments :: head"></head>
-<body>
+<body class="container">
 
 <h1>Create Event</h1>
 
 <nav th:replace="fragments :: navigation"></nav>
 
 <form method="post">
-    <input type="text" name="eventName">
-    <input type="submit" value="Create Event">
+    <div class="form-group">
+        <label>Name
+        <input type="text" name="eventName" class="form-control">
+        </label>
+    </div>
+    <div class="form-group">
+        <input type="submit" value="Create Event" class="btn btn-success">
+    </div>
 </form>
 
 </body>
diff --git a/src/main/resources/templates/events/index.html b/src/main/resources/templates/events/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org/">
 <head th:replace="fragments :: head"></head>
-<body>
+<body class="container">
 
 <h1>All Events</h1>
 
@@ -10,11 +10,16 @@ <h1>All Events</h1>
 <p th:unless="${events} and ${events.size()}">No Events!</p>
 
 
-<ul>
-    <th:block th:each="event : ${events}">
-        <li th:text="${event}"></li>
-    </th:block>
-</ul>
+<table class="table table-striped">
+    <thead>
+    <tr>
+        <th>Name</th>
+    </tr>
+    </thead>
+    <tr th:each="event : ${events}">
+        <td th:text="${event}"></td>
+    </tr>
+</table>
 
 </body>
 </html>
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
@@ -4,16 +4,16 @@
     <meta charset="UTF-8"/>
     <title>Coding Events</title>
 
-    <script th:src="@{/script.js}"></script>
-    <link th:href="@{/styles.css}" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
 </head>
 <body>
 
 <nav th:fragment="navigation">
-    <ul>
-        <li><a href="/events">All Events</a></li>
-        <li><a href="/events/create">Create Event</a></li>
+    <ul class="nav">
+        <li class="nav-item"><a class="nav-link" href="/events">All Events</a></li>
+        <li class="nav-item"><a class="nav-link" href="/events/create">Create Event</a></li>
     </ul>
 </nav>
 
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org/">
 <head th:replace="fragments :: head"></head>
-<body>
+<body class="container">
 
 <h1>Coding Events</h1>
 
