Lesson 5: Colors in Bootstrap 5


Text color in Bootstrap 5

Bootstrap 5 has a number of contextual classes, which are used to implicitly express a certain meaning through color.

Classes for text colors include: .text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (default body color is usually black) and .text-light :

Run the file below to see how the above text color classes will display the text color.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</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-3">
  <h2>Màu sắc theo ngữ cảnh</h2>
  <p>Sử dụng các class theo ngữ cảnh để cung cấp những ý nghĩa thông qua màu sắc:</p>
  <p class="text-muted">Văn bản bị muted.</p>
  <p class="text-primary">Văn bản quan trọng.</p>
  <p class="text-success">Văn bản chỉ ra sự thành công.</p>
  <p class="text-info">Văn bản đại diện cho một số thông tin.</p>
  <p class="text-warning">Văn bản này là cảnh báo.</p>
  <p class="text-danger">Văn bản thông báo sự nguy hiểm.</p>
  <p class="text-secondary">Văn bản phụ.</p>
  <p class="text-dark">Văn bản này có màu xám đen.</p>
  <p class="text-body">Màu body mặc định (thường là màu đen).</p>
  <p class="text-light">Văn bản màu xám nhạt (trên nền trắng).</p>
  <p class="text-white">Văn bản màu trắng (trên nền trắng).</p>
</div>

</body>
</html>

You will get the corresponding color as below:

You can also add 50% opacity to black or white text with classes .text-black-50 or .text-white-50:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap trên QuanTriMang</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-3">
  <h2>Tạo độ mờ cho màu chữ</h2>
  <p>Thêm độ mờ 50% cho màu chữ đen hoặc trắng với class .text-black-50 hay .text-white-50:</p>
  <p class="text-black-50">Chữ đen với opacity 50% trên nền trắng</p>
  <p class="text-white-50 bg-dark">Chữ trắng với opacity 50% trên nền đen</p>
</div>

</body>
</html>

With the above HTML file you will see the following result:

Opacity Text Color on Bootstrap

Background color in Bootstrap 5

The class for the background color includes: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that the background color will not set the text color, so in some cases you will need to use the background color class along with the .text-*.

Let’s see the example code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</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-3">
  <h2>Màu nền theo ngữ cảnh</h2>
  <p>Sử dụng các class màu nền theo ngữ cảnh.</p>
  <p class="bg-primary text-white">Văn bản quan trọng.</p>
  <p class="bg-success text-white">Văn bản chỉ ra sự thành công.</p>
  <p class="bg-info text-white">Văn bản chứa thông tin.</p>
  <p class="bg-warning text-white">Văn bản này là cảnh báo.</p>
  <p class="bg-danger text-white">Văn bản thông báo sự nguy hiểm.</p>
  <p class="bg-secondary text-white">Màu nền phụ.</p>
  <p class="bg-dark text-white">Màu nền xám đen.</p>
  <p class="bg-light text-dark">Màu nền xám trắng.</p>
</div>

</body>
</html>

We will get the result as shown below:

Contextual background color

Link color in Bootstrap 4

In Bootstrap 4 these text classes can be used on links, making their color slightly darker on hover. You can see that when you run the code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Màu sắc link theo ngữ cảnh</h2>
  <p>Di chuột qua link để xem sự thay đổi màu sắc.</p>
  <a href="#" class="text-muted">Link bị muted.</a>
  <a href="#" class="text-primary">Link chính.</a>
  <a href="#" class="text-success">Link thành công.</a>
  <a href="#" class="text-info">Link thông tin.</a>
  <a href="#" class="text-warning">Link cảnh báo.</a>
  <a href="#" class="text-danger">Link nguy hiểm.</a>
  <a href="#" class="text-secondary">Link phụ.</a>
  <a href="#" class="text-dark">Link màu xám đen.</a>
  <a href="#" class="text-body">Link màu body/đen.</a>
  <a href="#" class="text-light">Link màu xám.</a>
</div>

Then the links will display as below:

Contextual link colors

Note: These link effects when tested on Bootstrap 5 do not see the color change as on Bootstrap 4.

After mastering these color classes, you can already customize the color of the content in your website because with this color system, you have enough of the most basic colors. Please continue to follow the following articles to learn Bootstrap 5 systematically!

Related Posts

Leave a Reply

Your email address will not be published.