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

Asked on Jul 12, 2025

1 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.

← Back to All Questions