Dash bootstrap component alerts not showing css colors

Dash Python
1

I am trying to use Dash Alerts bootstrap components on my dash app but the alerts are not displaying colors like “primary” , "warning " etc so when i load my app it doesn’t get loaded with the colors

app = dash.Dash(name)
alerts = html.Div(
[
dbc.Alert(“This is a primary alert”, color="#ff3300"),
dbc.Alert(“This is a secondary alert”, color=“secondary”),
dbc.Alert(“This is a success alert! Well done!”, color=“success”),
dbc.Alert(“This is a warning alert… be careful…”, color=“warning”),
dbc.Alert(“This is a danger alert. Scary!”, color=“danger”),
dbc.Alert(“This is an info alert. Good to know!”, color=“info”),
dbc.Alert(“This is a light alert”, color=“light”),
dbc.Alert(“This is a dark alert”, color=“dark”),
]
)

I am returning these alerts in one callback function

@app.callback(dash.dependencies.Output(‘page-content’, ‘children’),
[dash.dependencies.Input(‘url’, ‘search’),Input(‘graph-update’, ‘n_intervals’)])
def display_page(search,n_intervals):
return alerts

How to load these standard colors on my app ?How to make it work any help is appreciated

2

Your app declaration should be

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

How to update the alert text with the graph values every time the graph updates?
I am using .format() in the text inside the alerts text but it does not updates the alert text even though alerts are returned from a callback function which has been assigned an input of graph update ??
Is the text inside alerts static ??

4

No, the text can be altered by altering the “children” property and treating the “children” property of the Alert as though the value were a text string. However, when I did this the “color” property failed to set properly (despite the fact that I had done nothing to change it) and I haven’t figured out why yet.