bootstrap

June Lee · June Lee · commit 6148d76ddf06 · 2024-05-13T19:40:00.000-05:00
diff --git a/kodingevents/src/main/resources/templates/events/create.html b/kodingevents/src/main/resources/templates/events/create.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="https://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" action ="/events/create">
-   <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/kodingevents/src/main/resources/templates/events/index.html b/kodingevents/src/main/resources/templates/events/index.html
@@ -1,18 +1,26 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="https://www.thymeleaf.org/">
 <head th:replace="fragments :: head"></head>
-<body>
+<body class ="container">
+
 
    <h1>All Events</h1>
    <nav th:replace="fragments :: navigation"></nav>
 
    <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/kodingevents/src/main/resources/templates/fragments.html b/kodingevents/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">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
 
 </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/kodingevents/src/main/resources/templates/index.html b/kodingevents/src/main/resources/templates/index.html
@@ -3,7 +3,8 @@
 
 <head th:replace="fragments :: head"></head>
 
-<body>
+<body class ="container">
+
 
 <h1>Coding Events</h1>
 
