0
# Extension Setup and Configuration
1
2
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.
3
4
## Capabilities
5
6
### Bootstrap Extension Classes
7
8
#### Bootstrap4 Extension
9
10
Extension class for Bootstrap 4.6.1 integration with jQuery and Popper.js support.
11
12
```python { .api }
13
class Bootstrap4:
14
"""
15
Extension class for Bootstrap 4.
16
17
Attributes:
18
bootstrap_version (str): '4.6.1'
19
jquery_version (str): '3.5.1'
20
popper_version (str): '1.16.1'
21
icons_version (str): '1.11.3'
22
"""
23
24
def __init__(self, app=None):
25
"""
26
Initialize Bootstrap4 extension.
27
28
Args:
29
app: Flask application instance (optional)
30
"""
31
32
def init_app(self, app):
33
"""
34
Initialize extension with Flask application.
35
36
Args:
37
app: Flask application instance
38
39
Sets up:
40
- Blueprint registration for static assets
41
- Jinja global functions and filters
42
- Default configuration values
43
"""
44
```
45
46
#### Bootstrap5 Extension
47
48
Extension class for Bootstrap 5.3.5 integration with Popper.js (no jQuery required).
49
50
```python { .api }
51
class Bootstrap5:
52
"""
53
Extension class for Bootstrap 5.
54
55
Attributes:
56
bootstrap_version (str): '5.3.5'
57
popper_version (str): '2.11.8'
58
icons_version (str): '1.11.3'
59
"""
60
61
def __init__(self, app=None):
62
"""
63
Initialize Bootstrap5 extension.
64
65
Args:
66
app: Flask application instance (optional)
67
"""
68
69
def init_app(self, app):
70
"""
71
Initialize extension with Flask application.
72
73
Args:
74
app: Flask application instance
75
76
Sets up:
77
- Blueprint registration for static assets
78
- Jinja global functions and filters
79
- Default configuration values including Bootstrap 5 specific options
80
"""
81
```
82
83
#### Deprecated Bootstrap Extension
84
85
```python { .api }
86
class Bootstrap(Bootstrap4):
87
"""
88
Deprecated alias for Bootstrap4. Will be removed in version 3.0.
89
Issues deprecation warning on initialization.
90
"""
91
92
def __init__(self, app=None):
93
"""Deprecated. Use Bootstrap4 instead."""
94
```
95
96
### Static Resource Loading
97
98
#### CSS Resource Loading
99
100
Load Bootstrap CSS with optional Bootswatch themes and SRI integrity.
101
102
```python { .api }
103
def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None):
104
"""
105
Load Bootstrap CSS resources.
106
107
Args:
108
version (str, optional): Bootstrap version (defaults to extension version)
109
bootstrap_sri (str, optional): SRI integrity hash for security
110
bootswatch_theme (str, optional): Bootswatch theme name
111
112
Returns:
113
Markup: HTML <link> tag for CSS
114
115
Config variables used:
116
BOOTSTRAP_SERVE_LOCAL: Use local files vs CDN
117
BOOTSTRAP_BOOTSWATCH_THEME: Default theme name
118
"""
119
```
120
121
#### JavaScript Resource Loading
122
123
Load Bootstrap JavaScript and dependencies with SRI integrity and CSP nonce support.
124
125
```python { .api }
126
# Bootstrap 4 version
127
def load_js(self, version=None, jquery_version=None, popper_version=None,
128
with_jquery=True, with_popper=True, bootstrap_sri=None,
129
jquery_sri=None, popper_sri=None, nonce=None):
130
"""
131
Load Bootstrap 4 and related JavaScript resources.
132
133
Args:
134
version (str, optional): Bootstrap version
135
jquery_version (str, optional): jQuery version (required for Bootstrap 4)
136
popper_version (str, optional): Popper.js version
137
with_jquery (bool): Include jQuery (default: True)
138
with_popper (bool): Include Popper.js (default: True)
139
bootstrap_sri (str, optional): Bootstrap SRI hash
140
jquery_sri (str, optional): jQuery SRI hash
141
popper_sri (str, optional): Popper.js SRI hash
142
nonce (str, optional): CSP nonce for strict CSP policies
143
144
Returns:
145
Markup: HTML <script> tags for JavaScript libraries
146
"""
147
148
# Bootstrap 5 version
149
def load_js(self, version=None, popper_version=None, with_popper=True,
150
bootstrap_sri=None, popper_sri=None, nonce=None):
151
"""
152
Load Bootstrap 5 and related JavaScript resources.
153
154
Args:
155
version (str, optional): Bootstrap version
156
popper_version (str, optional): Popper.js version
157
with_popper (bool): Include Popper.js (default: True)
158
bootstrap_sri (str, optional): Bootstrap SRI hash
159
popper_sri (str, optional): Popper.js SRI hash
160
nonce (str, optional): CSP nonce for strict CSP policies
161
162
Returns:
163
Markup: HTML <script> tags for JavaScript libraries
164
165
Note: Bootstrap 5 does not require jQuery
166
"""
167
```
168
169
#### Icon Font Loading
170
171
Load Bootstrap Icons CSS for icon font usage.
172
173
```python { .api }
174
def load_icon_font_css(self):
175
"""
176
Load Bootstrap Icons CSS for font-based icon usage.
177
178
Returns:
179
Markup: HTML <link> tag for Bootstrap Icons CSS
180
181
Config variables used:
182
BOOTSTRAP_SERVE_LOCAL: Use local files vs CDN
183
"""
184
```
185
186
### Configuration Management
187
188
Bootstrap-Flask automatically sets default values for Flask configuration variables during `init_app()`.
189
190
#### Core Configuration Variables
191
192
```python { .api }
193
# Asset serving configuration
194
BOOTSTRAP_SERVE_LOCAL = False # Use CDN by default
195
196
# UI component defaults
197
BOOTSTRAP_BTN_STYLE = 'primary' # Default button style
198
BOOTSTRAP_BTN_SIZE = 'md' # Default button size
199
BOOTSTRAP_BOOTSWATCH_THEME = None # No theme by default
200
201
# Icon configuration
202
BOOTSTRAP_ICON_SIZE = '1em' # Default icon size
203
BOOTSTRAP_ICON_COLOR = None # No default color
204
BOOTSTRAP_ICON_USE_FONT = False # Use SVG icons by default
205
206
# Message styling
207
BOOTSTRAP_MSG_CATEGORY = 'primary' # Default flash message category
208
209
# Table action titles
210
BOOTSTRAP_TABLE_VIEW_TITLE = 'View'
211
BOOTSTRAP_TABLE_EDIT_TITLE = 'Edit'
212
BOOTSTRAP_TABLE_DELETE_TITLE = 'Delete'
213
BOOTSTRAP_TABLE_NEW_TITLE = 'New'
214
215
# Bootstrap 5 specific form styling
216
BOOTSTRAP_FORM_GROUP_CLASSES = 'mb-3' # Form group spacing
217
BOOTSTRAP_FORM_INLINE_CLASSES = 'row row-cols-lg-auto g-3 align-items-center' # Inline form layout
218
```
219
220
### Jinja Environment Setup
221
222
The extension registers several global functions and variables in the Jinja environment:
223
224
```python { .api }
225
# Global variables available in templates
226
bootstrap # Extension instance
227
bootstrap_is_hidden_field # is_hidden_field_filter function
228
get_table_titles # Table title helper function
229
warn # warnings.warn function
230
raise # raise_helper function
231
```
232
233
## Usage Examples
234
235
### Basic Flask Application Setup
236
237
```python
238
from flask import Flask
239
from flask_bootstrap import Bootstrap5
240
241
app = Flask(__name__)
242
app.config['BOOTSTRAP_SERVE_LOCAL'] = True # Use local assets
243
app.config['BOOTSTRAP_BOOTSWATCH_THEME'] = 'cerulean' # Use Bootswatch theme
244
245
bootstrap = Bootstrap5(app)
246
247
@app.route('/')
248
def index():
249
return '''
250
<!DOCTYPE html>
251
<html>
252
<head>
253
<title>Bootstrap Flask App</title>
254
{{ bootstrap.load_css() }}
255
</head>
256
<body>
257
<div class="container">
258
<h1 class="text-primary">Hello Bootstrap!</h1>
259
</div>
260
{{ bootstrap.load_js() }}
261
</body>
262
</html>
263
'''
264
```
265
266
### Application Factory Pattern
267
268
```python
269
from flask import Flask
270
from flask_bootstrap import Bootstrap5
271
272
bootstrap = Bootstrap5()
273
274
def create_app(config_name='default'):
275
app = Flask(__name__)
276
277
# Configure Bootstrap
278
app.config['BOOTSTRAP_SERVE_LOCAL'] = False
279
app.config['BOOTSTRAP_BTN_STYLE'] = 'outline-primary'
280
281
bootstrap.init_app(app)
282
283
return app
284
```
285
286
### Resource Loading in Templates
287
288
```html
289
<!DOCTYPE html>
290
<html>
291
<head>
292
<meta charset="utf-8">
293
<meta name="viewport" content="width=device-width, initial-scale=1">
294
<title>My App</title>
295
296
<!-- Load Bootstrap CSS -->
297
{{ bootstrap.load_css() }}
298
299
<!-- Load Bootstrap Icons (optional) -->
300
{{ bootstrap.load_icon_font_css() }}
301
</head>
302
<body>
303
<div class="container">
304
<!-- Your content here -->
305
</div>
306
307
<!-- Load Bootstrap JavaScript -->
308
{{ bootstrap.load_js() }}
309
</body>
310
</html>
311
```
312
313
### Custom Configuration
314
315
```python
316
app.config.update({
317
'BOOTSTRAP_SERVE_LOCAL': True, # Serve from local files
318
'BOOTSTRAP_BOOTSWATCH_THEME': 'darkly', # Dark theme
319
'BOOTSTRAP_BTN_STYLE': 'success', # Green buttons by default
320
'BOOTSTRAP_BTN_SIZE': 'lg', # Large buttons by default
321
'BOOTSTRAP_ICON_SIZE': '1.5em', # Larger icons
322
'BOOTSTRAP_ICON_COLOR': 'primary', # Blue icons
323
'BOOTSTRAP_MSG_CATEGORY': 'info', # Info-style flash messages
324
})
325
```
326
327
### SRI and CSP Security
328
329
```python
330
# Load resources with SRI integrity and CSP nonce
331
{{ bootstrap.load_css(bootstrap_sri='sha384-...') }}
332
{{ bootstrap.load_js(bootstrap_sri='sha384-...', nonce=csp_nonce) }}
333
```