Lesson 5: Colors in Bootstrap 5

How are colors used in Bootstrap? In this article, let's explore everything about Bootstrap colors !

 

The Bootstrap 5 Colors utility is used to set text colors, for example, green for success, blue for basic, etc. There are many other necessary informational colors such as danger, warnings, etc. The Bootstrap color palette can help you find the right colors for your development project.

In this article, let's explore all the colors in Bootstrap 5 in more detail!

1. Lesson 1: What is Bootstrap 5?
2. Lesson 2: Learning about Containers
3. Lesson 3: Grid System in Bootstrap
4. Lesson 4: Typography in Bootstrap 5

Text color in Bootstrap 5

Bootstrap 5 has several contextual classes that are used to implicitly convey a certain meaning through color.

Basically, the colors in Bootstrap 5 include:

1. Text-primary is used to format certain important documents.
2. Text-success is used to indicate the success of a task in green.
3. Text-info presents a number of texts that provide information.
4. Text warnings are displayed in yellow.
5. Text-danger colors danger warning text in red.
6. Text-secondary for secondary content.
7. Text-white changes the text color to white.
8. Text-dark colors the text black.
9. Text-body colors the text by default, usually black.
10. Text-light is used to color text in a light gray hue.
11. Text-muted displays hidden text, usually in light gray.

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

 

 Ví dụ Bootstrap - TipsMake.com.com 

Contextual colors

Use contextual classes to convey meaning through color:

The text is muted.

Important document.

The text indicates success.

The text represents a number of pieces of information.

This text is a warning.

The document warns of danger.

Supplementary text.

This text is dark gray.

The default body color (usually black).

Light gray text (on a white background).

White text (on a white background).

You will receive the corresponding colors as shown below:

 

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

 Ví dụ Bootstrap trên QuanTriMang 

Create a blur effect for the text color.

Add 50% opacity to black or white text with the class .text-black-50 or .text-white-50:

Black text with 50% opacity on a white background.

White text with 50% opacity on a black background.

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

Background colors in Bootstrap 5

The class for background color includes: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand .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 color class .text-*.

Let's look at the example code below:

 Ví dụ Bootstrap - TipsMake.com.com 

Background color based on context

Use background color classes contextually.

Important document.

The text indicates success.

The text contains information.

This text is a warning.

The document warns of danger.

Secondary background color.

Dark gray background color.

The background color is grayish-white.

 

We will get the result as shown below:

Link colors in Bootstrap 4

In Bootstrap 4, these text classes can be used on links, making their color slightly darker when hovered over. You can see this when running the code below:

 Ví dụ Bootstrap - TipsMake.com.com 

Contextual link colors

Hover your mouse over the link to see the color change.

 Link bị muted. Link chính. Link thành công. Link thông tin. Link cảnh báo. Link nguy hiểm. Link phụ. Link màu xám đen. Link màu body/đen. Link màu xám. 

The links will then be displayed as follows:

Note : When tested on Bootstrap 5, these link effects do not show the same color changes as on Bootstrap 4.

Once you've mastered these color classes, you can customize the colors of your website content because this color system already includes all the most basic colors.

In general, the `color` class in Bootstrap 5 colors text, highlighting its importance within the document. On the other hand, classes associated with `background` will 'overlay' color on related elements. Classes associated with text and background have similar names but different prefixes. For text, the `text color` class will have the prefix `` .text-, while for background color, the prefix will be ` .bg-`.