for django:
file: MyApp/jinja2.py
from django.templatetags.static import static
from django.urls import reverse
from django.conf import settings
from jinja2 import Environment
from django_bootstrap import Bootstrap5
def environment(**options):
env = Environment(**options)
env.add_extension("jinja2.ext.do") # add ext.do extension
bootstrap = Bootstrap5(**settings.get("BOOTSTRAP_CONFIG", {})) # optional bootstrap setting from django conf
env.globals.update(bootstrap.get_jinja_env()) # update jinja2 globals
env.globals.update(
{
"static": static,
"url": reverse,
'settings': settings,
}
)
return envfile: MyApp/settings.py
TEMPLATES = [
{
"BACKEND": 'django.template.backends.jinja2.Jinja2',
"APP_DIRS": True,
"DIRS": [BASE_DIR / 'django_bootstrap' / 'templates'], # <- add bootstrap templates directory
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
"environment": "MyApp.jinja2.environment"
},
}
]
Bootstrap-Flask is a collection of Jinja macros for Bootstrap 4 & 5 and Flask. It helps you to render Flask-related data and objects to Bootstrap markup HTML more easily:
- Render Flask-WTF/WTForms form object to Bootstrap Form.
- Render data objects (dict or class objects) to Bootstrap Table.
- Render Flask-SQLAlchemy
Paginationobject to Bootstrap Pagination. - etc.
$ pip install -U bootstrap-flask
Register the extension:
from flask import Flask
# To follow the naming rule of Flask extension, although
# this project's name is Bootstrap-Flask, the actual package
# installed is named `flask_bootstrap`.
from flask_bootstrap import Bootstrap5
app = Flask(__name__)
bootstrap = Bootstrap5(app)Assuming you have a Flask-WTF form like this:
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired(), Length(1, 20)])
password = PasswordField('Password', validators=[DataRequired(), Length(8, 150)])
remember = BooleanField('Remember me')
submit = SubmitField()Now with the render_form macro:
{% from 'bootstrap5/form.html' import render_form %}
<html>
<head>
<!-- Bootstrap CSS -->
</head>
<body>
<h2>Login</h2>
{{ render_form(form) }}
<!-- Bootstrap JS -->
</body>
</html>You will get a form like this with only one line code (i.e. {{ render_form(form) }}):
When the validation fails, the error messages will be rendered with proper style:
Read the Basic Usage docs for more details.
Live demos of the latest release are:
If you find Bootstrap-Flask useful, please consider donating today. Your donation keeps Bootstrap-Flask maintained and updated with Bootstrap.
The Bootstrap 5 support is added in Bootstrap-Flask 2.0 version. Now you can use the separate extension class for different Bootstrap major versions.
For Bootstrap 4, use the Bootstrap4 class:
from flask_bootstrap import Bootstrap4
# ...
bootstrap = Bootstrap4(app)and import macros from the template path bootstrap4/:
{% from 'bootstrap4/form.html' import render_form %}For Bootstrap 5, use the Bootstrap5 class:
from flask_bootstrap import Bootstrap5
# ...
bootstrap = Bootstrap5(app)and import macros from the template path bootstrap5/:
{% from 'bootstrap5/form.html' import render_form %}The Bootstrap class and bootstrap/ template path are deprecated since 2.0
and will be removed in 3.0.
If you come from Flask-Bootstrap, check out this tutorial on how to migrate to this extension.
For guidance on setting up a development environment and how to make a contribution to Bootstrap-Flask, see the development documentation and Flask's contributing guidelines.
This project is licensed under the MIT License (see the LICENSE file for
details). Some macros were part of Flask-Bootstrap and were modified under
the terms of its BSD License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent