Skip to content
Related Articles

Related Articles

Bulma Image Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jul, 2022
View Discussion
Improve Article
Save Article

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.
The image class is kind of a container since images took a few minutes to load, an image container reserved space for that image so that website’s layout not going to break while image loading or even in image errors.

Syntax:

<figure class="image">
    <img src= "path">
</figure>

Syntax:

$property-name: property-value;

Variable Used:

  • $dimensions: This variable is used to define the dimension of the image. It holds a string type value and the default value is 16 24 32 48 64 96 128.

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle">A computer science portal for geeks</h3>
        <figure class="image is-5by3">
            <img src=
                 alt="GFG">
        </figure>
    </center>
</body>
</html>


SCSS Code:

$dimensions: 250px;
.image{
   width:$dimensions;
 }

Compiled CSS Code:

.image {
   width:250px; 
}

Output:

 

Example 2:  In the below code, we will make use of the above variable to demonstrate the use of the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Image Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
    <style>
        .title{
            color:green;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
    </h3><br>
  
    <div class="box">
        <div>
            <figure class="image">
                 <img src=
            </figure>
        </div>
        <div>
            <p>
                A computer is a machine that can be
                instructed to carry out sequences
                of arithmetic or logical operations
                automatically via computer
                programming. Modern computers have
                the ability to follow generalized
                sets of operations, called programs.
                These programs enable computers to
                perform an extremely wide range of
                tasks.
            </p>
        </div>
    </div>    
</body>
</html>


SCSS Code:

$dimensions: 150px;
.image{
   max-width:$dimensions;
}

Compiled CSS Code:

.image {
   max-width: 150px;
}

Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!