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=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success" >
GeeksforGeeks
</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 Geeks
</p>
.has-text-black | .has-background-warning
<p class="has-text-black box
has-background-warning">
A Computer Science Portal for Geeks
</p>
.has-text-light | .has-background-success
<p class="has-text-light box
has-background-success">
A Computer Science Portal for Geeks
</p>
.has-text-dark | .has-background-info
<p class="has-text-dark box
has-background-info">
A Computer Science Portal for Geeks
</p>
.has-text-primary | .has-background-link
<p class="has-text-primary box
has-background-link">
A Computer Science Portal for Geeks
</p>
.has-text-link | .has-background-primary
<p class="has-text-link box
has-background-primary">
A Computer Science Portal for Geeks
</p>
.has-text-info | .has-background-dark
<p class="has-text-info box
has-background-dark">
A Computer Science Portal for Geeks
</p>
.has-text-success | .has-background-light
<p class="has-text-success box
has-background-light">
A Computer Science Portal for Geeks
</p>
.has-text-warning | .has-background-black
<p class="has-text-warning box
has-background-black">
A Computer Science Portal for Geeks
</p>
.has-text-danger | .has-background-white
<p class="has-text-danger box
has-background-white">
A Computer Science Portal for Geeks
</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=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success" >
GeeksforGeeks
</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 Geeks
</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 Geeks
</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 Geeks
</p>
.has-text-dark | .has-background-info
<p class="has-text-grey-light box
has-background-grey-dark">
A Computer Science Portal for Geeks
</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 Geeks
</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 Geeks
</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 Geeks
</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 Geeks
</p>
</div>
</body>
</html>
|
Output:
Bulma Colors
Reference: https://bulma.io/documentation/overview/colors/