Skip to content
Related Articles

Related Articles

Bulma File Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

Bulma is a free, 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 file element is used to upload custom file input. The ‘file’ component comprises several sub-elements that we have to add exclusively to design our content well. 

These elements are listed below.

  • file-label: It is the actual interactive and clickable part of the file element.
  • file-input: It is the native file input, hidden for styling purposes.
  • file-cta: It is the upload call-to-action.
  • file-icon: It is an optional upload icon.
  • file-label:  It is the “Choose a file…” text
  • file-name: It is the container for the chosen file name.

Variable Used:

Name Description Type Value Computed Value Computed Type
$file-border-color This variable is used to provide border color to the file. variable        $border hsl(0, 0%, 86%) color
$file-radius This variable is used to provide a radius to the file. variable $radius 4px size
$file-cta-background-color This variable is used to provide background color to the file. variable $white-ter hsl(0, 0%, 96%) color
$file-cta-color This variable is used to provide color to the file. variable $grey-dark hsl(0, 0%, 29%) color
$file-cta-hover-color This variable is used to provide color on hover to file. variable $grey-darker hsl(0, 0%, 21%) color
$file-cta-active-color This variable is used to provide color to the active file. variable $grey-darker hsl(0, 0%, 21%) color
$file-name-border-color This variable is used to provide border color to the file name. variable $border hsl(0, 0%, 86%) color
$file-name-border-style This variable is used to provide border style to the file name. string solid    
$file-name-border-width This variable is used to provide border width to the file name. size 1px 1px 1px 0    
$file-name-max-width This variable is used to provide the max width of file name. size 16em    

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

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>    
</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='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class="file">
                        <label class="file-label">
                            <input class="file-input" type="file" name="image">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                       </label>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$file-cta-background-color:green;
.container {
  background-color:$file-cta-background-color;
}

Compiled CSS Code:

.container {
   background-color: green; 
}

Output:

 

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

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>    
</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='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class="file">
                        <label class="file-label">
                            <input class="file-input" type="file" 
                                   name="image">
                                <span class="file-cta">
                                    <span class="file-icon">
                                        <i class="fas fa-upload"></i>
                                    </span>
                                    <span class="file-label">
                                        Choose a file…
                                    </span>
                                </span>
                        </label>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$file-name-border-width:5px solid green;
.container {
  border:$file-name-border-width;
}

Compiled CSS Code:

.container {
     border: 5px solid green;
}

Output:

 

Reference: https://bulma.io/documentation/form/file/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!