Hello internet people, welcome to the Learn Django by Doing Project series. We are making a todo app. In part 5, we completed our todo app. Today we just styling our app and makes look better. So, activate your virtual environment, and let’s start.

Styling Templates

Open index.html and make following changes.

{% extends 'base.html' %}

{% block title %}
Tasks -
{% endblock title %}

{% block content %}
<!-- <h1>Hello, world!</h1> -->

<div class="card">
    <div class="card-header">
        <h1 class="text-center">ToDo App</h1>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}

            <div class="input-group mb-3">
                <!-- {{task_form}} to display all -->
                {{task_form.title}}
                <!-- to display particular field-->

                <button type="submit" class="btn btn-primary btn-lg">ADD</button>
            </div>
        </form>

        <h4 class="bg-warning text-light py-2 rounded text-center">My Tasks:</h4>

        <ul class="list-group">
            {% for task in tasks %}
            <li class="list-group-item list-group-item-action">
                {% if task.completed == True %}
                <strike>{{task.title}} </strike>
                {% else %}
                {{task.title}}
                {% endif %}

                <div class="float-right">
                    <a href="{% url "update_task" task.id %}" class="btn btn-sm btn-info">Update</a>
                    <a href="{% url "delete_task" task.id %}" class="btn btn-sm btn-danger">Delete</a>
                </div>

            </li>
            {% endfor %}
        </ul>
    </div>
</div>

{% endblock content %}

update_task.html

{% extends 'base.html' %}

{% block title %}
Update Task -
{% endblock title %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h1 class="text-center">ToDo App</h1>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}

            <div class="input-group mb-3">
                <div class="input-group-text" data-toggle="tooltip" data-placement="bottom" title="Marked as completed">
                    {{task_edit_form.completed}}
                </div>
                {{task_edit_form.title}}
                <button type="submit" class="btn btn-lg btn-info">Update</button>
            </div>
        </form>

    </div>
</div>

{% endblock content %}

Now pages looks like this:

Looks better but forms are still looks ugly. So for that we add bootstrap class in from form.py.

Edit Form Fields

Here we want to add a bootstrap class in the form fields of our form. So, in order to add a class or id attribute to a field, we use to put a dictionary in the attrs attribute of the form field. So, open forms.py and make the following changes.

from django import forms
from django.forms import ModelForm
from .models import Task


class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = "__all__"  # include all fields in form
        # fields = ("title",)  # include particular fileds of model in form

    title = forms.CharField(
        widget=forms.TextInput(
            attrs={
                "class": "form-control form-control-lg",
                "placeholder": "Enter task...",
            }
        ),
    )

    completed = forms.CharField(
        required=False,
        widget=forms.widgets.CheckboxInput(attrs={"class": "form-check-input"}),
    )

For more about Django form fields: https://www.webforefront.com/django/formfieldtypesandvalidation.html

Now we add some more style by writing our on styling. Let’s do it.

Django Static File

Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, we refer to these files as “static files”. Django provides django.contrib.staticfiles to help you manage them.

First make a directory called static in the root directory.

Your project will probably also have static assets that aren’t tied to a particular app. In addition to using a static/ directory inside your apps, you can define a list of directories (STATICFILES_DIRS) in your settings file where Django will also look for static files. So open settings.py and add the following lines at last

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

Now make CSS directory inside the static directory and add style.css file in css directory (static/css/style.css). In order to serve a static file in our template, we need to load static file using {% load static %} tag on top the HTML file. Then {% static %} template tag generates the absolute URL of static files.

Open base.html and make file looks like this:

{% load static %}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    <link rel="stylesheet" href="{% static 'css/style.css'%}">
    <title>
        {% block title %}
        
        {% endblock title %}
        Todo App
    </title>
</head>

<body>
    <div class="container h-100">
        {% block content %}

        {% endblock content %}
    </div>
    <!-- Optional JavaScript -->
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous"></script>
</body>

</html>

Here we added files in base.html so it’s applicable to all file which extends base.html.

Now we adding some little more style. Following is our CSS code. Open style.css and add this code:

body{
    background-color: #800080;
}
.container{
    max-width: 600px;
}

Now open your browser and refresh the page.

That’s it guys our todo app is completed finally and this series too. Hope you enjoyed this small journey with Django. Now Please Please share this tutorial with your friends and family :)

Thank you.

Previous: ToDo App in Django Part 5: Create, Retrieve, Update and Delete Task - CRUD Operation in Django

What next?

Start your next project; django blog tutorial with explanation 👉 Django Blog Tutorial