0
# Dash Bootstrap Components
1

2
Bootstrap themed components for use in Plotly Dash applications, enabling developers to create consistently styled, responsive dashboards and web applications. The library combines React.js components built with Bootstrap styling with Python integration through the Dash framework, offering a comprehensive set of UI components for data visualization applications.
3

4
## Package Information
5

6
- **Package Name**: dash-bootstrap-components
7
- **Language**: Python
8
- **Installation**: `pip install dash-bootstrap-components`
9
- **Conda**: `conda install -c conda-forge dash-bootstrap-components`
10
- **Dependencies**: `dash>=3.0.4`
11

12
## Core Imports
13

14
```python
15
import dash_bootstrap_components as dbc
16
```
17

18
## Basic Usage
19

20
```python
21
import dash
22
import dash_bootstrap_components as dbc
23
from dash import html
24

25
# Create Dash app with Bootstrap theme
26
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
27

28
# Build layout with Bootstrap components
29
app.layout = dbc.Container([
30
    dbc.Row([
31
        dbc.Col([
32
            html.H1("Dashboard Title", className="text-center mb-4"),
33
            dbc.Alert("Welcome to your dashboard!", color="info", className="mb-3"),
34
        ])
35
    ]),
36
    dbc.Row([
37
        dbc.Col([
38
            dbc.Card([
39
                dbc.CardHeader("Data Summary"),
40
                dbc.CardBody([
41
                    html.P("Total Users: 1,234", className="card-text"),
42
                    dbc.Button("View Details", color="primary"),
43
                ])
44
            ])
45
        ], width=6),
46
        dbc.Col([
47
            dbc.Card([
48
                dbc.CardHeader("Quick Actions"),
49
                dbc.CardBody([
50
                    dbc.ButtonGroup([
51
                        dbc.Button("Export", color="success", outline=True),
52
                        dbc.Button("Import", color="warning", outline=True),
53
                        dbc.Button("Settings", color="secondary", outline=True),
54
                    ])
55
                ])
56
            ])
57
        ], width=6),
58
    ])
59
])
60

61
if __name__ == "__main__":
62
    app.run_server(debug=True)
63
```
64

65
## Architecture
66

67
Dash Bootstrap Components is built around several key concepts:
68

69
- **Component Library**: 66 React-based UI components that wrap Bootstrap elements for use in Dash applications
70
- **Theme System**: Pre-configured CSS themes from Bootstrap and Bootswatch for consistent styling
71
- **Python Integration**: Seamless integration with Dash's callback system for interactive functionality
72
- **Responsive Design**: Built-in Bootstrap grid system and responsive utilities
73
- **Icon Support**: Integration with Bootstrap Icons and Font Awesome icon libraries
74

75
All components follow standard Dash patterns with props for `id`, `children`, `style`, `class_name`, and component-specific properties.
76

77
## Capabilities
78

79
### Layout Components
80

81
Essential components for organizing content and creating responsive layouts using Bootstrap's grid system and containers.
82

83
```python { .api }
84
class Container:
85
    def __init__(self, children=None, id=None, style=None, class_name=None, fluid=False, **kwargs): ...
86

87
class Row:
88
    def __init__(self, children=None, id=None, style=None, class_name=None, 
89
                 align=None, justify=None, **kwargs): ...
90

91
class Col:
92
    def __init__(self, children=None, id=None, style=None, class_name=None, 
93
                 width=None, xs=None, sm=None, md=None, lg=None, xl=None, xxl=None, **kwargs): ...
94

95
class Stack:
96
    def __init__(self, children=None, id=None, style=None, class_name=None, 
97
                 direction=None, gap=None, **kwargs): ...
98
```
99

100
[Layout Components](./layout.md)
101

102
### Form Components
103

104
Comprehensive form controls including inputs, selections, validation feedback, and form organization components.
105

106
```python { .api }
107
class Form:
108
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
109

110
class Input:
111
    def __init__(self, id=None, value=None, type="text", placeholder=None, 
112
                 valid=None, invalid=None, plaintext=False, size=None, disabled=False, 
113
                 readonly=False, n_submit=0, n_blur=0, debounce=False, **kwargs): ...
114

115
class Select:
116
    def __init__(self, id=None, options=None, value=None, placeholder=None,
117
                 size=None, disabled=False, **kwargs): ...
118

119
class Checkbox:
120
    def __init__(self, id=None, checked=False, disabled=False, label=None, **kwargs): ...
121

122
class Switch:
123
    def __init__(self, id=None, value=False, disabled=False, label=None, **kwargs): ...
124
```
125

126
[Form Components](./forms.md)
127

128
### Navigation Components
129

130
Navigation bars, breadcrumbs, tabs, and other navigation elements for creating intuitive user interfaces.
131

132
```python { .api }
133
class Navbar:
134
    def __init__(self, children=None, id=None, style=None, class_name=None,
135
                 brand=None, brand_href=None, color=None, dark=None, light=None,
136
                 fixed=None, sticky=None, **kwargs): ...
137

138
class Nav:
139
    def __init__(self, children=None, id=None, style=None, class_name=None,
140
                 vertical=False, pills=False, fill=False, justified=False, **kwargs): ...
141

142
class Breadcrumb:
143
    def __init__(self, items=None, id=None, style=None, class_name=None, **kwargs): ...
144

145
class Tabs:
146
    def __init__(self, children=None, id=None, style=None, class_name=None,
147
                 active_tab=None, **kwargs): ...
148
```
149

150
[Navigation Components](./navigation.md)
151

152
### Button Components
153

154
Interactive buttons and button groups with various styles, sizes, and states.
155

156
```python { .api }
157
class Button:
158
    def __init__(self, children=None, id=None, n_clicks=0, style=None, class_name=None,
159
                 color="primary", size=None, outline=False, active=False, disabled=False,
160
                 href=None, target=None, external_link=False, download=None, type=None,
161
                 name=None, value=None, title=None, rel=None, key=None, **kwargs): ...
162

163
class ButtonGroup:
164
    def __init__(self, children=None, id=None, style=None, class_name=None,
165
                 size=None, vertical=False, **kwargs): ...
166
```
167

168
[Button Components](./buttons.md)
169

170
### Card Components
171

172
Flexible content containers with headers, bodies, footers, and various styling options.
173

174
```python { .api }
175
class Card:
176
    def __init__(self, children=None, id=None, style=None, class_name=None,
177
                 color=None, outline=False, inverse=False, body=False, **kwargs): ...
178

179
class CardHeader:
180
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
181

182
class CardBody:
183
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
184

185
class CardFooter:
186
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
187
```
188

189
[Card Components](./cards.md)
190

191
### Modal Components
192

193
Dialog boxes and modal windows for displaying content overlays and user interactions.
194

195
```python { .api }
196
class Modal:
197
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
198
                 centered=False, fade=True, backdrop=True, size=None, **kwargs): ...
199

200
class ModalHeader:
201
    def __init__(self, children=None, id=None, style=None, class_name=None,
202
                 close_button=True, **kwargs): ...
203

204
class ModalBody:
205
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
206

207
class ModalFooter:
208
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
209
```
210

211
[Modal Components](./modals.md)
212

213
### Feedback Components
214

215
Alerts, badges, progress bars, spinners, and toast notifications for user feedback and status indication.
216

217
```python { .api }
218
class Alert:
219
    def __init__(self, children=None, id=None, style=None, class_name=None,
220
                 color="primary", dismissable=False, is_open=True, **kwargs): ...
221

222
class Badge:
223
    def __init__(self, children=None, id=None, style=None, class_name=None,
224
                 color="primary", pill=False, **kwargs): ...
225

226
class Progress:
227
    def __init__(self, children=None, id=None, style=None, class_name=None,
228
                 value=0, max=100, striped=False, animated=False, color=None, **kwargs): ...
229

230
class Spinner:
231
    def __init__(self, id=None, style=None, class_name=None, size=None,
232
                 color=None, type="border", **kwargs): ...
233
```
234

235
[Feedback Components](./feedback.md)
236

237
### Interactive Components
238

239
Dropdowns, collapsible content, tooltips, popovers, and other interactive elements.
240

241
```python { .api }
242
class DropdownMenu:
243
    def __init__(self, children=None, id=None, style=None, class_name=None,
244
                 label="Toggle Dropdown", direction="down", size=None, color="primary", **kwargs): ...
245

246
class Collapse:
247
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None, **kwargs): ...
248

249
class Tooltip:
250
    def __init__(self, children=None, id=None, target=None, placement="top",
251
                 style=None, class_name=None, **kwargs): ...
252

253
class Popover:
254
    def __init__(self, children=None, id=None, target=None, placement="top",
255
                 style=None, class_name=None, **kwargs): ...
256
```
257

258
[Interactive Components](./interactive.md)
259

260
### Content Components
261

262
Tables, accordions, lists, and other content display components.
263

264
```python { .api }
265
class Table:
266
    def __init__(self, children=None, id=None, style=None, class_name=None,
267
                 striped=False, bordered=False, borderless=False, hover=False,
268
                 dark=False, size=None, responsive=False, **kwargs): ...
269
    
270
    @classmethod
271
    def from_dataframe(cls, df, float_format=None, columns=None, header=True,
272
                      index=False, index_label=None, date_format=None, **table_kwargs): ...
273

274
class Accordion:
275
    def __init__(self, children=None, id=None, style=None, class_name=None,
276
                 active_item=None, always_open=False, **kwargs): ...
277

278
class ListGroup:
279
    def __init__(self, children=None, id=None, style=None, class_name=None,
280
                 flush=False, horizontal=False, **kwargs): ...
281
```
282

283
[Content Components](./content.md)
284

285
### Theme System
286

287
Pre-configured CSS themes and icon libraries for consistent application styling.
288

289
```python { .api }
290
# Bootstrap base themes
291
themes.BOOTSTRAP: str  # Standard Bootstrap CSS
292
themes.GRID: str       # Bootstrap grid-only CSS
293

294
# Bootswatch themes (26 available)
295
themes.CERULEAN: str   # Light blue theme
296
themes.DARKLY: str     # Dark theme
297
themes.FLATLY: str     # Flat design theme
298
themes.BOOTSTRAP: str  # Default Bootstrap theme
299
# ... and 22 more themes
300

301
# Icon libraries
302
icons.BOOTSTRAP: str    # Bootstrap Icons CSS
303
icons.FONT_AWESOME: str # Font Awesome CSS
304
```
305

306
[Themes and Icons](./themes.md)
307

308
## Common Props
309

310
All components support these standard Dash props:
311

312
- **`id`** (string): Component identifier for callbacks
313
- **`children`** (node): Child components or content
314
- **`style`** (dict): Inline CSS styles
315
- **`class_name`** (string): Additional CSS classes
316
- **`key`** (string): React performance optimization key
317

318
Many components also support Bootstrap-specific props:
319

320
- **Color variants**: `"primary"`, `"secondary"`, `"success"`, `"info"`, `"warning"`, `"danger"`, `"light"`, `"dark"`
321
- **Size variants**: `"sm"`, `"lg"`, `"xl"`
322
- **State props**: `outline`, `active`, `disabled`