Checkpoint 5: Bootstrap Layout
Right now we have consistent navigation and footer, but our site could use some style upgrades. Let's leverage the capabilities of the Twitter Bootstrap front-end framework.
Bootstrap Navbar
Let's create a new shared layout in the "templates" directory called "bootstrap_layout.html" and place inside contents from this Bootstrap 5 HTML layout.
There's a lot going on in this file. But we still have the same "content" block which will allow the individual pages to specify their own content.
Instead of inheriting our templates from the "layout.html" file, let's modify them to inherit from the new bootstrap layout.
Updated "web_app/templates/home.html":
Updated "web_app/templates/about.html":
Updated "web_app/templates/hello.html":
Updated "web_app/templates/weather_form.html":
Restart the server and view the app in the browser to see the new styles with a blue responsive navbar at the top!
Flash Messaging
Reference:
Since Twitter Bootstrap provides dismissible alert messages, let's take advantage of Flask's flash
messaging capabilities to display them.
Uncomment the lines related to "flash" in the weather routes file. Notice we're sending a flash with flash("Weather Forecast Generated Successfully!", "success")
, where the first parameter is the flash message and the second represents the Bootstrap contextual color class (e.g. "success", "danger", "primary", etc.). Notice in the bootstrap layout how we are invoking get_flashed_messages()
to display them at the top of the page.
Because Flask's flash messages use sessions, as a one-time setup, we'll need to update the web app's init file to configure the Flask app's secret key. This secret key facilitates the encryption of information stored in the session, and is more relevant when we have user data to protect.
Restart the server and submit the weather form with valid and invalid inputs to see the flash message at the top of the forecast page!
Last updated