📪Backgrounds Color

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.


.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-green">
  <!-- Content with a green background -->
</div>

In the example above, the background color of the element will be set to green. You can also use color codes like #008000 or rgb(0,128,0) to set custom colors.


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.

Last updated