Remember the Bootstrap grid classes we learned about in Chapter 3, Bootstrap – Grid Layout and Components? Yes, rows, columns, and designing the layout of the screen.

In this section, we will learn to use the same row and column grid classes inside our forms, which is good news because using these classes, we can design a custom layout and update the look and feel of the form.

The sample code for this is as follows:

<form>
 <div class="row">
 <div class="col">
 <label for="userEmailAddress">Enter email address</label>
 <input type="email" class="form-control" id="emailAddress" readonly>
 </div>
 <div class="col">
 <label for="userPassword">Enter password</label>
 <input type="password" class="form-control" id="userPassword">
 </div>
 </div>
</form>

In the preceding code, instead of using the .form-group class, we are making use of the row and col classes, which are mainly used for designing layout.

We make a single row with two columns, and in each column, we add input elements.

The output of the preceding code is as follows:

Here's your homework now. Try out these fun use cases using grid classes with forms:

• Add more input elements in the same row by adding more column div elements to the same row
• Add multiple rows to the form
• Assign a fixed width for some columns (column 4 or column 3)