Bootstrap-Flask

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 Pagination object to Bootstrap Pagination.
etc.

Installation

$ pip install -U bootstrap-flask

Example

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 demo

Live demos of the latest release are:

Donate

If you find Bootstrap-Flask useful, please consider donating today. Your donation keeps Bootstrap-Flask maintained and updated with Bootstrap.

Notes for Bootstrap 4 & 5 support

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.

Migration from Flask-Bootstrap

If you come from Flask-Bootstrap, check out this tutorial on how to migrate to this extension.

Contributing

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.

License

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.

davelarsen58/bootstrap-flask