Bulma Colors
The Bulma colors classes are used to set the color of the text and background. If you want to design your text or any specific content then this class is so useful. All the color classes are mentioned and described below.
Bulma Colors Class: All the below mentioned classes can be used to color text and background as well
- white: This color is used to set the color of pure white and the computed value is hsl(0, 0%, 100%).
- black: This color is used to set the color of pure black and the computed value is hsl(0, 0%, 4%).
- light: This color is used to set the color of light gray and the computed value is hsl(0, 0%, 96%).
- dark: This color is used to set the color of darker gray and the computed value is hsl(0, 0%, 21%).
- primary: This color is used to set the color of turquoise and the computed value is hsl(171, 100%, 41%).
- link: This color is used to set the color of blue and the computed value is hsl(217, 71%, 53%)
- info: This color is used to set the color of cyan and the computed value is hsl(204, 86%, 53%).
- success: This color is used to set the color of green and the computed value is hsl(141, 53%, 53%).
- warning: This color is used to set the color of yellow and the computed value is hsl(48, 100%, 67%).
- danger: This color is used to set the color of red and the computed value is hsl(348, 100%, 61%).
Bulma also provides a shades, but with some limitation that only contains shades of grey between black and white.
Bulma Shades Colors Class:
- black-bis: This class used to set the color pure black and the value is hsl(0, 0%, 7%).
- black-ter: This class used to set the color semi black and the value is hsl(0, 0%, 14%).
- grey-darker: This class used to set the color darker gray and the value is hsl(0, 0%, 21%).
- grey-dark: This class used to set the color dark gray and the value is hsl(0, 0%, 29%).
- grey-light: This class used to set the color light gray and the value is hsl(0, 0%, 71%).
- grey-lighter: This class used to set the color lighter gray and the value is hsl(0, 0%, 86%).
- white-ter: This class used to set the color cream white and the value is hsl(0, 0%, 96%).
- white-bis: This class used to set the color pure white and the value is hsl(0, 0%, 98%).
Syntax:
To set the text color:
<element class="has-text-black"> ... </element>
To set the background color:
<element class="has-background-warning"> ... </element>
Below examples illustrates the Bulma Colors:
Example 1: In this example we will use the colors class for text as well as for background.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > w3wiki </h1> <b>Bulma Colors</b> <div class="has-text-left ml-4 mr-4"> .has-text-white | .has-background-danger <p class="has-text-white box has-background-danger"> A Computer Science Portal for Beginner </p> .has-text-black | .has-background-warning <p class="has-text-black box has-background-warning"> A Computer Science Portal for Beginner </p> .has-text-light | .has-background-success <p class="has-text-light box has-background-success"> A Computer Science Portal for Beginner </p> .has-text-dark | .has-background-info <p class="has-text-dark box has-background-info"> A Computer Science Portal for Beginner </p> .has-text-primary | .has-background-link <p class="has-text-primary box has-background-link"> A Computer Science Portal for Beginner </p> .has-text-link | .has-background-primary <p class="has-text-link box has-background-primary"> A Computer Science Portal for Beginner </p> .has-text-info | .has-background-dark <p class="has-text-info box has-background-dark"> A Computer Science Portal for Beginner </p> .has-text-success | .has-background-light <p class="has-text-success box has-background-light"> A Computer Science Portal for Beginner </p> .has-text-warning | .has-background-black <p class="has-text-warning box has-background-black"> A Computer Science Portal for Beginner </p> .has-text-danger | .has-background-white <p class="has-text-danger box has-background-white"> A Computer Science Portal for Beginner </p> </div> </body> </html> |
Output:
Bulma Colors
Example 2: In this example we will use different shades of black and white.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > w3wiki </h1> <b>Bulma Colors</b> <div class="has-text-left ml-4 mr-4"> .has-text-white-bis | .has-background-black-bis <p class="has-text-white-bis box has-background-black-bis"> A Computer Science Portal for Beginner </p> .has-text-white-ter | .has-background-black-ter <p class="has-text-white-ter box has-background-black-ter"> A Computer Science Portal for Beginner </p> .has-text-grey-lighter | .has-background-grey-darker <p class="has-text-grey-lighter box has-background-grey-darker"> A Computer Science Portal for Beginner </p> .has-text-dark | .has-background-info <p class="has-text-grey-light box has-background-grey-dark"> A Computer Science Portal for Beginner </p> .has-text-grey-dark | .has-background-grey-light <p class="has-text-grey-dark box has-background-grey-light"> A Computer Science Portal for Beginner </p> .has-text-grey-darker | .has-background-grey-lighter <p class="has-text-grey-darker box has-background-grey-lighter"> A Computer Science Portal for Beginner </p> .has-text-black-ter | .has-background-white-ter <p class="has-text-black-ter box has-background-white-ter"> A Computer Science Portal for Beginner </p> .has-text-black-bis | .has-background-white-bis <p class="has-text-black-bis box has-background-white-bis"> A Computer Science Portal for Beginner </p> </div> </body> </html> |
Output:
Bulma Colors