Dash Bootstrap Components

Responsive layouts and components for Plotly Dash

GitHub Components

Installation


Install dash-bootstrap-components via pip:

pip install dash-bootstrap-components 

Getting started


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])

Layout


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()

Using just the grid system


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.

Customising the 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.

Contributing


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.