Bulma Color Helpers
Bulma colors helpers classes are 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
<element class="has-text-{white | black | light | dark | primary | link | info | success | warning | danger }">Text Color</element>
Source Code
<section class="section">
<div class="container">
<span class="title">Text color using color classes</span><br />
<span class="has-text-light">sudhakarinfotech</span><br />
<span class="has-text-primary">sudhakarinfotech</span><br />
<span class="has-text-link">sudhakarinfotech</span><br />
<span class="has-text-black">sudhakarinfotech</span><br />
<span class="has-text-success">sudhakarinfotech</span><br />
<span class="has-text-info">sudhakarinfotech</span><br />
<span class="has-text-danger">sudhakarinfotech</span> <br />
<span class="has-text-warning">sudhakarinfotech</span>
</div>
</section>
Source Code : Output
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
Bulma CSS Gray Color Shades
Bulma CSS provides 9 shades of a gray color. The 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
<element class="has-text-{white | black | light | dark | primary | link | info | success | warning | danger }"> Color Shade</element>
Source Code
<section class="section">
<div class="container">
<span class="title">Text color using color classes</span><br />
<span class="has-text-black-bis">sudhakarinfotech</span><br />
<span class="has-text-black-ter">sudhakarinfotech</span><br />
<span class="has-text-grey-darker">sudhakarinfotech</span><br />
<span class="has-text-grey-dark">sudhakarinfotech</span><br />
<span class="has-text-grey">sudhakarinfotech</span><br />
<span class="has-text-grey-light">sudhakarinfotech</span><br />
<span class="has-text-grey-lighter">sudhakarinfotech</span> <br />
<span class="has-text-white-ter">sudhakarinfotech</span>
</div>
</section>
Source Code : Output
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
<element class="{has-text-primary | has-text-link | has-text-info | has-text-success | has-text-warning | has-text-danger}-light">Light Text Color</element>
Source Code
<section class="section">
<div class="container">
<span class="has-text-primary-light bg-color">sudhakarinfotech</span><br />
<span class="has-text-link-light">sudhakarinfotech</span><br />
</div>
</section>
Source Code : Output
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
<element class="{has-text-primary | has-text-link | has-text-info | has-text-success | has-text-warning | has-text-danger}-dark">Dark Text Color</element>
Source Code
<section class="section">
<div class="container">
<span class="has-text-primary-dark">sudhakarinfotech</span><br />
<span class="has-text-link-dark">sudhakarinfotech</span><br />
<span class="has-text-info-dark">sudhakarinfotech</span><br />
</div>
</section>
Source Code : Output
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
<element class="has-background-{white | black | light | dark | primary | link | info | success | warning | danger }">Background Color</element>
Source Code
<section class="section">
<div class="container">
<span class="has-background-black p-2">sudhakarinfotech</span><br />
<span class="has-background-light p-2">sudhakarinfotech</span><br />
<span class="has-background-dark p-2">sudhakarinfotech</span><br />
</div>
</section>
Source Code : Output
sudhakarinfotech
sudhakarinfotech
Background Color Light & Dark Version
Background Light Color
The predefined background color has also light and dark versions. To create a 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
<element class="has-background-{primary-light|link-light|info-light|success-light|warning-light|danger-light|primary-dark}">Light Background Color</element>
Source Code
<section class="section">
<div class="container">
<span class="has-background-primary-light p-2">sudhakarinfotech</span><br />
<span class="has-background-link-light p-2">sudhakarinfotech</span><br />
<span class="has-background-info-light p-2">sudhakarinfotech</span><br />
<span class="has-background-success-light p-2">sudhakarinfotech</span><br />
<span class="has-background-warning-light p-2">sudhakarinfotech</span><br />
<span class="has-background-danger-light p-2">sudhakarinfotech</span><br />
<span class="has-background-primary-dark p-2">sudhakarinfotech</span><br />
</div>
</section>
Source Code : Output
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
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
<element class="has-background-{link-dark | info-dark | success-dark | warning-dark | danger-dark }">Background Dark Color</element>
Source Code
<section class="section">
<div class="container">
<span class="has-background-primary-light p-2">sudhakarinfotech</span><br />
<span class="has-background-link-light p-2">sudhakarinfotech</span><br />
<span class="has-background-info-light p-2">sudhakarinfotech</span><br />
<span class="has-background-success-light p-2">sudhakarinfotech</span><br />
<span class="has-background-warning-light p-2">sudhakarinfotech</span><br />
<span class="has-background-danger-light p-2">sudhakarinfotech</span><br />
<span class="has-background-primary-dark p-2">sudhakarinfotech</span><br />
</div>
</section>
Source Code : Output
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
sudhakarinfotech
Web Tutorials
