Core Code
Core Code Modern Dev Handbook

Colorful Alerts

Bootstrap alerts use theme colors to communicate UI states.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-warning">Warning alert</div>

</div>

</body>
</html>

More BS5 Colors Examples (7)

example Text Color Utilities open example example Background Colors open example example Colored Links open example example Button Theme Colors open example example Card Color Example open example example Badge Colors open example example Color Contrast Example open example