This problem arose, decided in my project to move from Flask-Bootstrap on Bootstrap-Flask, and following the guide: https://bootstrap-flask.readthedocs.io/en/latest/migrate.html It seems to do everything right, but does not take off, swearing, on jinja2.exceptions. Undefinederror: 'Bootstrap' is undefined . I do not understand the essence of the problem:
Listing Base.html:
& lt;! doctype HTML & GT;
& lt; HTML LANG = "EN" & GT;
& lt; Head & gt;
{% Block Head%}
& lt;! - Required Meta Tags - & gt;
& lt; Meta Charset = "UTF-8" & gt;
& lt; Meta Name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1, shrink-to-fit = no" & gt;
{% block styles%}
& lt;! - Bootstrap CSS - & gt;
{{bootstrap.load_css ()}}
{% endblock%}
{% Block Title%}
{{title}}
{% endblock%}
{% endblock%}
& lt; / Head & gt;
& lt; Body & gt;
{% block navbar%}
& lt; nav class = "navbar navbar-default" & gt;
& lt; div class = "Container" & gt;
& lt; div class = "navbar-header" & gt;
& lt; Button Type = "Button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria-expanded = "false" & gt;
& lt; span class = "sr-only" & gt; toggle navigation & lt; / span & gt;
& lt; span class = "icon-bar" & gt; & lt; / span & gt;
& lt; span class = "icon-bar" & gt; & lt; / span & gt;
& lt; span class = "icon-bar" & gt; & lt; / span & gt;
& lt; / Button & gt;
& lt; a class = "navbar-brand" href = "{{URL_FOR ('INDEX')}}" & gt; hostbill & lt; / a & gt;
& lt; / div & gt;
{% if current_user.is_authenticated%}
& lt; div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1" & gt;
& lt; ul class = "nav navbar-nav navbar-right" & gt;
& lt; li & gt;
& lt; a href = "{{URL_FOR ('logout')}}" & gt;
& lt; img src = "http://stat.iteam.net.ru/ustats/img/logout2.svg" Role = "img" / & gt; Output {{current_user.login}}
& lt; / a & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
{% endif%}
& lt; / div & gt;
& lt; / nav & gt;
{% endblock%}
& lt;! - Your Page Content - & GT;
{% block app_content%}
& lt; div class = "Container" & gt;
{% with messages = get_flashed_messages ()%}
{% if Messages%}
{% for Message in Messages%}
& lt; div class = "alert alert-info" Role = "Alert" & gt; {{Message}} & lt; / div & gt;
{% endfor%}
{% endif%}
{% endwith%}
& lt; / div & gt;
{% endblock%}
{% block scripts%}
& lt;! - Optional JavaScript - & gt;
{{bootstrap.load_js ()}}
{% endblock%}
& lt; / body & gt;
& lt; / html & gt;
Listing init .py:
from flask_bootstrap import bootstraprap
From Flask Import Flask, Session
From Config Import Config
From Flask_SQLAlChemy Import SQLALCHEMY
From Flask_Migrate Import Migrate
From Flask_login Import LoginManager
from SQLALCHEMY Import Create_Engine, Table, Metadata
from SQLALCHEMY.ORM IMPORT SCOPED_SESSION, SESSIONMAKER
from SQLALCHEMY.EXT.DECLAARATIVE Import Declarative_Base
Import OS.
FROM WERKZEUG.UTILS IMPORT SECURE_FILENAME
App = Flask (__ Name__, Static_Folder = 'Static')
app.config.from_Object (Config)
Bootstrap = Bootstrap (App)
Login = loginManager ()
login.init_app (app)
login.login_View = 'Login'
DB = SQLALCHEMY (APP)
MIGRATE = MIGRATE (App, DB)
From App Import Views, Models
swearing on this section of the code:
{% block styles%}
& lt;! - Bootstrap CSS - & gt;
{{bootstrap.load_css ()}}
{% endblock%}
UPD: helped the way of importing Boostrap directly from resources:
& lt; link href = "https://cdn.jsdelivr.net/npm/[email protected] Beta3 / Dist / css / bootstrap.min.css "REL =" STYESHEET "INTEGRITY =" SHA384-EOJMYSD53II + SCO / BJFSICZC + 5NDVN2YR8 + 0RDQR0QL0H + RP48CKR0QL0H + RP48CKXLPBZKGWRA6 "Crossorigin =" Anonymous "& gt;
& lt; script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i / x + 965dzo0rt7abk41jstqvgrvzpbzo5smxkp4yfrvh + 8abtte1pi6jizo" Crossorigin = "Anonymous" & gt; & lt; / script & gt;
& Lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous" & gt; & lt; / script & gt;
& Lt; script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-JEW9xMcG8R + pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin = " Anonymous "& gt; & lt; / script & gt;
& Lt; script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x0xIM + B07jRM" crossorigin = "anonymous" & gt; & lt; / script & gt;
But my Navbar began to maintain himself for some reason:
Yes Class, the Accordion earned, but stopped working Navbar as on the screen above
Answer 1, Authority 100%
In general, the solution is as follows:
Connect manually bootstrap
& lt; link href = "https://cdn.jsdelivr.net/npm/[email protected] Beta3 / Dist / css / bootstrap.min.css "REL =" STYESHEET "INTEGRITY =" SHA384-EOJMYSD53II + SCO / BJFSICZC + 5NDVN2YR8 + 0RDQR0QL0H + RP48CKR0QL0H + RP48CKXLPBZKGWRA6 "Crossorigin =" Anonymous "& gt;
& Lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous" & gt; & lt; / script & gt;
& Lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous" & gt; & lt; / script & gt;
& Lt; script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-JEW9xMcG8R + pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin = " Anonymous "& gt; & lt; / script & gt;
& Lt; script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x0xIM + B07jRM" crossorigin = "anonymous" & gt; & lt; / script & gt;
and then pass throughout the code changing classes, as some classes 5 and 4 versions changed