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.
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:
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