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='«', next='»',
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.