How can I align labels and inputs horizontally in a Bootstrap form layout using grids?

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

Post this Question & Answer:

How can I align labels and inputs horizontally in a Bootstrap form layout using grids?

Asked on Dec 28, 2025

Answer

To align labels and inputs horizontally in a Bootstrap form layout, you can utilize the grid system to create a structured form. Here's a simple example using Bootstrap's grid classes.

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

Additional Comment:

The `row` class is used to create a horizontal group of columns.
The `col-sm-2` class is applied to labels to allocate 2 columns of space on small and larger screens.
The `col-sm-10` class is applied to inputs to allocate the remaining 10 columns.
The `offset-sm-2` class is used to align the button with the inputs by offsetting it by 2 columns.

✅ Answered with Bootstrap 5 best practices.

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

How can I align labels and inputs horizontally in a Bootstrap form layout using grids?

Asked on Dec 28, 2025

Answer

The Q&A Network