Bulma Text Color - GeeksforGeeks

01 Dec, 2021
Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Text class accepts lots of value in Bulma which all the properties are covered in class form. By using this class we can color any text. In CSS, we do that by using the CSS Color property.
Syntax:
<tag class="has-text-*">
    Text
</tag>
Text Color classes
We can use any of these colors listed below at the place of * in the above syntax: 
has-text-white: This class used to set the test color white.
has-text-black: This class used to set the test color black.
has-text-light: This class used to set the test color cream.
has-text-dark: This class used to set the test color dark brown.
has-text-primary: This class used to set the test color light cyan.
has-text-link: This class used to set the test color blue.
has-text-info: This class used to set the test color light blue.
has-text-success: This class used to set the test color green.
has-text-warning: This class used to set the test color yellow.
has-text-danger: This class used to set the test color red.
Note: You can set any element to one of the 10 colors or 9 shades of grey. You can use each color in its light and dark versions. Simply append *-light or *-dark. Below example illustrate the text color in Bulma:
Example:
HTML
<!DOCTYPE html><html>  <head>    <title>Bulma Panel</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'></head>  <body>    <h1 class="is-size-2">        GeeksforGeeks    </h1>    <b>Bulma Text Color Class</b>    <br>    <div>        <p class="has-text-white has-background-black">            A Computer Science Portal for Geeks        </p>          <p class="has-text-black has-background-white">            A Computer Science Portal for Geeks        </p>          <p class="has-text-light has-background-dark">            A Computer Science Portal for Geeks        </p>          <p class="has-text-dark has-background-light">            A Computer Science Portal for Geeks        </p>          <p class="has-text-primary has-background-link">            A Computer Science Portal for Geeks        </p>          <p class="has-text-link has-background-primary">            A Computer Science Portal for Geeks        </p>          <p class="has-text-info has-background-success">            A Computer Science Portal for Geeks        </p>          <p class="has-text-success has-background-info">            A Computer Science Portal for Geeks        </p>          <p class="has-text-warning has-background-danger">            A Computer Science Portal for Geeks        </p>          <p class="has-text-danger has-background-warning">            A Computer Science Portal for Geeks        </p>    </div></body>  </html>
Output:
Reference:https://bulma.io/documentation/helpers/color-helpers/#text-color
Bulma
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript