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:
fromflaskimportFlask# To follow the naming rule of Flask extension, although# this project's name is Bootstrap-Flask, the actual package# installed is named `flask_bootstrap`.fromflask_bootstrapimportBootstrap5app=Flask(__name__)
bootstrap=Bootstrap5(app)Assuming you have a Flask-WTF form like this:
classLoginForm(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.
https://bootstrap-flask-example.azurewebsites.net/
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:
fromflask_bootstrapimportBootstrap4# ...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:
fromflask_bootstrapimportBootstrap5# ...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.