Colors

We have a series of colors that are used by default. They include:

  • primary
  • secondary
  • success
  • danger
  • warning
  • info

Color Classes Variation :

Color Options Class Description
Background Color .bg-{color} This class is used for background color.
Lighten Background Color .bg-{color}.bg-lighten-{value}

For Lighten background color, these two classes are needed.

value: {1 | 2 | 3 | 4 | 5}

Darken Background Color .bg-{color}.bg-darken-{value}

For Darken background color, these two classes are needed.

value: {1 | 2 | 3 | 4}

Gradient Color .bg-gradient-{color} This class is used for background with gradient color
Background with rgba Color .bg-light-{color} This class is used to set background color with rgba format where alpha of given color is 0.12.
Background with bg-opacity Color .overlay-{color} This class is used to set background color with opacity value of 0.6.
Border Color .border-{color}

This class is used for border color. You may use .border-{direction}-{color} class for any particular border color with direction.

direction: {top | right | bottom | left}

Lighten Border Color .border-{color}.border-lighten-{value}

These classes are used for light border color. You may also use .border-{direction}-{color}.border-{direction}-lighten-{value} for any particular light border color with direction.

direction: {top | right | bottom | left}

value: {1 | 2 | 3 | 4 | 5}

Darken Border Color .border-{color}.border-darken-{value}

These classes are used for dark border color. You may also use .border-{direction}-{color}.border-{direction}-darken-{value} for any particular dark border color with direction.

direction: {top | right | bottom | left}

value: {1 | 2 | 3 | 4}

Text Color .text-{color} This class is used for text color.
Lighten Text Color .text-{color}.lighten-{value}

This class is used to lighten text color.

value: {1 | 2 | 3 | 4 | 5}

Darken Text Color .text-{color}.darken-{value}

This class is used to darken text color.

value: {1 | 2 | 3 | 4 | 5}

How to use this color variants?

If you want to update card background color to info color. Then you can use .bg-info class with .card class.

Find below structure to set background color of card :

        <div class="card bg-info">
          ...
        </div>

Here, we have shared only one example with a background color variant with a card. But you can use this background color and other variants everywhere you want like with buttons, navbars, etc...