✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash bootstrap component alerts not showing css colors

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

Your app declaration should be

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

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 ??