tessl/pypi-bootstrap-flask

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Extension Setup and Configuration

Name: tessl/pypi-bootstrap-flask
Author: tessl

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

Capabilities

Bootstrap Extension Classes

Bootstrap4 Extension

Extension class for Bootstrap 4.6.1 integration with jQuery and Popper.js support.

class Bootstrap4:
    """
    Extension class for Bootstrap 4.
    
    Attributes:
        bootstrap_version (str): '4.6.1'
        jquery_version (str): '3.5.1' 
        popper_version (str): '1.16.1'
        icons_version (str): '1.11.3'
    """
    
    def __init__(self, app=None):
        """
        Initialize Bootstrap4 extension.
        
        Args:
            app: Flask application instance (optional)
        """
    
    def init_app(self, app):
        """
        Initialize extension with Flask application.
        
        Args:
            app: Flask application instance
            
        Sets up:
        - Blueprint registration for static assets
        - Jinja global functions and filters
        - Default configuration values
        """

Bootstrap5 Extension

Extension class for Bootstrap 5.3.5 integration with Popper.js (no jQuery required).

class Bootstrap5:
    """
    Extension class for Bootstrap 5.
    
    Attributes:
        bootstrap_version (str): '5.3.5'
        popper_version (str): '2.11.8'
        icons_version (str): '1.11.3'
    """
    
    def __init__(self, app=None):
        """
        Initialize Bootstrap5 extension.
        
        Args:
            app: Flask application instance (optional)
        """
    
    def init_app(self, app):
        """
        Initialize extension with Flask application.
        
        Args:
            app: Flask application instance
            
        Sets up:
        - Blueprint registration for static assets
        - Jinja global functions and filters  
        - Default configuration values including Bootstrap 5 specific options
        """

Deprecated Bootstrap Extension

class Bootstrap(Bootstrap4):
    """
    Deprecated alias for Bootstrap4. Will be removed in version 3.0.
    Issues deprecation warning on initialization.
    """
    
    def __init__(self, app=None):
        """Deprecated. Use Bootstrap4 instead."""

Static Resource Loading

CSS Resource Loading

Load Bootstrap CSS with optional Bootswatch themes and SRI integrity.

def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None):
    """
    Load Bootstrap CSS resources.
    
    Args:
        version (str, optional): Bootstrap version (defaults to extension version)
        bootstrap_sri (str, optional): SRI integrity hash for security
        bootswatch_theme (str, optional): Bootswatch theme name
        
    Returns:
        Markup: HTML <link> tag for CSS
        
    Config variables used:
        BOOTSTRAP_SERVE_LOCAL: Use local files vs CDN
        BOOTSTRAP_BOOTSWATCH_THEME: Default theme name
    """

JavaScript Resource Loading

Load Bootstrap JavaScript and dependencies with SRI integrity and CSP nonce support.

# Bootstrap 4 version
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):
    """
    Load Bootstrap 4 and related JavaScript resources.
    
    Args:
        version (str, optional): Bootstrap version
        jquery_version (str, optional): jQuery version (required for Bootstrap 4)
        popper_version (str, optional): Popper.js version
        with_jquery (bool): Include jQuery (default: True)
        with_popper (bool): Include Popper.js (default: True)
        bootstrap_sri (str, optional): Bootstrap SRI hash
        jquery_sri (str, optional): jQuery SRI hash
        popper_sri (str, optional): Popper.js SRI hash
        nonce (str, optional): CSP nonce for strict CSP policies
        
    Returns:
        Markup: HTML <script> tags for JavaScript libraries
    """

# Bootstrap 5 version  
def load_js(self, version=None, popper_version=None, with_popper=True,
           bootstrap_sri=None, popper_sri=None, nonce=None):
    """
    Load Bootstrap 5 and related JavaScript resources.
    
    Args:
        version (str, optional): Bootstrap version
        popper_version (str, optional): Popper.js version
        with_popper (bool): Include Popper.js (default: True)
        bootstrap_sri (str, optional): Bootstrap SRI hash
        popper_sri (str, optional): Popper.js SRI hash
        nonce (str, optional): CSP nonce for strict CSP policies
        
    Returns:
        Markup: HTML <script> tags for JavaScript libraries
        
    Note: Bootstrap 5 does not require jQuery
    """

Icon Font Loading

Load Bootstrap Icons CSS for icon font usage.

def load_icon_font_css(self):
    """
    Load Bootstrap Icons CSS for font-based icon usage.
    
    Returns:
        Markup: HTML <link> tag for Bootstrap Icons CSS
        
    Config variables used:
        BOOTSTRAP_SERVE_LOCAL: Use local files vs CDN
    """

Configuration Management

Bootstrap-Flask automatically sets default values for Flask configuration variables during init_app().

Core Configuration Variables

# Asset serving configuration
BOOTSTRAP_SERVE_LOCAL = False  # Use CDN by default

# UI component defaults
BOOTSTRAP_BTN_STYLE = 'primary'     # Default button style
BOOTSTRAP_BTN_SIZE = 'md'           # Default button size
BOOTSTRAP_BOOTSWATCH_THEME = None   # No theme by default

# Icon configuration
BOOTSTRAP_ICON_SIZE = '1em'         # Default icon size
BOOTSTRAP_ICON_COLOR = None         # No default color
BOOTSTRAP_ICON_USE_FONT = False     # Use SVG icons by default

# Message styling
BOOTSTRAP_MSG_CATEGORY = 'primary'  # Default flash message category

# Table action titles
BOOTSTRAP_TABLE_VIEW_TITLE = 'View'
BOOTSTRAP_TABLE_EDIT_TITLE = 'Edit'
BOOTSTRAP_TABLE_DELETE_TITLE = 'Delete'
BOOTSTRAP_TABLE_NEW_TITLE = 'New'

# Bootstrap 5 specific form styling
BOOTSTRAP_FORM_GROUP_CLASSES = 'mb-3'                              # Form group spacing
BOOTSTRAP_FORM_INLINE_CLASSES = 'row row-cols-lg-auto g-3 align-items-center'  # Inline form layout

Jinja Environment Setup

The extension registers several global functions and variables in the Jinja environment:

# Global variables available in templates
bootstrap                    # Extension instance
bootstrap_is_hidden_field   # is_hidden_field_filter function
get_table_titles            # Table title helper function
warn                        # warnings.warn function
raise                       # raise_helper function

Usage Examples

Basic Flask Application Setup

from flask import Flask
from flask_bootstrap import Bootstrap5

app = Flask(__name__)
app.config['BOOTSTRAP_SERVE_LOCAL'] = True  # Use local assets
app.config['BOOTSTRAP_BOOTSWATCH_THEME'] = 'cerulean'  # Use Bootswatch theme

bootstrap = Bootstrap5(app)

@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Flask App</title>
        {{ bootstrap.load_css() }}
    </head>
    <body>
        <div class="container">
            <h1 class="text-primary">Hello Bootstrap!</h1>
        </div>
        {{ bootstrap.load_js() }}
    </body>
    </html>
    '''

Application Factory Pattern

from flask import Flask
from flask_bootstrap import Bootstrap5

bootstrap = Bootstrap5()

def create_app(config_name='default'):
    app = Flask(__name__)
    
    # Configure Bootstrap
    app.config['BOOTSTRAP_SERVE_LOCAL'] = False
    app.config['BOOTSTRAP_BTN_STYLE'] = 'outline-primary'
    
    bootstrap.init_app(app)
    
    return app

Resource Loading in Templates

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My App</title>
    
    <!-- Load Bootstrap CSS -->
    {{ bootstrap.load_css() }}
    
    <!-- Load Bootstrap Icons (optional) -->
    {{ bootstrap.load_icon_font_css() }}
</head>
<body>
    <div class="container">
        <!-- Your content here -->
    </div>
    
    <!-- Load Bootstrap JavaScript -->
    {{ bootstrap.load_js() }}
</body>
</html>

Custom Configuration

app.config.update({
    'BOOTSTRAP_SERVE_LOCAL': True,           # Serve from local files
    'BOOTSTRAP_BOOTSWATCH_THEME': 'darkly', # Dark theme
    'BOOTSTRAP_BTN_STYLE': 'success',       # Green buttons by default
    'BOOTSTRAP_BTN_SIZE': 'lg',             # Large buttons by default
    'BOOTSTRAP_ICON_SIZE': '1.5em',         # Larger icons
    'BOOTSTRAP_ICON_COLOR': 'primary',      # Blue icons
    'BOOTSTRAP_MSG_CATEGORY': 'info',       # Info-style flash messages
})

SRI and CSP Security

# Load resources with SRI integrity and CSP nonce
{{ bootstrap.load_css(bootstrap_sri='sha384-...') }}
{{ bootstrap.load_js(bootstrap_sri='sha384-...', nonce=csp_nonce) }}

Install with Tessl CLI