exercises/web-app/bootstrap_5_layout.html

<!doctype html>
<html lang="en">
<head>
    <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.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

    <!--
        FLASH MESSAGING
        https://flask.palletsprojects.com/en/1.1.x/patterns/flashing/
        https://getbootstrap.com/docs/4.3/components/alerts/
    -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
            <!--
                BOOTSTRAP ALERTS
                https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
            -->
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert" style="margin-bottom:0;">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                {{ message }}
            </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <!--
        SITE NAVIGATION & BOOTSTRAP NAV
        https://jinja.palletsprojects.com/en/2.11.x/tricks/
        https://getbootstrap.com/docs/5.0/components/navbar/
    -->
    {% set nav_links = [
      ('/about', 'about', 'About'),
      ('/hello', 'hello', 'Hello'),
      ('/weather/form', 'weather_form', 'Weather Form')
    ] -%}
    {% set active_page = active_page|default('home') -%}
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">My Web App</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                {% for href, page_id, link_text in nav_links %}
                    {% if page_id == active_page %}
                        {% set is_active = "active" -%}
                    {% else %}
                        {% set is_active = "" -%}
                    {% endif %}

                    <li class="nav-item">
                        <a class="nav-link {{ is_active }}" href="{{href}}">{{link_text}}</a>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container" style="margin-top:2em;">

        <!--
            PAGE CONTENTS
        -->
        <div id="content">
            {% block content %}
            {% endblock %}
        </div>

        <footer style="margin-top:2em; margin-bottom:2em;">
        <hr>
            &copy; Copyright 2021 [Your Name Here] |
            <a href="https://github.com/prof-rossetti/intro-to-python/blob/main/exercises/web-app/README.md">Source</a>
        </footer>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script type="text/javascript">

        console.log("Thanks for the page visit!")

    </script>
</body>
</html>