We can set the size of the input elements in our form. We can control the height of the element using various classes for small, medium, and large resolutions.

We have learned to use the .form-control class in the previous section and, by default, the medium size height with the .form-control-md class is applied. There are other classes available to set the height as large or small. We can use .form-control-lg and .form-control-sm, respectively.

The following is the sample code, where we are setting the height of the email address element as large using the .form-control-lg class, and the password field with the .form-control-sm class:

<form>
 <div class="form-group mb-2 mr-sm-2">
   <label for="userEmailAddress">Enter email address</label>
   <input type="email" class="form-control form-control-lg" 
     id="userEmailAddress">
 </div>
  
 <div class="form-group mb-2 mr-sm-2">
   <label for="userPassword">Enter password</label>
   <input type="password" class="form-control form-control-sm" 
     id="userPassword">
 </div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

We have added the form-control-lg and form-control-sm classes to the form control's email address and password form elements, respectively.

When we run the application, the output of the preceding code is as follows:

In the preceding screenshot, notice the difference in heights of the input elements. The email address text field has increased in height and the password field is small.