Bulma Background Color
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. Background class accepts lots of value in Bulma which all the properties are covered in class form. By using this class we can color any background. In CSS, we do that by using the CSS Color property.
Syntax:
<tag class="has-background-*">
Text
</tag>
Background Color classes
We can use any of these colors listed below at the place of * in the above syntax:
- has-background-white: This class used to set the background color white.
- has-background-black: This class used to set the background color black.
- has-background-light: This class used to set the background color cream.
- has-background-dark: This class used to set the background color dark brown.
- has-background-primary: This class is used to set the background color light cyan.
- has-background-link: This class used to set the background color blue.
- has-background-info: This class used to set the background color light blue.
- has-background-success: This class used to set the background color green.
- has-background-warning: This class used to set the background color yellow.
- has-background-danger: This class used to set the background 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> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"> </head> <body> <h1 class="is-size-2"> w3wiki </h1> <b>Bulma Background Color Class</b> <br> <div> <p class="has-text-white has-background-black"> A Computer Science Portal for Beginner </p> <p class="has-text-black has-background-white"> A Computer Science Portal for Beginner </p> <p class="has-text-light has-background-dark"> A Computer Science Portal for Beginner </p> <p class="has-text-dark has-background-light"> A Computer Science Portal for Beginner </p> <p class="has-text-primary has-background-link"> A Computer Science Portal for Beginner </p> <p class="has-text-link has-background-primary"> A Computer Science Portal for Beginner </p> <p class="has-text-info has-background-success"> A Computer Science Portal for Beginner </p> <p class="has-text-success has-background-info"> A Computer Science Portal for Beginner </p> <p class="has-text-warning has-background-danger"> A Computer Science Portal for Beginner </p> <p class="has-text-danger has-background-warning"> A Computer Science Portal for Beginner </p> </div> </body> </html> |
Output:
Reference: https://bulma.io/documentation/helpers/color-helpers/#background-color