Bulma Horizontal Form

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

In this article, we will see Bulma's Horizontal form. The Bulma framework allows its users to create forms horizontally (forms are aligned vertically by default). In this type of form, the labels are aligned next to the input fields i.e, horizontally. Also, note that the form will transform to its vertical alignment once the screen size gets small and therefore the labels get above the input fields.

Bulma Horizontal Form class:

• is-horizontal: This class is used to create forms horizontally.
• field-label: This class is used for adding the labels next to the input field.
• field-body: This class is used for adding the input fields, like select, textarea, etc.

Syntax:

<div class="field is-horizontal">
 <div class="field-label">
 ....
 </div>
 <div class="field-body">
 ....
 </div>
</div>

Example: Below example illustrates Bulma horizontal form.

Output:

👁 Bulma Horizontal form

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