{"id":2456,"library":"dash-bootstrap-components","title":"Dash Bootstrap Components","description":"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.","status":"active","version":"2.0.4","language":"en","source_language":"en","source_url":"https://github.com/dbc-team/dash-bootstrap-components/","tags":["dash","bootstrap","ui","components","frontend","plotly"],"install":[{"cmd":"pip install dash-bootstrap-components","lang":"bash","label":"Install stable version"}],"dependencies":[{"reason":"Required for building Dash applications; dbc 2.0.3+ requires dash>=3.0.4.","package":"dash","optional":false}],"imports":[{"symbol":"dbc","correct":"import dash_bootstrap_components as dbc"},{"symbol":"html","correct":"from dash import html"},{"symbol":"dcc","correct":"from dash import dcc"},{"symbol":"Dash","correct":"from dash import Dash"}],"quickstart":{"code":"from dash import Dash, html, dcc\nimport dash_bootstrap_components as dbc\n\napp = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])\n\napp.layout = html.Div([\n    dbc.Container([\n        html.H1(\"Hello dbc!\"),\n        dbc.Alert(\"This is a primary alert\", color=\"primary\"),\n        dbc.Button(\"Click Me\", color=\"success\", className=\"me-2\"),\n        dcc.Input(id=\"my-input\", value=\"Hello world\", type=\"text\"),\n        html.Div(id=\"my-output\")\n    ])\n])\n\n@app.callback(\n    Output(\"my-output\", \"children\"),\n    Input(\"my-input\", \"value\"),\n)\ndef update_output(input_value):\n    return f\"You entered: {input_value}\"\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n","lang":"python","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"2.0.0 and above"},{"fix":"Ensure your `dash` installation meets the minimum version requirement, e.g., `pip install 'dash>=3.0.4'`.","message":"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.","severity":"gotcha","affected_versions":"2.0.3 and above (different requirements for earlier 2.x versions)"},{"fix":"Modify your `Dash` app initialization: `app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])`.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-10T00:00:00.000Z","next_check":"2026-07-09T00:00:00.000Z"}