Dash Bootstrap Components Cheatsheet

Dash Python
1

Hey Everyone

Given that the latest version of dash-bootstrap-components v1.0 is based on Bootstrap 5, I made this handy interactive cheatsheet for using Bootstrap 5 classes in your Dash app.

See it live at: Dash Bootstrap Cheatsheet

If you are upgrading fromdash-bootstrap-components v0.13 (which used Bootstrap 4) you will find lots of cool new features – but also some breaking changes. This is mainly because Bootstrap 5 is a major rewrite of the Bootstrap project. Not only are there changes to some of the components, but there are also many new and renamed utility classes.

One example is Bootstrap 5 now supports RTL, so classes are renamed “start” and “end” instead of “left” and “right”. This means the new way to set left or right margin is className="ms-2 me-4" rather than className="ml-2 mr-4". There are also many new things like the opacity classes, and classes that make it easier to make components like: image

For more information see

Hopefully this Cheatsheet will help make it easier to use dbc V1 and Bootstrap 5 in your Dash app.

Note this live site may be moving - so if the link is broken, check GitHub for the latest info.

.

cheatsheet

25 Likes
2

Awesome, thanks for sharing!

1 Like
3

I just updated the cheatsheet for the official release of Dash Bootstrap Components V1.0 released yesterday :confetti_ball:

3 Likes
6

Hi Everyone :wave:

I just wanted to share this mini tutorial on how to use Bootstrap utilities with Dash. This article covers Bootstrap Stacks utility class – the Bootstrap shorthand helper to make component layout faster and easier than ever. The examples are adapted for Dash apps from the official Bootstrap documentation.

Bootstrap utility classes

Bootstrap includes dozens of utility classes for showing, hiding, aligning, spacing and styling content. See all the Bootstrap classes at the Dash Bootstrap Cheatsheet app.

Bootstrap utility classes can be applied to any Dash component to quickly style them without the need to write custom CSS rules. Use the Bootstrap utility classes in the Dash component’s className prop.

Vertical Layouts

Use "vstack" in the className prop to create vertical layouts. Stacked items are full-width by default. Use the "gap-*" utilities to add space between items.

vstack

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="vstack gap-3"
)

app.layout= dbc.Container(stack)

if __name__ == "__main__":
    app.run(debug=True)

Horizontal Layouts

Use "hstack" for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use the "gap-*" utilities to add space between items.

Here we change to a horizontal layout by changing one line of code: Try changing from "vstack" to "hstack" in the example app above.

hstack


stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

Horizontal Margins

This example uses horizontal margin utilities. Here we use "ms-auto" on the second item:

ms-auto


stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border ms-auto"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

Vertical Rules

The utility "vr" is an easy way to add a vertical line between elements.

vr


stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border ms-auto"),
        html.Div(className="vr"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

Use "vstack" to stack buttons and other elements:

vstack-btn


stack = html.Div(
    [
        dbc.Button("Save Changes", color="secondary"),
        dbc.Button("Cancel", color="secondary", outline=True),
    ],
    className="vstack gap-2 col-md-3 mx-auto",
)

Create this responsive in-line form with "hstack"

hstack-form


stack = html.Div(
    [
        dbc.Input(placeholder="Add your item here...", className="me-auto"),
        dbc.Button("Submit", color="secondary"),
        html.Div(className="vr"),
        dbc.Button("Reset", color="danger", outline=True),
    ],
    className="hstack gap-3",
)
5 Likes
7

@AnnMarieW: Hi Ann, first of all, thank you for sharing us this useful cheatsheet. Can I have a question about vr? How can I add vr line when using dbc.Row and dbc.Col? For example:

import dash
from dash import html,callback
import dash_bootstrap_components as dbc

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Input(placeholder="Add your item here...", className="me-auto"),
        ]),
        dbc.Col([
            dbc.Button("Submit", color="secondary"),
        ]),
        html.Div(className="vr"),
        dbc.Col([
            dbc.Button("Reset", color="danger", outline=True),
        ])
    ])
],className="hstack gap-3")

if __name__ == '__main__':
    app.run_server(debug=False,port='8055')

I will look like that:
Screenshot 2022-10-19 094144

Thank you.

1 Like
8

Hi @hoatran

Great question!

When you use hstack you don’t need to put each component in it’s own column. (It’s just a really cool shortcut)

For example, try running this app and resize your browser window:

stack


from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

stack = html.Div(
    [
        dbc.Input(placeholder="Add your item here...", className="me-auto"),
        dbc.Button("Submit", color="secondary"),
        html.Div(className="vr"),
        dbc.Button("Reset", color="danger", outline=True),
    ],
    className="hstack gap-3",
)

app.layout= dbc.Container(stack)

if __name__ == "__main__":
    app.run(debug=True)

It also works with rows and columns - for example your layout could look like this and it would be identical to what you see above:


app.layout= dbc.Container(
    dbc.Row(dbc.Col(stack))
)

Or you could put it in multiple columns. This example will be side-by-side on medium or larger screens and stacked vertically on small screens.

image
image1326×111 10.2 KB 


app.layout= dbc.Container(
   dbc.Row(
        [
            dbc.Col(stack, md=6),
            dbc.Col(stack, md=6),
        ]
    ),
)
3 Likes
9

@AnnMarieW: Thank you so much, I changed my code as below and it worked too, I just added two button in one dbc.Col:

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Input(placeholder="Add your item here...", className="me-auto"),
        ]),
        dbc.Col([
            dbc.Button("Submit", color="secondary", outline=True),
            html.Div(className="vr"),
            dbc.Button("Reset", color="danger", outline=True),
        ],className="hstack gap-3")
    ], className='p-2 align-items-center')
])

if __name__ == '__main__':
    app.run_server(debug=False,port='8055')

Screenshot 2022-10-19 150616
Screenshot 2022-10-19 1506161276×92 3.78 KB

10

@AnnMarieW
Thank you for writing this up and sharing. I just learned a few things as well by reading your tutorial.