About Lesson
In Bootstrap 5, you can use background color classes to style the background of elements. Here are some examples of background color classes in Bootstrap 5:
- 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>- Custom Background Color Classes:
.bg-{color}: Sets the background color to a custom color by replacing{color}with a specific color name or hexadecimal value.
Example:
<div class="bg-pink text-white">This has a custom background color.</div>
<div class="bg-#FFC0CB text-white">This has a custom background color using a hexadecimal value.</div>- Transparent Background Color:
.bg-transparent: Sets the background color to transparent, allowing the underlying content or background to show through.
Example:
<div class="bg-transparent">This has a transparent background color.</div>These examples demonstrate how to use background color classes in Bootstrap 5 to style elements with different background colors. You can apply these classes to various HTML elements such as <div>, <section>, or even <body> to achieve the desired background color effects. Remember to consult the official Bootstrap documentation for more details and available options related to background colors.
Join the conversation