Bootstrap5 Color

Bootstrap 5 provides a number of representative color classes: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, . text-secondary, .text-white, .text-dark, .text-body (default color, black) and .text-light:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="container">
  <h2>The text color representing the specified meaning by apidemos.com</h2>
  <p class="text-muted">muted</p>
  <p class="text-primary">primary</p>
  <p class="text-success">success</p>
  <p class="text-info">info</p>
  <p class="text-warning">warning</p>
  <p class="text-danger">danger</p>
  <p class="text-secondary">secondary</p>
  <p class="text-dark">dark</p>
  <p class="text-body">body</p>
  <p class="text-light">light - Light gray text (not clearly visible on white background)</p>
  <p class="text-white">white - White text (not clearly visible on white background)</p>
  </div>

</div>

</body>
</html>

Output:

Bootstrap5 Color

You can set the text color transparency to 50%, using the .text-black-50 or .text-white-50 classes:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Text color transparency by apidemos.com</h2>
  <p>You can set the text color transparency to 50%, using the .text-black-50 or .text-white-50 classes:</p>
  <p class="text-black-50">Black text with 50% transparency and white background.</p>
  <p class="text-white-50 bg-dark">White text with 50% transparency and black background.</p>
</div>

</body>
</html>

Output:

Bootstrap5 Color

Use in links

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="container">
  <h2>Text color</h2>
  <p>Move your mouse over the link by apidemos.com.</p>
  <a href="#" class="text-muted">muted</a>
  <a href="#" class="text-primary">primary</a>
  <a href="#" class="text-success">success</a>
  <a href="#" class="text-info">info</a>
  <a href="#" class="text-warning">info</a>
  <a href="#" class="text-danger">danger</a>
  <a href="#" class="text-secondary">secondary</a>
  <a href="#" class="text-dark">dark</a>
  <a href="#" class="text-light">light</a>
  </div>

</div>

</body>
</html>

Output:

Bootstrap5 Color

Background color

The classes that provide background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light. .

Note that the background color does not set the color of the text, in some instances you will need to use it with the .text-* class.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="container">
  <h2>Background color by apimodes.com</h2>
  <p class="bg-primary text-white">bg-primary text-white</p>
  <p class="bg-success text-white">bg-success text-white</p>
  <p class="bg-info text-white">bg-info text-white</p>
  <p class="bg-warning text-white">bg-warning text-white</p>
  <p class="bg-danger text-white">bg-danger text-white</p>
  <p class="bg-secondary text-white">bg-secondary text-white</p>
  <p class="bg-dark text-white">bg-dark text-white</p>
  <p class="bg-light text-dark">bg-light text-dark</p>
  </div>

</div>

</body>
</html>

Output:

Bootstrap5 Color

Bootstrap 5 Color

Bootstrap5 Color

Background color

Related

Top