📪Backgrounds Color

Background Color Classes

The following classes control the background color of elements:

.bg-success Sets the background color to the success color value.

CSS equivalent: background-color: successColor;

Example usage:

<div class="bg-success">
  <!-- Content with a success background color -->
</div>

In the example above, the background color of the element will be set to the success color.

.bg-danger Sets the background color to the danger color value.

CSS equivalent: background-color: dangerColor;

Example usage:

<div class="bg-danger">
  <!-- Content with a danger background color -->
</div>

In the example above, the background color of the element will be set to the danger color.

.text-danger Sets the text color to the danger color value.

CSS equivalent: color: dangerColor;

Example usage:

<div class="text-danger">
  <!-- Content with a danger text color -->
</div>

In the example above, the text color of the element will be set to the danger color.

.bg-warning Sets the background color to the warning color value.

CSS equivalent: background-color: warningColor;

Example usage:

<div class="bg-warning">
  <!-- Content with a warning background color -->
</div>

In the example above, the background color of the element will be set to the warning color.

.bg-info Sets the background color to the info color value.

CSS equivalent: background-color: infoColor;

Example usage:

<div class="bg-info">
  <!-- Content with an info background color -->
</div>

In the example above, the background color of the element will be set to the info color.

.bg-none Resets the background color to its initial value.

CSS equivalent: background-color: initial;

Example usage:

<div class="bg-none">
  <!-- Content with no background color -->
</div>

In the example above, the background color of the element will be reset to its initial value.

.bg-${color} Sets the background color to a custom color value.

CSS equivalent: background-color: colorValue;

Example usage:

<div class="bg-custom-color">
  <!-- Content with a custom background color -->
</div>

In the example above, the background color of the element will be set to the custom color value.

These utility classes provide a convenient way to apply predefined background colors or define your own custom background colors to elements in your web page.