Learn with us

In Bootstrap 5, color classes are available to apply different colors to elements. Here are some examples of color classes in Bootstrap 5:

1. Text Color Classes:

• .text-primary: Sets the text color to the primary color defined by Bootstrap.
• .text-secondary: Sets the text color to the secondary color defined by Bootstrap.
• .text-success: Sets the text color to a success color.
• .text-danger: Sets the text color to a danger color.
• .text-warning: Sets the text color to a warning color.
• .text-info: Sets the text color to an info color.
• .text-light: Sets the text color to a light color.
• .text-dark: Sets the text color to a dark color.
• .text-body: Sets the text color to the default body color.

Example:

<p class="text-primary">This is a primary text color.</p>
<p class="text-success">This is a success text color.</p>

2. Background Color Classes:

• .bg-primary: Sets the background color to the primary color defined by Bootstrap.
• .bg-secondary: Sets the background color to the secondary color defined by Bootstrap.
• .bg-success: Sets the background color to a success color.
• .bg-danger: Sets the background color to a danger color.
• .bg-warning: Sets the background color to a warning color.
• .bg-info: Sets the background color to an info color.
• .bg-light: Sets the background color to a light color.
• .bg-dark: Sets the background color to a dark color.
• .bg-body: Sets the background color to the default body color.

Example:

<div class="bg-primary text-white">This has a primary background color.</div>
<div class="bg-success text-white">This has a success background color.</div>

3. Custom Color Classes:

• .bg-{color}: Sets the background color to a custom color by replacing {color} with a specific color name or hexadecimal value.
• .text-{color}: Sets the text color to a custom color by replacing {color} with a specific color name or hexadecimal value.

Example:

<p class="text-danger">This is a custom text color using the text-danger class.</p>
<div class="bg-#FFC0CB text-white">This is a custom background color using the bg-#FFC0CB class.</div>

These are just a few examples of color classes in Bootstrap 5. By applying these classes to elements, you can easily style text and backgrounds with different colors. Remember to consult the official Bootstrap documentation for more details on color classes and the available color options.