How can I align form labels and inputs horizontally using Bootstrap's grid system in a custom layout?

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

Post this Question & Answer:

How can I align form labels and inputs horizontally using Bootstrap's grid system in a custom layout?

Asked on Jan 13, 2026

Answer

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

<!-- 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>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <!-- END COPY / PASTE -->

Additional Comment:

The `.row` class is used to create a horizontal group for each form control.
The `.col-sm-2` class is applied to the label to make it span 2 columns on small devices and up.
The `.col-sm-10` class is applied to the input to make it span the remaining 10 columns.
Adjust the column sizes as needed to fit your design requirements.

✅ Answered with Bootstrap 5 best practices.

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

How can I align form labels and inputs horizontally using Bootstrap's grid system in a custom layout?

Asked on Jan 13, 2026

Answer

5,000+ Real Questions. Clear Answers.