Installation instructions and basic usage.
You can install dash-bootstrap-components with
pip install dash-bootstrap-components
You can also install dash-bootstrap-components with
conda through the
conda install -c conda-forge dash-bootstrap-components
dash-bootstrap-components is a component library for use with Plotly Dash. If you have not used Dash before, it's strongly recommended you check out the Dash documentation and try building a basic app first.
To use dash-bootstrap-components you must do two things:
- Link a Bootstrap v5 compatible stylesheet
- Incorporate dash-bootstrap-components into the layout of your app.
Linking a stylesheet
dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.
For convenience, CDN links to JSDelivr for standard Bootstrap and each Bootswatch theme are available as part of dash-bootstrap-components within the
dbc.themes submodule and can be used when instantiating the
import dash import dash_bootstrap_components as dbc app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
For more information on available themes see the themes documentation
Build the layout
With CSS linked, you can start building your app's layout with our Bootstrap components. See the component documentation for a full list of available components, or try running this minimal example to get started.
import dash import dash_bootstrap_components as dbc app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = dbc.Container( dbc.Alert("Hello Bootstrap!", color="success"), className="p-5", ) if __name__ == "__main__": app.run_server()
Check out these example apps made with dash-bootstrap-components.