Bulma CSS Classes

Bulma CSS 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

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 Bulma CSS classes in Forms category

© 2024 Shuffle. All rights reserved.