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.

HTML

<!DOCTYPE html>
<html>

<head>
    
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <style>
        .head{
            text-align: center;
        }
        form{
            margin-top: 25px;
        }
    </style>
</head>

<body>
    <div class="head">
        <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
        <p><b>Bulma Form Field</b></p>
    </div>
    <div class="container is-fluid">
        <form>
            <div class="field">
                <label class="label">Field With Help text</label>
                <div class="control">
                    <input class="input" type="text" 
                         placeholder="Enter some text">
                </div>
                <p class="help">Some help text here</p>

            </div>

            <div class="field">
                <label class="label">Field Without Help text</label>
                <div class="control">
                    <input class="input" type="text" 
                         placeholder="Enter some text">
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Output:

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

Explore