¿Quieres actualizar o cambiar tu versión de Flask-Bootstrap? (y reparar el problema del menú responsive) ¡Lee esto!

¡Hola Comunidad! Este tutorial fue escrito el 11/01/2021.
.
Si estás aquí es porque vienes de la clase #15 Flask Bootstrap de este magnífico curso para actualizar tu versión de Flask-Bootstrap por dos motivos:

1. Instalaste Flask-Bootstrap siguiendo las indicaciones del profesor y notaste que la versión instalada es inferior a la versión 4 (la versión más reciente a esta fecha) y no puedes soportarlo.
2. Instalaste Flask-Bootstrap siguiendo las indicaciones del profesor y notaste que algunas cosas en tu vista web no funciona adecuadamente, por ejemplo el menú “hamburguesa” en la vista responsive (he visto muchos comentarios sobre eso).

.
Sea cual sea tu motivación aquí vamos:
.
Paso 00. Verificar nuestra situación actual. Simplemente para confirmar que estamos trabajando con una versión no reciente. Aplicamos para esto el comando pip freeze

.
.
Paso 01. Desinstalar la versión vigente de Flask-Bootstrap. Necesario para evitar conflictos y como buena práctica. Aplicamos el comando pip uninstall Flask-Bootstrap.

.
Paso 02. Instalamos la versión que deseamos de Flask-Bootstrap. Para este ejemplo usaré la versión 4 siendo esta la más reciente en este momento. Aplicamos pip install Flask-Bootstrap4.

.
Podemos confirmar que lo instalado es lo requerido con pip freeze:

.
Paso 03. Accedemos a la versión de Bootstrap que corresponde a nuestra instalación de Flask-Bootstrap. Debemos tomar en cuenta que el código HTML que usemos para nuestro NavBar debe ser extraído de la documentación de la versión relacionada a nuestra instalación de Flask-Bootstrap. En este caso la versión 4.

Paso 04. Ubicamos y usamos el diseño de NavBar deseado. Accedemos a Componentes/NavBar y elegimos el diseño deseado.
.
Luego vamos a nuestro archivo templates/navbar.html, borramos (en mi caso solo he comentado) el código de NavBar de la clase y pegamos el que acabamos de copiar. Deberíamos obtener algo así:

<!--<nav>
    <ul>
        <img style="width: 200px" src="{{ url_for('static', filename='images/platzi.jpg') }}" alt="Platzi Logo">
        <li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
        <li><a href="https://platzi.com" target="_blank">Ir a Platzi</a></li>
    </ul>
</nav>--><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdown"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
          Dropdown
        </a><divclass="dropdown-menu"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Something else here</a></div></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

.
Paso 05. “Heredamos” los estilos CSS y scripts JS que requiere nuestra instalación de Bootstrap. Sabemos que Bootstrap requiere para funcionar los siguientes archivos: bootstrap.css, jquery.js, popper.js y bootstrap.js. Estos archivos ya están organizados y configurados en nuestra instalación de Flask-Bootstrap. Sin embargo, para que la página pueda utilizarlos debemos heredarlos de flask_bootstrap/base.html.
.
Para hacer esto, abrimos el archivo base.html y agregamos las líneas de código indicadas en los comentarios:

{% extends 'bootstrap/base.html' %}<!---El bloque head trae los estilos CSS al utilizar super(), no necesitamos hacer más->
{% block head %}{{ super() }}{% endblock %}{% block body %}{% block navbar %}{% include 'navbar.html' %}{% endblock navbar %}{% block content %}{% endblock %}
    <!--El bloque que si deberemos crear será el siguiente:--><!--AQUI EMPIEZA-->{% block scripts %}{{ super() }}{% endblock %}<!--AQUI TERMINA-->{% endblock %}

.
Paso 06. Corremos la aplicación flask y revisamos lo implementado. Aplicamos el comando flask run y verificamos que todo está en funcionamiento, desde los estilos hasta los efectos que soporta JavaScript como los menú desplegables y menú responsive.

.
De esta manera puedes actualizar tu versión de Flask-Bootstrap sin tener problemas por mal funcionamiento de estilos y/o scripts de JavaScript.
.
Espero que este aporte te sirva. Hacerlo ha sido resultado de investigación, ensayo y error. Si notas que algo o todo necesita corregirse 🤠, me lo dejas en un comentario y así aprendo un poco más.
.
¡Saludos!