0
# Bootstrap-Flask
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: Bootstrap-Flask
7
- **Language**: Python
8
- **Installation**: `pip install bootstrap-flask`
9
- **Dependencies**: Flask, WTForms
10

11
## Core Imports
12

13
```python
14
from flask_bootstrap import Bootstrap4, Bootstrap5
15
```
16

17
Legacy (deprecated):
18
```python
19
from flask_bootstrap import Bootstrap  # Deprecated, use Bootstrap4
20
```
21

22
Additional imports:
23
```python
24
from flask_bootstrap import SwitchField, get_table_titles, is_hidden_field_filter
25
```
26

27
## Basic Usage
28

29
### Extension Setup
30

31
```python
32
from flask import Flask
33
from flask_bootstrap import Bootstrap5
34

35
app = Flask(__name__)
36
bootstrap = Bootstrap5(app)
37

38
# Or with application factory pattern
39
bootstrap = Bootstrap5()
40

41
def create_app():
42
    app = Flask(__name__)
43
    bootstrap.init_app(app)
44
    return app
45
```
46

47
### Template Usage
48

49
```html
50
<!-- Load Bootstrap resources -->
51
{{ bootstrap.load_css() }}
52
{{ bootstrap.load_js() }}
53

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

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

62
<!-- Render a data table -->
63
{% from 'base/table.html' import render_table %}
64
{{ render_table(data) }}
65
```
66

67
## Architecture
68

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

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

77
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.
78

79
## Capabilities
80

81
### Extension Setup and Configuration
82

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

85
```python { .api }
86
class Bootstrap4:
87
    def __init__(self, app=None): ...
88
    def init_app(self, app): ...
89
    def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None): ...
90
    def load_js(self, version=None, jquery_version=None, popper_version=None, 
91
               with_jquery=True, with_popper=True, bootstrap_sri=None, 
92
               jquery_sri=None, popper_sri=None, nonce=None): ...
93
    def load_icon_font_css(self): ...
94

95
class Bootstrap5:
96
    def __init__(self, app=None): ...
97
    def init_app(self, app): ...
98
    def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None): ...
99
    def load_js(self, version=None, popper_version=None, with_popper=True,
100
               bootstrap_sri=None, popper_sri=None, nonce=None): ...
101
    def load_icon_font_css(self): ...
102
```
103

104
[Extension Setup](./extension-setup.md)
105

106
### Form Rendering
107

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

110
```python { .api }
111
# Jinja macros available in templates
112
def render_form(form, action="", method="post", form_type="basic", ...): ...
113
def render_field(field, form_type="basic", horizontal_columns=('lg', 2, 10), ...): ...
114
def render_form_row(fields, row_class='row', col_class_default='col', ...): ...
115
def render_hidden_errors(form): ...
116
```
117

118
[Form Rendering](./form-rendering.md)
119

120
### Table Rendering
121

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

124
```python { .api }
125
# Jinja macros available in templates  
126
def render_table(data, titles=None, primary_key='id', primary_key_title='#',
127
                caption=None, table_classes=None, header_classes=None,
128
                body_classes=None, responsive=False, responsive_class='table-responsive',
129
                safe_columns=None, urlize_columns=None, model=None,
130
                show_actions=False, actions_title='Actions', custom_actions=None,
131
                view_url=None, edit_url=None, delete_url=None, new_url=None,
132
                action_pk_placeholder=':id'): ...
133
```
134

135
[Table Rendering](./table-rendering.md)
136

137
### Navigation Components
138

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

141
```python { .api }
142
# Jinja macros available in templates
143
def render_nav_item(endpoint, text, _badge='', _use_li=False, _badge_classes=''): ...
144
def render_breadcrumb_item(endpoint, text): ...
145
```
146

147
[Navigation Components](./navigation.md)
148

149
### Pagination
150

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

153
```python { .api }
154
# Jinja macros available in templates
155
def render_pagination(pagination, endpoint=None, prev='&laquo;', next='&raquo;',
156
                     size=None, ellipses='…', args={}, fragment='', align=''): ...
157
def render_pager(pagination, fragment='', prev='Previous', next='Next', align=''): ...
158
```
159

160
[Pagination](./pagination.md)
161

162
### Flash Messages and Utilities
163

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

166
```python { .api }
167
# Jinja macros available in templates
168
def render_messages(messages=None, container=False, dismissible=False, ...): ...
169
def render_icon(name, size=None, color=None, title=None, classes=None, font=False): ...
170
def render_static(type, filename_or_url, local=True): ...
171
```
172

173
[Flash Messages and Utilities](./utilities.md)
174

175
### Python Utility Functions
176

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

179
```python { .api }
180
def is_hidden_field_filter(field) -> bool: ...
181
def get_table_titles(data, primary_key, primary_key_title) -> list: ...
182
def raise_helper(message) -> None: ...
183

184
class SwitchField(BooleanField):
185
    def __init__(self, label=None, **kwargs): ...
186
```
187

188
[Python Utilities](./python-utilities.md)
189

190
## Configuration Variables
191

192
Bootstrap-Flask supports extensive configuration through Flask config variables:
193

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

205
## Template Import Patterns
206

207
### Bootstrap 5 (Recommended)
208
```html
209
{% from 'bootstrap5/form.html' import render_form, render_field %}
210
{% from 'bootstrap5/utils.html' import render_messages %}
211
{% from 'bootstrap5/nav.html' import render_nav_item %}
212
```
213

214
### Bootstrap 4
215
```html
216
{% from 'bootstrap4/form.html' import render_form, render_field %}
217
{% from 'bootstrap4/utils.html' import render_messages %}
218
{% from 'bootstrap4/nav.html' import render_nav_item %}
219
```
220

221
### Base Templates (Version-agnostic)
222
```html
223
{% from 'base/table.html' import render_table %}
224
{% from 'base/pagination.html' import render_pagination %}
225
{% from 'base/utils.html' import render_icon, render_static %}
226
```
227

228
### Deprecated (Bootstrap 4 only)
229
```html
230
{% from 'bootstrap/form.html' import render_form, render_field %}
231
{% from 'bootstrap/utils.html' import render_messages %}
232
{% from 'bootstrap/nav.html' import render_nav_item %}
233
```
234

235
**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.