Bulma Color Helpers

Bulma Color Helpers

Bulma colors helpers modifier class is used to change the text color as well as the background color.

Bulma CSS Text color

Bulma CSS provides 10 text color modifier classes that are used to change the text color. The followings are the text color modifier classes such as has-text-white, has-text-black, has-text-light, has-text-dark, has-text-primary, has-text-link, has-text-info, has-text-success, has-text-warning, has-text-danger.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Text color using color classes
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech

Bulma CSS Gray Color Shades

Bulma CSS provides 9 shades of gray color. Followings are the modifier classes that are used to create different shades of gray color:.has-text-black-bis, .has-text-black-ter, .has-text-grey-darker, .has-text-grey-dark,.has-text-grey, .has-text-grey-light, .has-text-grey-lighter, .has-text-white-ter,.has-text-white-bis.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Text color using color classes
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech

Light & Dark Text Color

Light Text Color

To create predefined color's light, and dark version, simply append the *-light or *-dark modifier class.

Followings are the list of light color modifier classes:has-text-primary-light,has-text-link-light,has-text-info-light,has-text-success-light,has-text-warning-light,has-text-danger-light.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech
sudhakarinfotech

Bulma CSS Text Dark Color

To create, dark text color, simply append the *-dark modifier class.

Following is the list of dark color modifier classes: has-text-primary-dark, has-text-link-dark, has-text-info-dark, has-text-success-dark, has-text-warning-dark, has-text-danger-dark.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech
sudhakarinfotech
sudhakarinfotech

Bulma CSS Background Color

Background color modifier class is used to change the background color. The followings are the background color modifier classes:has-background-white, has-background-black, has-background-light, has-background-dark, has-background-primary, has-background-link, has-background-info, has-background-success, has-background-warning, has-background-danger.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech
sudhakarinfotech
sudhakarinfotech

Background Color Light & Dark Version

Background Light Color

The predefined background color has also its light and dark version. To create background color light version, append *-light.

Followings are the light background color modifier class: has-background-primary-light,has-background-link-light,has-background-info-light,has-background-success-light,has-background-warning-light,has-background-danger-light,has-background-primary-dark

General Syntax

Try it now

Source Code

Try it now

Background Dark Color

To create background color dark version, append *-dark.

The followings is the predefined background color's dark version: has-background-link-dark, has-background-info-dark, has-background-success-dark, has-background-warning-dark, has-background-danger-dark.

General Syntax

Try it now

Source Code

Try it now