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

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.