What’s the recommended layout for inline forms on small viewports?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

What’s the recommended layout for inline forms on small viewports?

Asked on Jul 01, 2025

Answer

In Bootstrap 5, inline forms are best displayed as stacked forms on small viewports to ensure readability and usability. You can achieve this by using Bootstrap's grid system and utility classes.

<!-- BEGIN COPY / PASTE -->
        <form class="row g-3">
            <div class="col-12 col-sm-6">
                <label for="inputEmail" class="form-label">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
            <div class="col-12 col-sm-6">
                <label for="inputPassword" class="form-label">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </form>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `row g-3` classes to create a responsive form with gutters.
The `col-12` class ensures full-width fields on small viewports, while `col-sm-6` allows side-by-side fields on larger screens.
Labels and inputs are wrapped in `col-12 col-sm-6` to adjust their layout responsively.
The button is full-width on small screens due to the `col-12` class.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

What’s the recommended layout for inline forms on small viewports?

Asked on Jul 01, 2025

Answer

The Q&A Network