Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Colors

Improve Article
Save Article
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

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

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

Bulma Colors

Reference: https://bulma.io/documentation/overview/colors/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!