Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting!
Original Code without Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>To Do List </title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'todo/styles.css' %}">
</head>
<body>
<div class="utils_box" id="heading">
<h1>{{kindOfDay}}!</h1>
</div>
<div class="utils_box">
{% for i in newListItems %}
<div class="utils_item">
<input type="checkbox" \>
<p>{{ i }}</p>
<a href="{% url 'todo:delete_item' i %}">X</a>
</div>
{% endfor %}
<form class= "utils_item" action="" method="post">
{% csrf_token %}
<input type="text" name="newItem" placeholder="Add new item here">
<button type="submit" name="button">+</button>
</form>
</div>
</body>
</html>
View Webpage Image without Bootstrap
Enhanced Code with Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>To Do List </title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'todo/styles.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="utils_box" id="heading">
<h1>{{kindOfDay}}!</h1>
</div>
<div class="utils_box">
{% for i in newListItems %}
<div class="utils_item">
<input type="checkbox" \>
<p>{{ i }}</p>
<a href="{% url 'todo:delete_item' i %}">X</a>
</div>
{% endfor %}
<form class= "utils_item" action="" method="post">
{% csrf_token %}
<input type="text" name="newItem" placeholder="Add new item here">
<button type="submit" name="button">+</button>
</form>
</div>
</body>
</html>
View Webpage Image after Implementation of Bootstrap
Edit2: Added CSS code for reference.
Custom CSS Styles
html {
background-color: #E4E9FD;
background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
min-height: 1000px;
font-family: 'helvetica neue';
}
h1 {
color: #fff;
padding: 10px;
}
... (CSS code continues)
Any suggestions or tips will be highly appreciated. Thank you in advance!