Text Color Classes in Bootstrap 5

In Bootstrap 5, text color classes are used to apply different colors to text elements, such as paragraphs, headings, links, and other HTML elements. These classes allow developers to easily style text with different colors without having to write custom CSS.

Bootstrap 5 provides a wide range of text color classes that can be applied to elements. The general format for a text color class in Bootstrap 5 is text-{color}, where {color} can be one of the predefined color values, such as primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black, and more.

By using the text color classes in Bootstrap 5, you can easily customize the color of your text elements and create visually appealing text styles for your web applications.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/base.css">
  <style>
   
  </style>

</head>
<body>
  <div class="container">
      <h2>Color in Bootstrap</h2><hr>
      <p class="text-primary">.text-primary</p>
      <p class="text-secondary">.text-secondary</p>
      <p class="text-success">.text-success</p>
      <p class="text-warning bg-dark">.text-warning</p>
      <p class="text-danger">.text-danger</p>
      <p class="text-info">.text-info</p>
      <p class="text-light bg-dark">.text-info</p>
      <p class="text-white bg-dark">.text-info</p>
      <p class="text-muted">.text-muted</p>
      <p class="bg-primary text-bg-primary display-4">Tutor Joes</p>
      <p class="bg-secondary text-bg-secondary display-4">Tutor Joes</p>
      <p class="display-4 text-black">Tutor Joes</p>
      <p class="display-4 text-black-50">Tutor Joes</p>
      <p class="display-4 text-white  bg-dark">Tutor Joes</p>
      <p class="display-4 text-white-50  bg-dark">Tutor Joes</p>

      <hr>
<div class="text-primary display-4">Tutor Joes</div>
<div class="text-primary display-4 text-opacity-75">Tutor Joes</div>
<div class="text-primary display-4 text-opacity-50">Tutor Joes</div>
<div class="text-primary display-4 text-opacity-25">Tutor Joes</div>


  </div>
  

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Preview

Text Color Classes in Bootstrap 5

Example

Bootstrap 5.3X Tutorial

components