styling todo app with bootstrap and css

src/App.tsx

@@ -6,12 +6,14 @@ import './assets/css/App.css';
 
 
 function App() {
-  const [todos, setTodos] = useState(["Go for Eid"])
+  const [todos, setTodos] = useState(["Go for choir practice", "Go to the salon", "Shop for groceries", "Prepare dinner"])
+
   return (
-    <div className="App">
+    <div className="App container">
       <section>
-        <h1>Todo App</h1>
-        <Form />
+        <h1 className = "text-secondary bg-danger display-3 pb-3">My Todos</h1>
+
+        <Form /> 
         <TodoList mytodos={todos} />
       </section>
 

src/assets/css/App.css

@@ -13,7 +13,20 @@ code {
     monospace;
 }
 
-form{
-  width: 500px;
-  margin: 0 auto;
+button {
+  width: 100%;
+}
+
+ul li{
+  display: block;
+  padding: 10px;
+  margin-right: 50px;
+  margin-left: 20px;
+  background: rgb(216, 211, 208);
+}
+
+ul li:nth-child(even) {
+  background: #e98686;
+  margin-right: 50px;
+  margin-left: 20px; 
 }

src/components/Form.tsx

@@ -20,8 +20,8 @@ const Form = (props:any) => {
   };
   return (
     <form onSubmit={Submit}>
-      <input type="text" onChange={handleChange} className="form-control form-control-sm custom" />
-      <button type="submit" className="btn btn-info"> Add</button>
+      <input placeholder="enter item to add to list" type="text" onChange={handleChange} className="form-control form-control-sm custom border border-danger" />
+      <button type="submit" className = "mt-2 btn btn-outline-secondary"> Add</button>
     </form>
   );
 };

src/components/TodoList.tsx

@@ -3,11 +3,11 @@ import React from "react";
 const TodoList = (props: any) => {
 
   return (
-    <ol>
+    <ul className="mt-2 text-secondary">
       {props.mytodos.map((todo: any) => {
         return <li> {todo}</li>;
       })}
-    </ol>
+    </ul>
   );
 };
 export default TodoList;