Menu
Bootstrap 5 Colors
Text Colors
Bootstrap 5 has some contextual classes that can be used to provide “meaning through colors”.
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-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 Colors</h2>
<p>Use the contextual classes to provide “meaning through colors”:</p>
<p>This text is muted.</p>
<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 text.</p>
<p>This text is dark grey.</p>
<p>Default body color (often black).</p>
<p>This text is light grey (on white background).</p>
<p>This text is white (on white background).</p>
</div>
</body>
</html>
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
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>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p>Black text with 50% opacity on white background</p>
<p>White text with 50% opacity on black background</p>
</div>
</body>
</html>
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>