Bootstrap 5 Layout Horizontal form

Bootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls. Also, use the .col-form-label class with <label> element to set the form label in vertically centered.

Layout Horizontal form used Classes:

• .row: This class is used to create the row of the form.
• .col-*-*: This class is used to create a grid column layout of the form.

Syntax:

<form>
 <div class="row">
 <label for="..." class="col-*-* col-form-label">...</label>
 <div class="col-*-*">
 <input type="..." class="form-control" id="...">
 </div>
 </div>
 ...
</div>

 

Example 1: In this example, we will create a horizontal form layout.

Output:

👁 Image

Example 2: In this example, we will create a horizontal form layout.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form