← all Bulma classes list

Bulma class: .is-horizontal

    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Subject</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
                </div>
                <p class="help is-danger">
                This field is required
                </p>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Question</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
        <!-- Left empty for spacing -->
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <button class="button is-primary">
                        Send
                    </button>
                </div>
            </div>
        </div>
    </div>

Preview

This field is required

Use Shuffle AI to build your own Bulma CSS templates

Quickly design stunning Bulma CSS templates with the power of Shuffle AI — no coding required.

Check .is-horizontal in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

More in Bulma Forms