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 class is used for grouping controls and aligning at the center.
- is-grouped-right: This class is used for grouping controls and aligning at right.
- is-grouped-multiline: This class is used for grouping multiple lists of controls to fill up automatically.
Syntax:
<div class="field is-grouped |is-grouped-centered |is-grouped-right |is-group-multiline"> .... </div>
Example 1: Below examples illustrate the form group classes. This example illustrates how the form components are grouped at the center and at the right.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
</head>
<body>
<div class="container content has-text-centered">
<h1 class="title has-text-success">
GeeksforGeeks
</h1>
<h1 class="subtitle">Bulma form group</h1>
<!-- Grouping -->
<div class="field is-grouped">
<label for="form" class="p-2">
Default Grouping of Fields
</label>
<p class="control">
<button class="button is-primary">
Find
</button>
</p>
<p class="control">
<button class="button is-light">
Search
</button>
</p>
</div>
<!-- Grouping -->
<div class="field is-grouped is-grouped-centered">
<label for="form" class="p-2">
Grouping Fields in center
</label>
<p class="control">
<button class="button is-info">
Find
</button>
</p>
<p class="control">
<button class="button is-light">
Search
</button>
</p>
</div>
<!-- Grouping -->
<div class="field is-grouped is-grouped-right">
<label for="form" class="p-2">
Grouping Fields in right
</label>
<p class="control">
<button class="button is-warning">
Find
</button>
</p>
<p class="control">
<button class="button is-light">
Search
</button>
</p>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below example, the form group multiline class is implemented and illustrates how the form components are grouped automatically.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GFG</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container content has-text-centered">
<!-- Multiline Grouping -->
<div class="field is-grouped is-grouped-multiline content">
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-success">Find</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
<p class="control">
<button class="button is-info">Search</button>
</p>
</div>
</div>
</body>
</html>
|
Output:
Bulma Form group
Reference: https://bulma.io/documentation/form/general/#form-group