Bootstrap Rows + Columns With Dash

Dash Python
4

As I mention in this reply, my strategy for managing Bootstrap classes is similar to @mikesmith1611 but more general. I use Row and Col functions that would allow me to write your code like this:

Row([
    Col([
        html.H3('Facebook Overview'),
        html.P('Spend (Last 30 Days): $%.2f' % fb_total_spend),
        html.P('Spend (Yesterday): $%.2f' % fb_yesterday_spend),
    ]),
    Col([
        html.H3('Adwords Overview'),
        html.P('Spend (Last 30 Days): $%.2f' % google_total_spend),
        html.P('Spend (Yesterday): $%.2f' % google_yesterday_spend),
    ]),
    Col([
        html.H3('All Accounts Overview'),
        html.P('Spend (Last 30 Days): $%.2f' % total_30day_spend),
        html.P('Spend (Yesterday): $%.2f' % total_yesterday_spend),
    ]),
])

(Note that you can pass the children keyword argument in without a name if it’s the first argument)

You could define Col and Row as simple functions that just wrap html.Divs or you could also make them a bit more intelligent in how they pass on kwargs etc into the inner components. I do a bit of that in this project. You can find the functions in components.py which make use of a decorator to help pass through arguments.