Javascript Forms Responsive form Example

Build in responsiveness into your javascript form using the grid layout. Define how the form elements behave across multiple screen sizes.

The column widths will adapt to the screen size based on the predefined .mbsc-col-{breakpoint}-{size} classes.
The examples are using the .mbsc-col-md-6, .mbsc-col-lg-6 and .mbsc-col-lg-3 classes.

Download and try example

Javascript jQuery Angular React Vue

                    <div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Email" data-input-style="box" data-label-style="floating" placeholder="Enter your email address" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Password" data-input-style="box" data-label-style="floating" type="password" placeholder="Set a password" data-password-toggle="true" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-lg-6">
        <label>
            <input mbsc-input data-label="Address" data-input-style="box" data-label-style="floating" placeholder="What is your address?" />
        </label>
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Town" data-input-style="box" data-label-style="floating" placeholder="Enter your town" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="State" data-input-style="box" data-label-style="floating" placeholder="Select your state" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Zip" data-input-style="box" data-label-style="floating" placeholder="What is your zip code" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Country" data-input-style="box" data-label-style="floating" placeholder="Select your country" />
        </label>
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
        <div class="mbsc-button-group-block">
            <button mbsc-button data-color="success">
                Create account
            </button>
        </div>
    </div>
</div>
                