Bulma Color Helpers

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.

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.

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.

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.

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.

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

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.