Building MVP with Flask Day 4 – Using Children Templates

Hi all. We managed to add Bootstrap 4 styling to our MVP in the last session.

We also prepared index.html to be our base template, which will be used as an extension for all our future children templates. Header design is also done.

So today, I would like to add footer and body content to our landing page.

Let's execute.

Updating base template

First, rename dynamic body content block in base template index.html from

{% block landingLayout %}
{% endblock %}

to

{% block content %}
{% endblock %}

It is for clarity purposes. In all online tutorials, the block is named as content.

And I found out why. You can have only one base template and body block should have a common name, that will be used in all our children templates. Content is a reasonable name and will not confuse anyone in the future when looking at my code.

In landingLayout.html file, wrap HTML content with Jinja2 content tag.

{% block content %}
    <h1>Hello, {{ user.username }}!</h1>
{% endblock %}

Restart Gunicorn and let's hope our landing page will display Hello username.

Nope.

Design is of landing page has not changed and Hello username string is not displayed. Maybe our route in routes.py is wrong and it points to the wrong HTML file?

return render_template('index.html', title='Home', user=user)

Let's try to change the template file from index.html to landingLayout.html

return render_template('landingLayout.html', title='Home', user=user)

This change broke the whole thing.

File landingLayout.html is located in a different folder than index.html so maybe changing the path to HTML template will help?

return render_template('landingpage/landingLayout.html', title='Home', user=user)

Yep, it does!

Extending a children template

Now landingLayout content is displayed, but the header disappeared? Maybe we forgot to extend landingLayout with index.html base template?

Because the header is included there. So let's add extension to landingLayout.html at the start of the file.

{% extends 'index.html' %}

Okay, the header is displayed, but body content disappeared, omg.

Let's check HTML source code if the body content is not hidden behind the header. I saw this behavior before. Bootstrap 4 sticky headers will overlay part of body HTML content and I always had to add a top margin to the body element.

So add top margin to body content in landingLayout.html.

<h1 class="mt-5">Hello, {{ user.username }}!</h1>

It worked!

Ok, I was right. Now I can safely start to design body content with Bootstrap 4 grid components.

Add Bootstrap 4 grid

Bootstrap 4 grid is created with rows and columns like so.

<div class="row mt-5"></div>
<div class="row mt-5">
    <div class="col-2"></div>
    <div class="col-8">
        <h1 class="mt-5">Hello, {{ user.username }}!</h1>
    </div>
    <div class="col-2"></div>
</div>

Yeah, now it looks much better.

Body content placeholder is done for now.

Add footer to finish this coding session.

Beautiful, we have header, body and footer layouts ready. Next time, we can fill the body with some meaningful content.

See you in the next post!