Open In App

Bulma Content Variables

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Bulma Content is use to do the content task in the web, like if you can’t use CSS or when you just want to use HTML tags directly, use content as container. It can handle almost any HTML tag like HTML <p>, <ul>, <ol>, <dl>, <h1> to <h6>, <blockquote>, <em>, <strong>, <table>, <tr>, <th>, and <td> tags.

Bulma Content Variables Used:

  • $content-heading-color: This variable is used to provide color for the heading of the content.
  • $content-heading-weight: This variable is used to provide weight to the heading of the content.
  • $content-heading-line-height: This variable is used to provide the line height to the heading of the content.
  • $content-block-margin-bottom: This variable is used to provide the bottom margin to the block of the content.
  • $content-blockquote-background-color: This variable is used to provide background color to the blockquote of the content.
  • $content-blockquote-border-left: This variable is used to provide border-left to the blockquote of the content.
  • $content-blockquote-padding: This variable is used to provide padding to the blockquote of the content.
  • $content-pre-padding: This variable is used to provide pre-padding to the content.
  • $content-table-cell-border: This variable is used to provide a border cell to the table of the content.
  • $content-table-cell-border-width: This variable is used to provide border cell width to the table of the content.
  • $content-table-cell-padding: This variable is used to provide cell padding to the table of the content.
  • $content-table-cell-heading-color: This variable is used to provide color to the heading of the table.
  • $content-table-head-cell-border-width: This variable is used to provide border width to the header of the table.
  • $content-table-head-cell-color: This variable is used to provide color to the head of the table.
  • $content-table-body-last-row-cell-border-bottom-width: This variable is used to provide the bottom width of the last cell of the table.
  • $content-table-foot-cell-border-width: This variable is used to provide width to the foot cell of the table.
  • $content-table-foot-cell-color: This variable is used to provide color to the foot cell of the table.

Example 1: In the below code, we will make use of one of the above variables to demonstrate the use of content. The $content-heading-color is used for setting the color for the HTML paragraph.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
    </script>
    <style>
       h2,p
       {
           text-align:center;
       }
    </style>
</head>
<body>
    <center
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
        
        <div class="has-text-left ml-4">
            <div class="content is-small">
                <h2>Bulma Content:</h2>
                <p>
                    Bulma is an Open source CSS framework 
                    developed by Jeremy Thomas. This framework
                    is based on the CSS Flexbox property.
                </p>
            </div>
       </div>      
    </center>
</body>
</html>


SCSS Code:

$content-heading-color:green;

p{
   color:$content-heading-color;   
}

CSS Code:

p
{
  color: green; 
}

Output:

 

Example 2: In the below code, we will make use of one of the above variables to demonstrate the use of content. The $content-heading-weight is used for setting the width of the HTML paragraph.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
      
     <!-- font-awesome cdn -->
    <script src=
    </script>
    <style>
        h2, p {
            text-align:center;
        }
        p {
            background-color:green;
            color:white;
        }
        body {
            margin-left:10px;
            margin-right:10px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
            
        <div class="has-text-left ml-4">
            <div class="content is-small">
                <h2>Bulma Content:</h2>
                    <p>
                        Bulma is an Open source CSS framework 
                        developed by Jeremy Thomas. This framework
                        is based on the CSS Flexbox property.
                    </p>
            </div>
        </div>      
    </center>
</body>
</html>


SCSS Code:

$content-heading-weight:60px;
p{
    width:$content-heading-weight;   
}

Compiled CSS Code:

p 
{
   width: 60px;
}

Output:

 

Reference: https://bulma.io/documentation/elements/content/



Last Updated : 19 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads