Add initial support for Bootstrap 5

.gitignore

@@ -105,3 +105,6 @@ ENV/
 
 # VSCode
 .vscode/
+
+# Other
+.DS_Store

CHANGES.rst

@@ -9,7 +9,13 @@ Release date: -
 
 - Drop Python 2 and 3.5 support.
 - Combine ``class`` argument of ``render_field`` or ``field.render_kw.class`` with Bootstrap classes
-   (`#159 <https://github.com/greyli/bootstrap-flask/pull/159>`__).
+  (`#159 <https://github.com/greyli/bootstrap-flask/pull/159>`__).
+- Add initial support for Bootstrap 5 (`#161 <https://github.com/greyli/bootstrap-flask/pull/161>`__):
+  - Add ``Bootstrap4`` class and deprecate ``Bootstrap``.
+  - Add ``Bootstrap5`` class for Bootstrap 5 support.
+  - Move Bootstrap 4-related files to ``bootstrap4`` subfolder, and deprecate template path ``bootstrap/``.
+  - Bootstrap 4 macros are in the ``bootstrap4/`` template folder, and Bootstrap 5 macros are in ``bootstrap5/``.
+  - Add seperate tests, templates, static files, and examples for Bootstrap 5.
 
 
 1.8.0

README.md

@@ -5,7 +5,7 @@
 [![Build status](https://github.com/greyli/bootstrap-flask/workflows/build/badge.svg)](https://github.com/greyli/bootstrap-flask/actions)
 [![Coverage Status](https://coveralls.io/repos/github/greyli/bootstrap-flask/badge.svg?branch=master)](https://coveralls.io/github/greyli/bootstrap-flask?branch=master)
 
-Bootstrap 4 helper for Flask/Jinja2.
+Bootstrap-Flask is a collection of Jinja macros for Bootstrap and Flask. It helps you to render Flask-related objects and data to Bootstrap HTML more easily.
 
 If you come from Flask-Bootstrap, check out [this tutorial](https://bootstrap-flask.readthedocs.io/en/stable/migrate.html) on how to migrate to this extension.
 
@@ -22,5 +22,3 @@ If you come from Flask-Bootstrap, check out [this tutorial](https://bootstrap-fl
 
 This project is licensed under the MIT License (see the
 `LICENSE` file for details).
-
-Some macros were part of [Flask-Bootstrap](https://github.com/mbr/flask-bootstrap) and were modified under the terms of its BSD License.

docs/_templates/sidebarintro.html

@@ -1,8 +1,6 @@
 <h3>About</h3>
 <p>
-    <a href="https://getbootstrap.com">Bootstrap</a> 4 helper for Flask/Jinja2.
-    Based on <a href="https://github.com/mbr/flask-bootstrap">Flask-Bootstrap</a>,
-but lighter and better.
+    <a href="https://getbootstrap.com">Bootstrap</a> helper for Flask.
 </p>
 <h3>Useful Links</h3>
 <ul>

docs/advanced.rst

@@ -69,7 +69,7 @@ Or you can use ``button_style`` parameter when using ``render_form``, ``render_f
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form %}
+    {% from 'bootstrap4/form.html' import render_form %}
 
     {{ render_form(form, button_style='success') }}
 
@@ -92,18 +92,18 @@ Now you can use a configuration variable called ``BOOTSTRAP_BTN_STYLE`` to set g
 .. code-block:: python
 
     from flask import Flask
-    from flask_bootstrap import Bootstrap
+    from flask_bootstrap import Bootstrap4
 
     app = Flask(__name__)
-    bootstrap = Bootstrap(app)
+    bootstrap = Bootstrap4(app)
 
     app.config['BOOTSTRAP_BTN_SIZE'] = 'sm'  # default to 'md'
 
 there also a parameter called ``button_size`` in form related macros (it will overwrite ``BOOTSTRAP_BTN_SIZE``):
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form %}
+    {% from 'bootstrap4/form.html' import render_form %}
 
     {{ render_form(form, button_size='lg') }}
 
@@ -119,7 +119,7 @@ Here is a more complicate example:
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form %}
+    {% from 'bootstrap4/form.html' import render_form %}
 
     {{ render_form(form, button_map={'submit': 'success', 'cancel': 'secondary', 'delete': 'danger'}) }}
 
@@ -138,6 +138,8 @@ The available theme names are: 'cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly'
 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate',
 'solar', 'spacelab', 'superhero', 'united', 'yeti'.
 
+For Bootstrap 5, besides these, you can also use: 'morph', 'quartz', 'vapor', 'zephyr'.
+
 Here is an example to use ``lumen`` theme:
 
 .. code-block:: python

docs/basic.rst

@@ -22,12 +22,23 @@ Initialization
 
 .. code-block:: python
 
-    from flask_bootstrap import Bootstrap
+    from flask_bootstrap import Bootstrap4
     from flask import Flask
 
     app = Flask(__name__)
 
-    bootstrap = Bootstrap(app)
+    bootstrap = Bootstrap4(app)
+
+If you want to use Bootstrap 5, import and instanzlize the ``Bootstrap5`` class instead:
+
+.. code-block:: python
+
+    from flask_bootstrap import Bootstrap5
+    from flask import Flask
+
+    app = Flask(__name__)
+
+    bootstrap = Bootstrap5(app)
 
 Resources helpers
 -----------------
@@ -96,40 +107,47 @@ Macros
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
 | Macro                     | Templates Path                 | Description                                                        |
 +===========================+================================+====================================================================+
-| render_field()            | bootstrap/form.html            | Render a WTForms form field                                        |
+| render_field()            | bootstrap4/form.html           | Render a WTForms form field                                        |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_form()             | bootstrap/form.html            | Render a WTForms form                                              |
+| render_form()             | bootstrap4/form.html           | Render a WTForms form                                              |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_form_row()         | bootstrap/form.html            | Render a row of a grid form                                        |
+| render_form_row()         | bootstrap4/form.html           | Render a row of a grid form                                        |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_hidden_errors()    | bootstrap/form.html            | Render error messages for hidden form field                        |
+| render_hidden_errors()    | bootstrap4/form.html           | Render error messages for hidden form field                        |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_pager()            | bootstrap/pagination.html      | Render a basic Flask-SQLAlchemy pagniantion                        |
+| render_pager()            | bootstrap4/pagination.html     | Render a basic Flask-SQLAlchemy pagniantion                        |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_pagination()       | bootstrap/pagination.html      | Render a standard Flask-SQLAlchemy pagination                      |
+| render_pagination()       | bootstrap4/pagination.html     | Render a standard Flask-SQLAlchemy pagination                      |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_nav_item()         | bootstrap/nav.html             | Render a navigation item                                           |
+| render_nav_item()         | bootstrap4/nav.html            | Render a navigation item                                           |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_breadcrumb_item()  | bootstrap/nav.html             | Render a breadcrumb item                                           |
+| render_breadcrumb_item()  | bootstrap4/nav.html            | Render a breadcrumb item                                           |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_static()           | bootstrap/utils.html           | Render a resource reference code (i.e. ``<link>``, ``<script>``)   |
+| render_static()           | bootstrap4/utils.html          | Render a resource reference code (i.e. ``<link>``, ``<script>``)   |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_messages()         | bootstrap/utils.html           | Render flashed messages send by flash() function                   |
+| render_messages()         | bootstrap4/utils.html          | Render flashed messages send by flash() function                   |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_icon()             | bootstrap/utils.html           | Render a Bootstrap icon                                            |
+| render_icon()             | bootstrap4/utils.html          | Render a Bootstrap icon                                            |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
-| render_table()            | bootstrap/table.html           | Render a table with given data                                     |
+| render_table()            | bootstrap4/table.html          | Render a table with given data                                     |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
 
 How to use these macros? It's quite simple, just import them from the
 corresponding path and call them like any other macro:
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form %}
+    {% from 'bootstrap4/form.html' import render_form %}
 
     {{ render_form(form) }}
 
+Notice we import Bootstrap 4 macros from the path ``bootstrap4/...``, if you are using Bootstrap 5, import them from
+the ``bootstrap5/...`` path instead:
+
+.. code-block:: jinja
+
+    {% from 'bootstrap5/form.html' import render_form %}
+
 Go to the :doc:`macros` page to see the detailed usage for these macros.
 
 Configurations

docs/index.rst

@@ -1,7 +1,7 @@
 Bootstrap-Flask
 ===============
 
-`Bootstrap 4 <https://getbootstrap.com>`_ helper for Flask/Jinja2.
+`Bootstrap <https://getbootstrap.com>`_ helper for Flask.
 
 
 Contents
@@ -62,7 +62,7 @@ Then run tests with tox:
 Authors
 -------
 
-Maintainer: `Grey Li <http://greyli.com>`_
+Maintainer: `Grey Li <https://github.com/greyli>`_
 
 See also the list of
 `contributors <https://github.com/greyli/bootstrap-flask/contributors>`_
@@ -74,5 +74,3 @@ License
 
 This project is licensed under the MIT License (see the
 ``LICENSE`` file for details).
-
-Some macros were part of `Flask-Bootstrap <https://github.com/mbr/flask-bootstrap>`_ and were modified under the terms of its BSD License.

docs/macros.rst

@@ -12,7 +12,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/nav.html' import render_nav_item %}
+    {% from 'bootstrap4/nav.html' import render_nav_item %}
 
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="navbar-nav mr-auto">
@@ -43,7 +43,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/nav.html' import render_breadcrumb_item %}
+    {% from 'bootstrap4/nav.html' import render_breadcrumb_item %}
 
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -72,7 +72,7 @@ Example
 ~~~~~~~~
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_field %}
+    {% from 'bootstrap4/form.html' import render_field %}
 
     <form method="post">
         {{ form.csrf_token() }}
@@ -85,7 +85,7 @@ You can pass any HTTP attributes as extra keyword arguements like ``class`` or `
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_field %}
+    {% from 'bootstrap4/form.html' import render_field %}
 
     <form method="post">
         {{ form.csrf_token() }}
@@ -129,7 +129,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form %}
+    {% from 'bootstrap4/form.html' import render_form %}
 
     {{ render_form(form) }}
 
@@ -188,7 +188,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_field, render_hidden_errors %}
+    {% from 'bootstrap4/form.html' import render_field, render_hidden_errors %}
 
     <form method="post">
         {{ form.hidden_tag() }}
@@ -216,7 +216,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/form.html' import render_form_row %}
+    {% from 'bootstrap4/form.html' import render_form_row %}
 
     <form method="post">
         {{ form.csrf_token() }}
@@ -267,7 +267,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/pagination.html' import render_pager %}
+    {% from 'bootstrap4/pagination.html' import render_pager %}
 
     {{ render_pager(pagination) }}
 
@@ -299,7 +299,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/pagination.html' import render_pagination %}
+    {% from 'bootstrap4/pagination.html' import render_pagination %}
 
     {{ render_pagination(pagination) }}
 
@@ -346,7 +346,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/utils.html' import render_static %}
+    {% from 'bootstrap4/utils.html' import render_static %}
 
     {{ render_static('css', 'style.css') }}
 
@@ -384,7 +384,7 @@ Render the messages in your base template (normally below the navbar):
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/utils.html' import render_messages %}
+    {% from 'bootstrap4/utils.html' import render_messages %}
 
     <nav>...</nav>
     {{ render_messages() }}
@@ -440,7 +440,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/table.html' import render_table %}
+    {% from 'bootstrap4/table.html' import render_table %}
 
     {{ render_table(data) }}
 
@@ -524,7 +524,7 @@ Here is the full example:
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/table.html' import render_table %}
+    {% from 'bootstrap4/table.html' import render_table %}
 
     {{ render_table(data, model=Message, view_url=('view_message', [('message_id', ':id')])) }}
 
@@ -565,7 +565,7 @@ Example
 
 .. code-block:: jinja
 
-    {% from 'bootstrap/utils.html' import render_icon %}
+    {% from 'bootstrap4/utils.html' import render_icon %}
 
     {{ render_icon('heart') }}
 

examples/README.rst

@@ -8,6 +8,19 @@ Type these commands in the terminal:
     $ git clone https://github.com/greyli/bootstrap-flask.git
     $ cd bootstrap-flask/examples
     $ pip install -r requirements.txt
-    $ flask run
+
+Then based on the Bootstrap version you want to use to run the application.
+
+Bootstrap 4:
+
+.. code-block:: bash
+
+    $ python bootstrap4/app.py
+
+Bootstrap 5:
+
+.. code-block:: bash
+
+    $ python bootstrap5/app.py
 
 Now go to http://localhost:5000.

examples/app.py → examples/bootstrap4/app.py

@@ -1,13 +1,13 @@
 # -*- coding: utf-8 -*-
-from flask import Flask, render_template, request, flash, Markup, jsonify
+from flask import Flask, render_template, request, flash, Markup
 
 from flask_wtf import FlaskForm, CSRFProtect
 from wtforms import StringField, SubmitField, BooleanField, PasswordField, IntegerField, TextField,\
     FormField, SelectField, FieldList
 from wtforms.validators import DataRequired, Length
 from wtforms.fields import *
 
-from flask_bootstrap import Bootstrap
+from flask_bootstrap import Bootstrap4
 from flask_sqlalchemy import SQLAlchemy
 
 app = Flask(__name__)
@@ -27,7 +27,7 @@
 app.config['BOOTSTRAP_TABLE_DELETE_TITLE'] = 'Remove'
 app.config['BOOTSTRAP_TABLE_NEW_TITLE'] = 'Create'
 
-bootstrap = Bootstrap(app)
+bootstrap = Bootstrap4(app)
 db = SQLAlchemy(app)
 csrf = CSRFProtect(app)
 

examples/templates/base.html → examples/bootstrap4/templates/base.html

@@ -1,5 +1,5 @@
-{% from 'bootstrap/nav.html' import render_nav_item %}
-{% from 'bootstrap/utils.html' import render_messages %}
+{% from 'bootstrap4/nav.html' import render_nav_item %}
+{% from 'bootstrap4/utils.html' import render_messages %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -50,7 +50,7 @@
 
     <footer class="text-center">
         {% block footer %}
-            <small> &copy; 2018–<script>document.write(new Date().getFullYear())</script> <a href="http://greyli.com" title="Written by Grey Li">Grey Li</a>
+            <small> &copy; 2018–<script>document.write(new Date().getFullYear())</script> <a href="https://github.com/greyli">Grey Li</a>
             </small>
         {% endblock %}
     </footer>