Bootstrap 4 & 5 helper for your Flask projects.
Project description
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
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 demo
https://bootstrap-flask-example.azurewebsites.net/
Donate
If you find Bootstrap-Flask useful, please consider donating today. Your donation keeps Bootstrap-Flask maintained and updated with Bootstrap.
Links
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.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file bootstrap_flask-2.4.1.tar.gz
.
File metadata
- Download URL: bootstrap_flask-2.4.1.tar.gz
- Upload date:
- Size: 3.8 MB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.1.1 CPython/3.12.7
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | cc25c59495f150550ea41d0e8079689de4250fe45445e158abdc111f8fe883e2 |
|
MD5 | 508cd90cf14581cacc239105551036cc |
|
BLAKE2b-256 | 9f9d10ee6ee17ee1da2d49c752c6dbabdc45be66f9b6c60b0b3feb2c2733245d |
Provenance
File details
Details for the file Bootstrap_Flask-2.4.1-py3-none-any.whl
.
File metadata
- Download URL: Bootstrap_Flask-2.4.1-py3-none-any.whl
- Upload date:
- Size: 3.9 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.1.1 CPython/3.12.7
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 222df5b42c7795b121ed4709c534466c892e04ee31bfac7234de3ea64c106c27 |
|
MD5 | 344873310cc0deba029d5f8cbcacfa7e |
|
BLAKE2b-256 | 7ecbf8b2487ffaee50016293fe364bb6693776fae846bff69cbc41371e475a07 |