Background colors
Background utilities colour an element's background using the theme.
In this page:
Syntax
<div class="bg-primary text-white p-3">content</div>
<div class="bg-success-subtle">content</div>Background colors
Use .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light and .bg-dark. Subtle variants such as .bg-primary-subtle are softer and support dark mode. .bg-gradient adds a subtle gradient.
Pair with text-* or text-bg-* for readable contrast.
Note:
text-bg-primary sets both background and a readable text colour.
Example: Background colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="p-3 mb-2 bg-primary text-white">bg-primary</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">bg-success-subtle</div>
<div class="p-3 mb-2 text-bg-dark">text-bg-dark</div>
<div class="p-3 mb-2 bg-warning bg-gradient">bg-warning with gradient</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using dark text on dark backgrounds
- Forgetting text colour changes
- Custom CSS for standard colours
Chapter Summary
- bg-{theme} sets a background
- -subtle variants are softer
- bg-gradient adds a gradient
- Pair with readable text colours
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: