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.
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=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<div class="container box p-6 ">
<h1 class="title has-text-centered">
GeeksforGeeks
</h1>
<h2 class="subtitle has-text-centered">
Sign Up Form
</h2>
<form action="">
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success"
type="text" placeholder="Enter your username"/>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="password"
placeholder="Enter your password"/>
<span class="icon is-small is-left">
<i class="fas fa-key"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">Choose your Course </label>
<div class="control">
<div class="select">
<select>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">
Something Else
</label>
<div class="control">
<textarea class="textarea"
placeholder="Want to tell anything?">
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" />
I agree to the <a href="#">
terms and conditions
</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="question" />
Yes
</label>
<label class="radio">
<input type="radio" name="question" />
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-success">
Sign up
</button>
</div>
<div class="control">
<button class="button is-link is-light">
Cancel
</button>
</div>
</div>
</form>
</div>
</center>
</body>
</html>
SCSS code:
$label-color:green;
.title {
color:$label-color;
}
Compiled CSS code:
.title {
color: green; }
Output:
Example 2: In the below code, we will make use of one of the above variables to demonstrate the use of form.
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=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<div class="container box p-6 ">
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<form action="">
<div class="field">
<label class="label">First Name</label>
<div class="control">
<input class="input" type="text"
placeholder="Enter your name" />
</div>
</div>
<div class="field">
<label class="label">Last Name</label>
<div class="control">
<input class="input" type="text"
placeholder="Enter your name" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-success">
Ok
</button>
</div>
<div class="control">
<button class="button is-link is-light">
Cancel
</button>
</div>
</div>
</form>
</div>
</center>
</body>
</html>
SCSS code:
$label-color:lightgreen;
body {
background-color:$label-color;
}
Compiled CSS code:
body {
background-color: lightgreen;
}
Output:
Reference: https://bulma.io/documentation/form/general/
Similar Reads
Bulma Input Variables 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. Bulma input variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add st
3 min read
Bulma Initial variables In this article, we will see how the initial variable is used in the webpage. 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. Initial Variables: This va
5 min read
Bulma Form 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 Bulma framework supports and allows the users to build forms using Bulma form controls. The framewor
3 min read
Bulma Form Group In this article, we'll be seeing Bulma form group. Bulma allows the users to group the form fields together. Below are the different classes used in grouping the form fields together. Bulma Form Group class: is-grouped: This class is used for grouping the form controls.is-grouped-centered: This clas
3 min read
PHP Variables A variable in PHP is a container used to store data such as numbers, strings, arrays, or objects. The value stored in a variable can be changed or updated during the execution of the script.All variable names start with a dollar sign ($).Variables can store different data types, like integers, strin
5 min read
Python Variables In Python, variables are used to store data that can be referenced and manipulated during program execution. A variable is essentially a name that is assigned to a value. Unlike many other programming languages, Python variables do not require explicit declaration of type. The type of the variable i
6 min read
Variable in Programming In programming, we often need a named storage location to store the data or values. Using variables, we can store the data in our program and access it afterward. In this article, we will learn about variables in programming, their types, declarations, initialization, naming conventions, etc. Variab
11 min read
JavaScript Variables Variables in JavaScript can be declared using var, let, or const. JavaScript is dynamically typed, so variable types are determined at runtime without explicit type definitions.JavaScript var keywordJavaScript let keywordJavaScript const keyword JavaScriptvar a = 10 // Old style let b = 20; // Prfer
5 min read
Variables in LISP Similar to other languages, in LISP variables are named places that store a particular value, but they are not declared the way you declare variables in C++ or Java i.e you don't need to mention data-type of variables when declaring them as LISP is dynamically typed. LISP supports two types of varia
3 min read
Equations with Variables An equation in algebra consist of two algebraic expressions separated by an inequality sign generally equal to. For example, ax + b = c. These equations consist of some numbers, a variable, operator sign and inequality sign. An equation with variable is used to represent a general condition . For ex
7 min read