Open In App

Bulma Content Variables

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:

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.






<!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.




<!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/


Article Tags :