Bulma colors helpers modifier class is used to change the text color as well as the background 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 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
.
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
.
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
.
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
.
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
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
.