Bootstrap colors
Basically in Bootstrap 5 we are having some sort of definite colors by which we can give color to our text or to our background.
So let’s see how we can do that :-
Text Colors
In Bootstrap we are having some limited class or contextual by which we can change the color of our text.
Let’s understand them by this program
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example </title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Colors </h2>
<p>Use the contextual classes to provide "meaning through colors": </p>
<p class="text-muted">This text is muted. </p>
<p class="text-primary">This text is important. </p>
<p class="text-success">This text indicates success. </p>
<p class="text-info">This text represents some information. </p>
<p class="text-warning">This text represents a warning. </p>
<p class="text-danger">This text represents danger. </p>
<p class="text-secondary">Secondary text. </p>
<p class="text-dark">This text is dark grey. </p>
<p class="text-body">Default body color (often black). </p>
<p class="text-light">This text is light grey (on white background). </p>
<p class="text-white">This text is white (on white background). </p>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Contextual Colors
Use the contextual classes to provide "meaning through colors":
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
This text is dark grey.
Default body color (often black).
This text is light grey (on white background).
This text is white (on white background).
So through these classes we changed the colors of the text and these colors also describing words.
Background Colors
< p> In Bootstrap we are having some limited class by which we can change the color of our background.
Let’s understand them by this program
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example </title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Backgrounds </h2>
<p>Use the contextual background classes to provide "meaning through colors". </p>
<p>Note that you can also add a .text-* class if you want a different text color: </p>
<p class="bg-primary text-white">This text is important. </p>
<p class="bg-success text-white">This text indicates success. </p>
<p class="bg-info text-white">This text represents some information. </p>
<p class="bg-warning text-white">This text represents a warning. </p>
<p class="bg-danger text-white">This text represents danger. </p>
<p class="bg-secondary text-white">Secondary background color. </p>
<p class="bg-dark text-white">Dark grey background color. </p>
<p class="bg-light text-dark">Light grey background color. </p>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Contextual Backgrounds
Use the contextual background classes to provide "meaning through colors".
Note that you can also add a .text-* class if you want a different text color:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Here we can see the different background class by these different class.
