You can set any element to one of the 10 colors or 9 shades of grey:
--- title: Color helpers layout: documentation doc-tab: helpers doc-subtab: helpers-color breadcrumb: - home - documentation - helpers - helpers-color --- {% include elements/anchor.html name="Text color" %}
You can set any element to one of the 10 colors or 9 shades of grey:
Class | Color | Example |
---|---|---|
has-text-white | {% include color/white.html %} | Hello Bulma |
has-text-black | {% include color/black.html %} | Hello Bulma |
has-text-light | {% include color/white-ter.html %} | Hello Bulma |
has-text-dark | {% include color/grey-darker.html %} | Hello Bulma |
has-text-primary | {% include color/turquoise.html %} | Hello Bulma |
has-text-link | {% include color/blue.html %} | Hello Bulma |
has-text-info | {% include color/cyan.html %} | Hello Bulma |
has-text-success | {% include color/green.html %} | Hello Bulma |
has-text-warning | {% include color/yellow.html %} | Hello Bulma |
has-text-danger | {% include color/red.html %} | Hello Bulma |
Class | Shade | Example |
---|---|---|
has-text-black-bis | {% include color/black-bis.html %} | Hello Bulma |
has-text-black-ter | {% include color/black-ter.html %} | Hello Bulma |
has-text-grey-darker | {% include color/grey-darker.html %} | Hello Bulma |
has-text-grey-dark | {% include color/grey-dark.html %} | Hello Bulma |
has-text-grey | {% include color/grey.html %} | Hello Bulma |
has-text-grey-light | {% include color/grey-light.html %} | Hello Bulma |
has-text-grey-lighter | {% include color/grey-lighter.html %} | Hello Bulma |
has-text-white-ter | {% include color/white-ter.html %} | Hello Bulma |
has-text-white-bis | {% include color/white-bis.html %} | Hello Bulma |
You can use each color in their light and dark versions. Simply append *-light
or *-dark
.
Class | Light/Dark color | Example |
---|---|---|
has-text-primary-light | {% include color/turquoise-light.html %} | Hello Bulma |
has-text-link-light | {% include color/blue-light.html %} | Hello Bulma |
has-text-info-light | {% include color/cyan-light.html %} | Hello Bulma |
has-text-success-light | {% include color/green-light.html %} | Hello Bulma |
has-text-warning-light | {% include color/yellow-light.html %} | Hello Bulma |
has-text-danger-light | {% include color/red-light.html %} | Hello Bulma |
has-text-primary-dark | {% include color/turquoise-dark.html %} | Hello Bulma |
has-text-link-dark | {% include color/blue-dark.html %} | Hello Bulma |
has-text-info-dark | {% include color/cyan-dark.html %} | Hello Bulma |
has-text-success-dark | {% include color/green-dark.html %} | Hello Bulma |
has-text-warning-dark | {% include color/yellow-dark.html %} | Hello Bulma |
has-text-danger-dark | {% include color/red-dark.html %} | Hello Bulma |
You can set any element to one of the 10 colors or 9 shades of grey:
Class | Background color |
---|---|
has-background-white | {% include color/white.html %} |
has-background-black | {% include color/black.html %} |
has-background-light | {% include color/white-ter.html %} |
has-background-dark | {% include color/grey-darker.html %} |
has-background-primary | {% include color/turquoise.html %} |
has-background-link | {% include color/blue.html %} |
has-background-info | {% include color/cyan.html %} |
has-background-success | {% include color/green.html %} |
has-background-warning | {% include color/yellow.html %} |
has-background-danger | {% include color/red.html %} |
Class | Background shade |
---|---|
has-background-black-bis | {% include color/black-bis.html %} |
has-background-black-ter | {% include color/black-ter.html %} |
has-background-grey-darker | {% include color/grey-darker.html %} |
has-background-grey-dark | {% include color/grey-dark.html %} |
has-background-grey | {% include color/grey.html %} |
has-background-grey-light | {% include color/grey-light.html %} |
has-background-grey-lighter | {% include color/grey-lighter.html %} |
has-background-white-ter | {% include color/white-ter.html %} |
has-background-white-bis | {% include color/white-bis.html %} |
You can use each color in their light and dark versions. Simply append *-light
or *-dark
.
Class | Light/Dark background | Example |
---|---|---|
has-background-primary-light | {% include color/turquoise-light.html %} | Hello Bulma |
has-background-link-light | {% include color/blue-light.html %} | Hello Bulma |
has-background-info-light | {% include color/cyan-light.html %} | Hello Bulma |
has-background-success-light | {% include color/green-light.html %} | Hello Bulma |
has-background-warning-light | {% include color/yellow-light.html %} | Hello Bulma |
has-background-danger-light | {% include color/red-light.html %} | Hello Bulma |
has-background-primary-dark | {% include color/turquoise-dark.html %} | Hello Bulma |
has-background-link-dark | {% include color/blue-dark.html %} | Hello Bulma |
has-background-info-dark | {% include color/cyan-dark.html %} | Hello Bulma |
has-background-success-dark | {% include color/green-dark.html %} | Hello Bulma |
has-background-warning-dark | {% include color/yellow-dark.html %} | Hello Bulma |
has-background-danger-dark | {% include color/red-dark.html %} | Hello Bulma |