Menu
Bootstrap 5 Background Colors
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide “meaning through colors”.</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
The .bg-color classes above does not work well with text, or atleast then you have to specify a proper .text-color class to get the right text color for each background.
However, you can use the .text-bg-color classes and Bootstrap will automatically handle the appropriate text color for each background color:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Background Color with Contrasting Text Color</h2>
<p>This text is important.</p>
<p>This text indicates success.</p>
<p>This text represents some information.</p>
<p>This text represents a warning.</p>
<p>This text represents danger.</p>
<p>Secondary background color.</p>
<p>Dark grey background color.</p>
<p>Light grey background color.</p>
</div>
</body>
</html>