or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

extension-setup.mdform-rendering.mdindex.mdnavigation.mdpagination.mdpython-utilities.mdtable-rendering.mdutilities.md
tile.json

tessl/pypi-bootstrap-flask

Bootstrap 4 & 5 helper for Flask projects providing Jinja macros for forms, tables, navigation, and utilities.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
pypipkg:pypi/bootstrap-flask@2.5.x

To install, run

npx @tessl/cli install tessl/pypi-bootstrap-flask@2.5.0

index.mddocs/

Bootstrap-Flask

Bootstrap-Flask is a collection of Jinja macros for Bootstrap 4 & 5 that simplifies integrating Bootstrap with Flask web applications. It provides utilities for rendering Flask-WTF/WTForms form objects to Bootstrap markup, converting data objects to Bootstrap tables, and rendering Flask-SQLAlchemy Pagination objects to Bootstrap pagination components.

Package Information

  • Package Name: Bootstrap-Flask
  • Language: Python
  • Installation: pip install bootstrap-flask
  • Dependencies: Flask, WTForms

Core Imports

from flask_bootstrap import Bootstrap4, Bootstrap5

Legacy (deprecated):

from flask_bootstrap import Bootstrap  # Deprecated, use Bootstrap4

Additional imports:

from flask_bootstrap import SwitchField, get_table_titles, is_hidden_field_filter

Basic Usage

Extension Setup

from flask import Flask
from flask_bootstrap import Bootstrap5

app = Flask(__name__)
bootstrap = Bootstrap5(app)

# Or with application factory pattern
bootstrap = Bootstrap5()

def create_app():
    app = Flask(__name__)
    bootstrap.init_app(app)
    return app

Template Usage

<!-- Load Bootstrap resources -->
{{ bootstrap.load_css() }}
{{ bootstrap.load_js() }}

<!-- Render a form -->
{% from 'bootstrap5/form.html' import render_form %}
{{ render_form(form) }}

<!-- Render flash messages -->
{% from 'bootstrap5/utils.html' import render_messages %}
{{ render_messages() }}

<!-- Render a data table -->
{% from 'base/table.html' import render_table %}
{{ render_table(data) }}

Architecture

Bootstrap-Flask provides two main extension classes supporting different Bootstrap versions:

  • Bootstrap4: Extension for Bootstrap 4.6.1 with jQuery and Popper.js dependencies
  • Bootstrap5: Extension for Bootstrap 5.3.5 with Popper.js (no jQuery required)
  • Template Hierarchy: Base templates (version-agnostic) extended by version-specific templates
  • Static Assets: Bundled Bootstrap, jQuery, and Popper.js files for local serving
  • CDN Support: Automatic CDN resource loading with SRI integrity checking

The extension registers Jinja global functions and macros, configures Flask blueprints for static assets, and provides comprehensive form rendering, table generation, and UI component utilities.

Capabilities

Extension Setup and Configuration

Flask extension classes for Bootstrap 4 and 5 with comprehensive configuration options, static asset management, and CDN/local serving capabilities.

class Bootstrap4:
    def __init__(self, app=None): ...
    def init_app(self, app): ...
    def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None): ...
    def load_js(self, version=None, jquery_version=None, popper_version=None, 
               with_jquery=True, with_popper=True, bootstrap_sri=None, 
               jquery_sri=None, popper_sri=None, nonce=None): ...
    def load_icon_font_css(self): ...

class Bootstrap5:
    def __init__(self, app=None): ...
    def init_app(self, app): ...
    def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None): ...
    def load_js(self, version=None, popper_version=None, with_popper=True,
               bootstrap_sri=None, popper_sri=None, nonce=None): ...
    def load_icon_font_css(self): ...

Extension Setup

Form Rendering

Comprehensive form rendering with Bootstrap styling, supporting basic, inline, and horizontal layouts with validation error display, field grouping, and extensive customization options.

# Jinja macros available in templates
def render_form(form, action="", method="post", form_type="basic", ...): ...
def render_field(field, form_type="basic", horizontal_columns=('lg', 2, 10), ...): ...
def render_form_row(fields, row_class='row', col_class_default='col', ...): ...
def render_hidden_errors(form): ...

Form Rendering

Table Rendering

Data table rendering with Bootstrap styling, supporting CRUD actions, responsive design, pagination integration, and flexible column formatting options.

# Jinja macros available in templates  
def render_table(data, titles=None, primary_key='id', primary_key_title='#',
                caption=None, table_classes=None, header_classes=None,
                body_classes=None, responsive=False, responsive_class='table-responsive',
                safe_columns=None, urlize_columns=None, model=None,
                show_actions=False, actions_title='Actions', custom_actions=None,
                view_url=None, edit_url=None, delete_url=None, new_url=None,
                action_pk_placeholder=':id'): ...

Table Rendering

Navigation Components

Navigation and breadcrumb components with Bootstrap styling, supporting badges, active state management, and flexible link generation.

# Jinja macros available in templates
def render_nav_item(endpoint, text, _badge='', _use_li=False, _badge_classes=''): ...
def render_breadcrumb_item(endpoint, text): ...

Navigation Components

Pagination

Pagination component rendering for Flask-SQLAlchemy pagination objects with customizable navigation controls, alignment options, and URL fragment support.

# Jinja macros available in templates
def render_pagination(pagination, endpoint=None, prev='&laquo;', next='&raquo;',
                     size=None, ellipses='…', args={}, fragment='', align=''): ...
def render_pager(pagination, fragment='', prev='Previous', next='Next', align=''): ...

Pagination

Flash Messages and Utilities

Flash message rendering with Bootstrap alert styling, icon rendering system, and utility functions for static resource management.

# Jinja macros available in templates
def render_messages(messages=None, container=False, dismissible=False, ...): ...
def render_icon(name, size=None, color=None, title=None, classes=None, font=False): ...
def render_static(type, filename_or_url, local=True): ...

Flash Messages and Utilities

Python Utility Functions

Helper functions for form field detection, table title generation, and template error handling.

def is_hidden_field_filter(field) -> bool: ...
def get_table_titles(data, primary_key, primary_key_title) -> list: ...
def raise_helper(message) -> None: ...

class SwitchField(BooleanField):
    def __init__(self, label=None, **kwargs): ...

Python Utilities

Configuration Variables

Bootstrap-Flask supports extensive configuration through Flask config variables:

  • BOOTSTRAP_SERVE_LOCAL: Serve static files locally vs CDN (default: False)
  • BOOTSTRAP_BTN_STYLE: Default button style (default: 'primary')
  • BOOTSTRAP_BTN_SIZE: Default button size (default: 'md')
  • BOOTSTRAP_BOOTSWATCH_THEME: Bootswatch theme name (default: None)
  • BOOTSTRAP_ICON_SIZE: Default icon size (default: '1em')
  • BOOTSTRAP_ICON_COLOR: Default icon color (default: None)
  • BOOTSTRAP_MSG_CATEGORY: Default message category (default: 'primary')
  • BOOTSTRAP_TABLE_*_TITLE: Table action button titles
  • BOOTSTRAP_FORM_GROUP_CLASSES: Bootstrap 5 form group classes (default: 'mb-3')
  • BOOTSTRAP_FORM_INLINE_CLASSES: Bootstrap 5 inline form classes

Template Import Patterns

Bootstrap 5 (Recommended)

{% from 'bootstrap5/form.html' import render_form, render_field %}
{% from 'bootstrap5/utils.html' import render_messages %}
{% from 'bootstrap5/nav.html' import render_nav_item %}

Bootstrap 4

{% from 'bootstrap4/form.html' import render_form, render_field %}
{% from 'bootstrap4/utils.html' import render_messages %}
{% from 'bootstrap4/nav.html' import render_nav_item %}

Base Templates (Version-agnostic)

{% from 'base/table.html' import render_table %}
{% from 'base/pagination.html' import render_pagination %}
{% from 'base/utils.html' import render_icon, render_static %}

Deprecated (Bootstrap 4 only)

{% from 'bootstrap/form.html' import render_form, render_field %}
{% from 'bootstrap/utils.html' import render_messages %}
{% from 'bootstrap/nav.html' import render_nav_item %}

Note: The bootstrap/ template path is deprecated since version 2.0 and will be removed in 3.0. Use bootstrap4/ instead for Bootstrap 4 compatibility.