Plotly Dash App Layouts using Bootstrap Stacks

Welcome to the bonus content of “The Book of Dash”. 🤗

Here you will find additional examples of Plotly Dash components, layouts and style.

To learn more about making dashboards with Plotly Dash, and how to buy your copy of “The Book of Dash”, please see the reference section at the bottom of this article.

💡 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 Plotly Dash apps from the official Bootstrap documentation.

Dash Bootstrap Utility Classes

Bootstrap includes dozens of utility classes for showing, hiding, aligning, spacing, and styling content.

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.

👉 Recommended Resource: See all the Bootstrap classes at the Dash Bootstrap Cheatsheet app. This handy cheatsheet is made by a co-author of “The Book of Dash”.

Feel free to watch Adam’s explainer video on Bootstrap and styling your app if you need to get up to speed!

Introduction to Dash Bootstrap - Styling your App

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.

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)

Dash Bootstrap 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.

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

Dash Bootstrap Horizontal Margins

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

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

Dash Bootstrap Vertical Rules

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

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:

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 an in-line form with "hstack"

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",
)

Dash Bootstrap Theme Explorer

You can also find more details and examples in the Dash Bootstrap Theme Explorer Bootstrap Utility Classes Section You will be able to try out different utility classes in a live demo. Here’s an example!

Plotly Dash Example Index

See more examples of Bootstrap utility classes live! Check out the interactive example apps in the Dash Example Index

Reference

Order Your Copy of “The Book of Dash” Today!

• Dash documentation – tutorial. Getting Started with Dash
• Dash Example Index. Lots of sample apps to get you started with Dash!
• Dash Bootstrap Components documentation – Themes
• Dash Bootstrap Cheatsheet A cheatsheet for using Bootstrap utility classes with Dash
• Dash Bootstrap Theme Explorer. A guide for styling Plotly Dash apps with a Bootstrap theme

The Book of Dash Authors

Feel free to learn more about the book’s coauthors here:

Ann Marie Ward:

• 👩‍💻 GitHub: https://github.com/AnnMarieW
• 💬 Dash Forum: https://community.plotly.com/u/annmariew/summary

Adam Schroeder:

• ▶️ YouTube CharmingData: https://www.youtube.com/c/CharmingData

Chris Mayer:

• 🐍 Python + Crypto Email Academy: https://blog.finxter.com/subscribe/