Building MVP with React Flask Full Stack – Day 3 – Adding Bootstrap 4

In the last session, i have finally learned Jinja2 template system basics.

Now, I should be fully capable of creating a landing page, that will be structured in Django / Flask way.

That means, I will use existing index.html as my base template.

Base template is a place, where you throw in all UI elements, that should be visible on each web page, such as header, body and footer.

Then when you create a new template, you can just extend this new children template with base template UI elements.

This way, children template will inherit all UI components and styles defined in main base template.

I am sorry, if you have hard time following my steps.

Jinja2 is so different from HTML5 and it is really hard for me to explain its mechanics.

Thats why it took me so long to take any action with Django / Flask framework.

I just hope I will make some progress with my landing page today.

It would be nice to have at least a header section with logo and navigation menu done.

Okay, let’s get to it.

 

Landing page layout

 

In index.html file, add template block for dynamically generated content, that will be rendered by children templates.

<body>
    {% block landingLayout %}
    {% endblock %}
</body>

Next create landingpage folder inside our templates folder. We will put all landing page children templates there.

/templates/landingpage/

Inside new folder, create new landingPage.html file.

landingPage.html

Now, it is time to include header and footer into our base template.

It is done by using include template tag.

<body>
    {% include "header.html" %}

    {% block landingLayout %}
    {% endblock %}

    {% include "footer.html" %}
</body>

So when Flask loads our landing page, it will include all html content, that is defined in header.html and footer.html.

Why are we creating so many html files?

Because I like to breakdown web pages into smallest components possible.

There were times, when I created WordPress pages with hundreds lines of code in one single php file .

After some time, It was impossible to navigate through such big text file.

This way, i will know exactly where to look, when i want to edit some feature.

 

Adding Bootstrap 4 into Flask

 

So let’s create header.html and footer.html inside our templates folder.

It is up to you what you put into header or footer elements.

In my case, I usually put CSS and javascript imports inside header element.

For CSS styles, I will use Bootstrap 4 CSS framework.

Put a link to Bootstrap 4 CSS below header meta tag.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Stylesheets are not enough. Bootstrap 4 also needs javascript to do its magic.

So let’s put javascript imports above body element.

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Now we are ready to play with Bootstrap 4 components.

Building websites with Bootstrap 4 is a piece of cake.

Just head over their documentation page, copy paste some boilerplate code, and you are ready to go.

I will use existing Bootstrap 4 Nav and Navbar components as building blocks for my header.

To spice things up, I will use Emoji as my logo. See.

Looks beautiful right?

I prefer using Emoji over paying 5+ bucks for custom logo on Fiverr or spending tons of time fine tuning curves in Adobe Illustrator.

But thats just me.

Okay, each header should also have a navigation bar.

Is it possible in Jinja2 to dynamically highlight links conditionally based on your current url ?

Yes it is!

Let’s add if condition into Navbar class.

{% if '' in request.path %}active{% endif %}

You can read it as, if current path equals our domain url, then add “active” stylesheet class.

Let’s see if it works.

Nice.

Header is done.

I will leave footer and body content for another day. It’s been a long day and I need to rest.

See you in the next post.

Share it!


Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Leave a Reply

avatar

Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Made with 🔥 by Viet Phan 2018