Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Color

Improve Article
Save Article
  • Last Updated : 15 Feb, 2022
Improve Article
Save Article

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

Color is a helper in Bulma that changes the color of the text or the background. We will see how we can change the text and background color using the classes of color.

Text Color classes: We can change the text color using the following classes.

  • has-text-white
  • has-text-black
  • has-text-light
  • has-text-dark
  • has-text-primary
  • has-text-link
  • has-text-danger

Example 1: The following code demonstrates the has-text-primary class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="">
        <p class="has-text-primary">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-primary">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>


Output:

Example 2: The following code demonstrates the has-text-danger class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>


Output:

Background Color classes: We can use the following classes for different background color and shades.

  • has-background-white
  • has-background-black
  • has-background-light
  • has-background-dark
  • has-background-white
  • has-background-primary
  • has-background-warning
  • has-background-grey-darker

Example 3: The following code demonstrates the has-background-dark class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
      
    <div class="has-background-dark">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>


Output:

Example 4: The following code demonstrates the has-background-warning class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="has-background-warning">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!