{"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":"python","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,"search_vec":"'2.0.4':42 '5':36 'address':50 'applic':21 'bootstrap':2,5,13,35,61 'bootstrap-them':12 'bring':23 'bug':51 'build':17 'cadenc':46 'card':28 'compon':3,6,15,63 'current':38 'dash':1,4,20,60 'dbc':7 'element':26 'everi':57 'fix':52 'frontend':64 'improv':55 'interact':18 'layout':32 'like':27 'minor':54 'modal':29 'navbar':30 'patch':48 'plot':19,65 'popular':24 'provid':8 'regular':45 'releas':49 'set':10 'stabl':39 'style':33 'theme':14 'typic':56 'ui':25,62 'version':40 'week':59","created_at":"2026-04-11T01:28:54.507505+00:00","updated_at":"2026-04-16T05:05:05.602322+00:00","problems":[{"fix":"Install the package using `pip install dash-bootstrap-components`. If using a virtual environment, ensure it is activated. Verify the correct Python interpreter is running the script.","cause":"The 'dash-bootstrap-components' package is not installed in the Python environment being used, or the Python interpreter cannot locate the installed package.","error":"ModuleNotFoundError: No module named 'dash_bootstrap_components'"},{"fix":"Remove `no_gutters=True` from your `dbc.Row` component and instead apply `className='g-0'` to achieve the same effect of removing horizontal and vertical gutters, or use more specific gutter classes like `gx-0` or `gy-0`.","cause":"The `no_gutters` keyword argument for `dbc.Row` was deprecated in `dash-bootstrap-components` version 1.0.0 (which updated to Bootstrap 5) and replaced by Bootstrap's gutter utility classes.","error":"TypeError: The dash_bootstrap_components.Row component (version X.X.X) received an unexpected keyword argument: 'no_gutters'"},{"fix":"Check the official documentation for your installed `dash-bootstrap-components` version to confirm the correct naming and availability of components and themes. Consider upgrading to the latest version (`pip install --upgrade dash-bootstrap-components`) if you intend to use newer features or themes.","cause":"This error typically indicates a version mismatch, where a theme or component attribute used in the code does not exist or has been renamed/deprecated in the installed version of `dash-bootstrap-components` (e.g., 'ModalTitle' was introduced in v1.0.0, and theme availability can change).","error":"AttributeError: module 'dash_bootstrap_components.themes' has no attribute 'ZEPHYR' (or similar for other components/themes like 'ModalTitle', 'PaginationItem')"},{"fix":"Ensure you are linking a Bootstrap v5 compatible stylesheet when initializing your Dash app. The recommended way is to use `external_stylesheets=[dbc.themes.BOOTSTRAP]` (or another theme from `dbc.themes`) when creating your `dash.Dash` instance.","cause":"The necessary Bootstrap CSS stylesheet is not correctly linked to the Dash application, preventing `dash-bootstrap-components` from applying its styling.","error":"Dash Bootstrap components not showing / layout not working (e.g., columns stacking instead of aligning horizontally)"},{"fix":"Ensure all components, especially those involved in callbacks, have unique `id`s. For callbacks using `n_clicks`, make sure `n_clicks` is the only `Input` if you want it to trigger only on clicks, or use `State` to access values from other components without triggering the callback. Also, inspect your callbacks for unexpected re-renders or issues causing the `n_clicks` value to reset (e.g., a component being re-created or a parent property changing).","cause":"Common causes include duplicate `id`s for components in the layout, the `n_clicks` property resetting unexpectedly due to overall layout re-renders, or incorrect handling of `n_clicks` in the callback logic.","error":"dbc.Button n_clicks callback not working (or callbacks not firing consistently for a button)"}],"ecosystem":"pypi","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":"2.0.4","cli_name":"","cli_version":null,"type":"library","homepage":"https://www.dash-bootstrap-components.com/","github":"https://github.com/dbc-team/dash-bootstrap-components","docs":null,"changelog":null,"pypi":"https://pypi.org/project/dash-bootstrap-components/","npm":null,"openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":"passing","verified_at":"2026-06-28","last_verified":"2026-08-28","next_check":"2026-07-28","install_tag":null}}