Bootstrap 5 Colors

Bootstrap 5 provides multiple color classes for the web component. Bootstrap 5 colors convey a message about the function, element, and text. It provides a class to display text and background in the required color. For example, the red color gives the ":danger" class in the tag.

Bootstrap 5 Text color

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.

Syntax

The following table shows us text color and its class in detail.

Bootstrap 5 text color	Description
"text-primary"	This class shows content is important and shows in blue color.
"text-secondary"	This class shows content is secondary and shown in grey color.
"text-muted"	This class shows content is muted and shown in light grey color.
"text-light"	This class shows light grey color content (visible on dark background).
"text-dark"	This class shows in dark grey color content.
"text-info"	This class shows content that is informative and shown in sky blue color.
"text-warning"	This class conveys warning text and is shown in yellow color.
"text-success"	This class conveys success text and shows it in green color.
"text-danger"	This class conveys danger or alert text and is shown in red color.
"text-body"	This class shows in dark grey color content.
"text-white"	This class shows in white color content (visible on dark background).

Example

The following example shows us text color and its class. Here, we can see all the bootstrap 5 color classes for the content.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors 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.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 mt-2 w-25" style = "border:2px solid black;">
<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

The output shows text or content color in the below image.

Bootstrap 5 Background color

Bootstrap 5 provides a color class to the background of the element. These colors convey a particular meaning of the function or features. Bootstrap 5 uses background color classes to display different colors are called contextual classes.

Syntax

The following table shows us the background color and its class in detail.

Bootstrap 5 background color	Description
"bg-primary"	This class shows element is important and shows the background in blue color.
"bg-secondary"	This class shows element is secondary and shows a background in grey color.
"bg-muted"	This class shows element is muted and shown in light grey color.
"bg-light"	This class shows a background in light grey color (visible on dark background).
"bg-dark"	This class shows a background in dark grey color.
"bg-info"	This class shows content that is informative and shown in sky blue color.
"bg-warning"	This class conveys warning background of the function and shows it in yellow color.
"bg-success"	This class conveys success background of the function and shows it in green color.
"bg-danger"	This class conveys danger or alert text and is shown in red color.
"bg-body"	This class shows in dark grey color content.
"bg-white"	This class shows in white color content (visible on dark background).

Example

The following example shows us background color and its class. Here, we can see all the bootstrap 5 color classes for the background of the element.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors 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.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 mt-2 w-50" style = "border: 2px solid black;">
<h5> Bootstrap 5 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

The output shows the background color of the element in the below image.

Bootstrap 5 colors example

The following example uses bootstrap 5 background color in the web page. Here, we can use navigation bar, contrainer-fluid, and grid system in web page. This element displays with required background color and color text.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors 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.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>
<nav class = "navbar navbar-expand-sm bg-dark">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click1 </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click2 </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click </a>
</li>
</ul>
</div>
</nav>
<div class = "container-fluid mt-1 bg-info">
<h5> Bootstrap 5 colors Example </h5>
<p> Bootstrap 5 colors conveys message about the function, element and text. </p>
</div>
<div class = "container-fluid mt-1">
<div class = "row bg-dark ">
<div class = "col bg-warning text-body m-2 py-3"> Invalid Data </div>
<div class = "col bg-success text-warning m-2 py-3"> Valid Data </div>
<div class = "col bg-danger text-white m-2 py-3"> Insert Data </div>
</div>
</div>
</body>
</html>

Output

The output shows the content and background color of the web page in the below image.

Conclusion

Bootstrap 5 colors create web applications that are attractive, eye-catchy, and understandable. This class used to style each element and component of the web page. Some bootstrap 5 color classes provide meaning to the text or component.

Next TopicBootstrap 5 table

← prev next →