Dash Bootstrap Components Cheatsheet

Dash Python
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