Styling Project

We can see that without making any changes to the site all our post from our database gets render to our home page. But all these posts does not looks good. So let’s see how to add some styling to our web application. We can style our web application using some bootstrap.

Note: We will not get into the detailing of bootstrap, you can learn more about bootstrap from our Bootstrap tutorial.

For our project we can head to documentation of bootstrap and we can use the starter template. We will create another HTML file in our templates folder as base.html and then we will inherit that HTML file on our main home.html. Let’s see how to do this –

base.html

HTML

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
        {% block body %}
 
        {% endblock %}
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Now we need to inherit this base HTMl in our home.html file. extends tag is used for inheritance of templates in django. One needs to repeat the same code again and again. Using extends we can inherit templates as well as variables.

Syntax:

{% extends 'template_name.html' %}

Note: extends is always used with block tags so that can be inherited and overridden. {% block body %} in the case of above HTML file.

Now our home.html looks like this –

HTML

{% extends 'base.html' %}
 
{% block body %}
    {% for post in object_list %}
        <h1>{{post.title}}</h1>
        <small>By: {{post.author.first_name}} {{post.author.last_name}}</small>
         
 
<p>{{post.body}}</p>
 
 
    {% endfor %}
{% endblock %}

Our web application now looks like this –

Getting started with Django

Python Django is a web framework that is used to create web applications very efficiently and quickly. Django is called a battery included framework because it contains a lot of in-built features such as Django Admin Interface, default database – SQLite3, etc. Django provides various ready-made components such as a way to handle user authentication, a management panel for your website, forms, a way to upload files, etc.

In this article, we will learn Django by creating a basic blogging web application.

Styling Project

HTML

HTML

Getting started with Django

Similar Reads