Bootstrap 4 Forms

Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of input fields, checkboxes, etc.

Bootstrap 4 provides some classes with the help of which we can easily customize forms. We can also make changes in styling and alignment of the form controls (such as labels, inputs, select boxes, text areas, etc.) with the help of bootstrap utilities.

How to create forms

  • To create a form, you have to place all the elements within the <form> element.
  • Add the class .form-group class each <div> element for providing structure. The .form-group class helps in maintaining the sequence of elements and also provides margin-bottom to the group.
  • Add the .form-control class to the <input> element. This class covers the whole width of its parent.

Example

This example shows how to create the basic bootstrap form.

Output

Bootstrap Form

Inline FormsBootstrap 4 offers some predefined class that helps you to create forms in a single row. In the inline forms, all the labels and input fields are in a single row and left-aligned. To create an inline form, you have to add .form-inline class to the <form> element.

Note: You can only create inline forms on screens that have a screen size of 576px or more. Otherwise, this will look like a basic form.

Example

This example shows how to create inline form.

Output

Bootstrap Form

Inline Forms with Utilities – In the inline forms, there is no default spacing. So, bootstrap 4 provides some utilities that are used for spacing the elements within the form.

  • Add the .mr-sm-2 class to give the right margin to each input and to every screen size.
  • Add the .mb2 class to give the margin-bottom to each input field.

Example

Output

Bootstrap Form

Form Grid with row – Bootstrap 4 offers some predefined classes that are used to design form grid or complex forms. The complex forms are those whose layout consists of several columns, such that each column has a different width and different alignment.

To create a form group,

  • You have to add the .row class to the <div> element.
  • Add the .col class to the <div> element inside the .row class.

The .col class is used to control the form width and alignment of form inputs without using spacing utilities.

Example

Output

Bootstrap Form

Form Validation – You can easily validate the form on the client-side. Form validation is used to give valuable feedback or implement custom messages to the users. 

Steps to implement the form validation using bootstrap are given below:

Add the .was-validated class to the <form> element if you want to provide feedback notification before form submission.

Or

Add the .needs-validation class to the <form> element if you want to provide feedback notification after the form submission.

If there are some fields that are necessary to be filled by the user before form submission. In that case, you can use the .valid-feedback class or .invalid-feedback class. These classes provide a message to the user about the fields that are necessary to be filled. The valid fields appear green, or the invalid or empty fields appear red.

Example

This example shows form validation using .was-validated class.

Output

Bootstrap Form

Pin It on Pinterest

Share This