Flask : How create a responsive navbar

Here’s a complete tutorial to learn how we can create a responsive navigation bar, that adapt their layouts to the viewport size, using Flask from scratch.

In this tutorial, we’ll look into how use Bootstrap to create a responsive NavBar on Flask. Our navigation will have three different layouts, depending on the viewport size:

1. a mobile layout in which only the logo and a toggle button will be visible by default and users can open and close the menu using the toggle,
2. a tablet layout in which we will show two call-to-action buttons between the logo and toggle in the default state and the rest of the menu will remain toggleable,
3. a desktop layout in which all the menu items, except for the toggle button, will be visible on the screen.

So our navigation bar will contain 5 items and each item will be a page :

The all source code is there : https://github.com/Faouzizi/createNavigationBarFlask

I. Create the HTML

In this part, we will create HTML templates that our python code will call.
For that, we will create only Bootstrap-based template.
The first template that we will create is index.html and all others templates will be child templates.
Each child template is based on blocks (block like Title…