Dash Bootstrap Components

2.0.4 · active · verified Fri Apr 10

Dash Bootstrap Components (dbc) provides a set of Bootstrap-themed components for building interactive Plotly Dash applications. It brings popular UI elements like cards, modals, navbars, and layouts, styled with Bootstrap 5. The current stable version is 2.0.4, with a regular cadence of patch releases addressing bug fixes and minor improvements, typically every few weeks.

Warnings

breaking Version 2.0.0 introduced a major upgrade to Bootstrap 5. This means CSS classes, styling, and some component properties may have changed significantly compared to 1.x.x versions. Direct migration without checking Bootstrap 5 documentation or dbc's changelog may lead to broken layouts.
Fix: Review your application's CSS classes and dbc component properties against Bootstrap 5 documentation and the dbc 2.0 changelog. Update `external_stylesheets` to use `dbc.themes.BOOTSTRAP` or a compatible theme.
gotcha Dash Bootstrap Components require a compatible version of the `dash` library. For dbc versions 2.0.3 and newer, `dash>=3.0.4` is a strict requirement. Using an older `dash` version may lead to runtime errors or unexpected behavior.
Fix: Ensure your `dash` installation meets the minimum version requirement, e.g., `pip install 'dash>=3.0.4'`.
gotcha Components will not be styled correctly without including Bootstrap CSS. You must pass `external_stylesheets=[dbc.themes.BOOTSTRAP]` (or another `dbc.themes` constant, or a custom URL) when initializing your `Dash` app.
Fix: Modify your `Dash` app initialization: `app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])`.

Install

pip install dash-bootstrap-components Install stable version

Imports

dbc
```
import dash_bootstrap_components as dbc
```
html
```
from dash import html
```
dcc
```
from dash import dcc
```
Dash
```
from dash import Dash
```

Quickstart

This quickstart demonstrates a basic Dash application using Dash Bootstrap Components. It includes a Bootstrap-styled container, an alert, a button, and an input field with a callback, all leveraging dbc's theming and components. It's crucial to include `external_stylesheets=[dbc.themes.BOOTSTRAP]` when initializing the Dash app for correct styling.

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Container([
        html.H1("Hello dbc!"),
        dbc.Alert("This is a primary alert", color="primary"),
        dbc.Button("Click Me", color="success", className="me-2"),
        dcc.Input(id="my-input", value="Hello world", type="text"),
        html.Div(id="my-output")
    ])
])

@app.callback(
    Output("my-output", "children"),
    Input("my-input", "value"),
)
def update_output(input_value):
    return f"You entered: {input_value}"

if __name__ == '__main__':
    app.run_server(debug=True)

view raw JSON →