Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts on Bootstrap
@for (alert of alertData; track $index) { {{ alert.message }} }
@for (alert of alertData; track $index) { {{ alert.message }} }
@for (item of linkAlert; track $index) { }

Great job!

You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.

Use margin utilities to keep your content clean and organized.

Heads up!

This alert message gives additional information with a longer message to show content spacing within an alert.

Apply spacing classes wisely to maintain structure and clarity.

Notice!

You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.
@if (showAlerts.primary) { A primary alert with a full border! } @if (showAlerts.secondary) { A secondary alert with a left border only! } @if (showAlerts.dark) { A dark alert with a bottom border! } @if (showAlerts.purple) { A purple alert with a dashed border! } @if (showAlerts.danger) { A danger alert with a thick border! } @if (showAlerts.warning) {
A warning alert with a custom close button!
 } @if (showAlerts.info) { An info alert with a custom icon! } @if (showAlerts.light) {

Notice!

You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.

}
@for (alert of alerts; track $index) { Nice, you triggered this alert message! }