Bulma Color
Last Updated :
15 Feb, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...