Bulma Form field

Bulma is a modern CSS framework based on flexbox. It ships with pre-styled elements and components which can be used together to make beautiful interfaces. In this article, we will be learning the Bulma Form Field.

Bulma form field is a simple container that contains a label element, a Bulma form control, and an optional help text. The field container maintains consistent spacing between the form fields.

Form field classes:

• label: This class is used to set a text label for the field container.
• control: This class is used to set a form control for the field container.
• help: This class is used to set an optional help text for the field container.

Syntax:

<div class="field">
 <label class="label">...</label>
 <div class="control">
 ...
 </div>
 <p class="help">...</p>
</div>

Example: The below example shows the field container of a form.

Output:

👁 Bulma Form field

Reference: https://bulma.io/documentation/form/general/#form-field