Bulma Form Variables

Bulma is a responsive open-source framework for CSS based on Flexbox and it's completely free. The main features of this framework are, that it is very compatible, well documented, and rich in components. For design purposes, Bulma uses classes.

The Bulma framework supports and allows the users to build forms using Bulma form controls. The framework supports <form>, <button>, <input>, <textarea> and <label> elements of HTML. The user can build a complete form using Bulma as it provides the best UI design. Bulma uses a control container for maintaining the flow of the form. It uses field class as a container for adding equal spacing between the form elements. There are various classes used in the form controls and they are discussed below.

Bulma Form Classes:

• field: It is a container in which the label, control, etc. are used for creating a form.
• control: This class is used as a block container which consists of input, level, textarea, and select elements.
• label: This class is used for adding a label for an input element.
• input: This class is used for getting text input from the user.
• textarea: This class is used for getting a large text input from the user.
• select: This class is used for selecting one option from a list in a dropdown menu.
• radio: This class is used for adding radio buttons in Bulma form.
• button: This class is used for adding buttons in Bulma form.
• checkbox: This class is used for adding a checkbox in the Bulma form for selecting multiple option inputs.

Variable Used:

• $label-color: This variable is used to define the color of the label. 
• $label-weight: This variable is used to define the weight of the label.
• $help-size: This variable is used to define the size of the label.

Example 1: In the below code, we will make use of one of the above variables to demonstrate the use of form. This uses the $label-color variable.

SCSS code: 

$label-color:green;
.title {
 color:$label-color;
 
}

Compiled CSS code:

.title {
 color: green; }

Output:

👁 Image

Example 2: In the below code, we will make use of one of the above variables to demonstrate the use of form.

SCSS code:

$label-color:lightgreen;
body {
 background-color:$label-color; 
}

Compiled CSS code:

body {
 background-color: lightgreen; 
}

Output:

👁 Image

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