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