Core Code
Core Code Modern Dev Handbook

Badge Colors

Use badge components with different theme colors.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>

</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 Colorful Alerts open example example Button Theme Colors open example example Card Color Example open example example Color Contrast Example open example