Bootstrap 5-Color System
Bootstrap 5 provides a color class for text to convey the particular meaning of the sentence. Bootstrap 5 uses color classes to display different colors are called contextual classes.
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)
- .text-light:
Example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h5> Bootstrap 5 colors</h5>
<p class = "text-muted"> Bootstrap 5 content is muted. </p>
<p class = "text-primary"> Bootstrap 5 content is important. </p>
<p class = "text-success"> Bootstrap 5 content indicates success. </p>
<p class = "text-info"> Bootstrap 5 content conveys some information. </p>
<p class = "text-light bg-dark"> Bootstrap 5 content is light grey </p>
<p class = "text-warning"> Bootstrap 5 content shows a warning. </p>
<p class = "text-danger"> Bootstrap 5 content shows alert or danger.</p>
<p class = "text-secondary"> Bootstrap 5 content is Secondary text. </p>
<p class = "text-dark"> Bootstrap 5 content is dark grey.</p>
<p class = "text-body"> Bootstrap 5 content shows Default body color. </p>
<p class = "text-white bg-dark"> Bootstrap 5 content is white </p>
</div>
</body>
</html>
Output
Bootstrap 5 colors
Bootstrap 5 content is muted.
Bootstrap 5 content is important.
Bootstrap 5 content indicates success.
Bootstrap 5 content conveys some information.
Bootstrap 5 content is light grey
Bootstrap 5 content shows a warning.
Bootstrap 5 content shows alert or danger.
Bootstrap 5 content is Secondary text.
Bootstrap 5 content is dark grey.
Bootstrap 5 content shows Default body color.
Bootstrap 5 content is white
Background Colors
The classes for background colors are:- .bg-primary
- .bg-success
- .bg-info
- .bg-warning
- .bg-dange
- .bg-secondary
- .bg-dark
- .bg-light
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h5> Bootstrap 5 bg-colors</h5>
<p class = "bg-muted"> Bootstrap 5 background color is muted. </p>
<p class = "bg-primary"> Bootstrap 5 background color represents function is important. </p>
<p class = "bg-success"> Bootstrap 5 background color indicates success. </p>
<p class = "bg-info"> Bootstrap 5 background color conveys informative function. </p>
<p class = "bg-light"> Bootstrap 5 background color is light grey </p>
<p class = "bg-warning"> Bootstrap 5 background color shows a warning. </p>
<p class = "bg-danger"> Bootstrap 5 background color shows alert or danger. </p>
<p class = "bg-secondary"> Bootstrap 5 background color represents function is Secondary. </p>
<p class = "bg-dark"> Bootstrap 5 background color is dark grey. </p>
<p class = "bg-body"> Bootstrap 5 background shows Default body color. </p>
<p class = "bg-white"> Bootstrap 5 background color is white </p>
</div>
</body>
</html>
Output
Bootstrap 5 bg-colors
Bootstrap 5 background color is muted.
Bootstrap 5 background color represents function is important.
Bootstrap 5 background color indicates success.
Bootstrap 5 background color conveys informative function.
Bootstrap 5 background color is light grey
Bootstrap 5 background color shows a warning.
Bootstrap 5 background color shows alert or danger.
Bootstrap 5 background color represents function is Secondary.
Bootstrap 5 background color is dark grey.
Bootstrap 5 background shows Default body color.
Bootstrap 5 background color is white
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: