You can install dash-bootstrap-components with pip
:
pip install dash-bootstrap-components
You can also install dash-bootstrap-components with conda
through the conda-forge channel
conda install -c conda-forge dash-bootstrap-components
dash-bootstrap-components relies on Twitter
Bootstrap. To use this package, inject the Bootstrap
stylesheet into your application. For convenience, links to
Bootstrap CSS hosted on
bootstrapcdn
are included as part of the themes
module:
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
dash-bootstrap-components makes it easy to structure your application visually. The following template creates a basic app structure with a navbar:
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("Link", href="#")),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Menu",
children=[
dbc.DropdownMenuItem("Entry 1"),
dbc.DropdownMenuItem("Entry 2"),
dbc.DropdownMenuItem(divider=True),
dbc.DropdownMenuItem("Entry 3"),
],
),
],
brand="Demo",
brand_href="#",
sticky="top",
)
body = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.H2("Heading"),
html.P(
"""\
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non
mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui."""
),
dbc.Button("View details", color="secondary"),
],
md=4,
),
dbc.Col(
[
html.H2("Graph"),
dcc.Graph(
figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]}
),
]
),
]
)
],
className="mt-4",
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([navbar, body])
if __name__ == "__main__":
app.run_server()
Sometimes you may wish to take advantage of Bootstrap's grid system
for controlling the layout of your app, without including all of the
typography changes and additional CSS classes that come with it. In
such scenarios, it's possible to link just the
bootstrap-grid.css
stylesheet. The easiest way to do this
is to use the CDN link in the themes
module:
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID])
If you prefer, you can also
download
bootstrap-grid.css
yourself, and place it in your
assets/
directory, as described in the
Plotly Dash documentation
.
With just the grid CSS, you should only expect the layout components
Container
, Row
and Col
to
work properly. Other components require additional classes and styles
that are not included in the Bootstrap grid stylesheet.
The easiest way to get started with
dash-bootstrap-components is to include the
Bootstrap stylesheet from a CDN, as described above. If
you want to use a custom stylesheet, you will need to
include it in your assets/
directory, as
described in the Plotly Dash
documentation.
A good way to start customising the stylesheet is to use
an alternative pre-compiled theme. Bootswatch is a great
place to find new themes. Links to CDNs for each of the Bootswatch
styles are also included in themes
, and can be used
with the external_stylesheets
argument of the
Dash
constructor:
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CERULEAN])
You can also download the base CSS from GitHub,
place it in the assets/
directory for your
application and modify it. For instance, to use the
Cerulean theme, you would download
/dist/cerulean/bootstrap.css
from the
Bootswatch GitHub repository.
If you find a bug, or if something is unclear, we encourage you to raise an issue on GitHub.
We welcome contributions to dash-bootstrap-components. To contribute, fork the repository and open a pull request.