¿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>-->

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="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!