Wrapped the differnt component divs inside bootstrap grid to have con…

…sistency
Ritikasinghpro · Dec 2, 2019 · e31f3e5 · e31f3e5
1 parent e6f5042
commit e31f3e5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 30 deletions.
diff --git a/todoApp/db.sqlite3 b/todoApp/db.sqlite3
diff --git a/todoApp/todos/templates/todos/index.html b/todoApp/todos/templates/todos/index.html
@@ -6,48 +6,57 @@
 
 {% block content %}
 <div class="container">
+
   <!-- title row -->
   <div class="row">
-    <div class="page-header offset-md-5">
-      <h1>
-        Todo List
-      </h1>
+    <div class="offset-md-2 col-lg-9">
+      <div class="page-header">
+        <h1>
+          Todo List
+        </h1>
+      </div>
     </div>
   </div>
+
   <!-- Add a todo row -->
   <div class="row">
-    <form method="post" action="{% url 'todos:add' %}" class="offset-sm-3 col-lg-12">
-      {% csrf_token %}
-      <div class="form-row">
-        <div class="col-md-6">
-          <input type="text" class="form-control" name="title" placeholder="Do laundry" required>
-        </div>
-        <div class="col-md-6">
-          <button type="submit" name="submit" class="btn btn-outline-primary">
-            Add
-          </button>
+    <div class="offset-md-2 col-lg-9">
+      <form method="post" action="{% url 'todos:add' %}">
+        {% csrf_token %}
+        <div class="form-row">
+          <div class="col-md-6">
+            <input type="text" class="form-control" name="title" placeholder="Do laundry" required>
+          </div>
+          <div class="col-md-6">
+            <button type="submit" name="submit" class="btn btn-outline-primary">
+              Add
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div>
   </div>
   <hr />
+
   <!-- todo list row -->
   <div class="row">
-    <div class="list-group offset-md-2 col-lg-9">
-      {% for todo in todo_list %}
-      <div class="list-group-item {% if todo.isCompleted %} todo-complete {% endif %}">
-        <form style="display: inline;" method="post" action="{% url 'todos:update' todo.id %}">
-          {% csrf_token %}
-          <input type="checkbox" name="isCompleted" onchange="this.form.submit()" {% if todo.isCompleted %} checked
-            {% endif %} class="todo-status-checkbox"
-            title="{% if not todo.isCompleted %} mark as done {% else %} mark undone {% endif %}">
-        </form>
-        {{ todo.title }}
-        <a href="{% url 'todos:delete' todo.id %}" title="Delete">
-          <i class="far fa-trash-alt"></i>
-        </a>
+    <div class="offset-md-2 col-lg-6">
+      <div class="list-group">
+        {% for todo in todo_list %}
+        <div class="list-group-item {% if todo.isCompleted %} todo-complete {% endif %}">
+          <form style="display: inline;" method="post" action="{% url 'todos:update' todo.id %}">
+            {% csrf_token %}
+            <input type="checkbox" name="isCompleted" onchange="this.form.submit()" {% if todo.isCompleted %} checked
+              {% endif %} class="todo-status-checkbox"
+              title="{% if not todo.isCompleted %} mark as done {% else %} mark undone {% endif %}">
+          </form>
+          {{ todo.title }}
+          <a href="{% url 'todos:delete' todo.id %}" title="Delete">
+            <i class="far fa-trash-alt"></i>
+          </a>
+        </div>
+        {% endfor %}
       </div>
-      {% endfor %}
     </div>
   </div>
 </div>