The Forms in Bootstrap 4

The Bootstrap 4 Form component has more styles and customization options than the Forms in Bootstrap 3.

For example, you may style the checkbox and radio buttons, the textarea can be expanded vertically while horizontal is disabled, better form validation is implemented, select dropdowns with different styles, sizing is enhanced and others.

In this forms tutorial of Bootstrap 4 Framework, you can see the online form examples utilizing available classes along with customized form demo.

An example of full width form

By default, any element like textbox, select, textarea etc. with .form-control class has 100% width as per parent element containing them.

You may create forms with two types of layouts as using Bootstrap 4:

  • Full-width forms
  • Inline forms

The following example shows a full width form with different form controls:

Bootstrap 4 form basic

See online demo and code

The markup for the form:

You may notice a few things in the above code:

  • Textual fields like Name, Email and Password are given the .form-control
  • The form-control class implements the style like width, padding, line-height, background-color, border, border-radius etc. Besides, the focus state and sizing is also dealt by this class.
  • It is always recommended using the type attribute for the form fields. For example, the above demo used text, password, and email as type. This helps in achieving the form validation implementation based on Bootstrap easily.
  • I used the container class in the <div> that contains the form, so its form fields took the width of parent div with container class.

Using the select and textarea in the form

The following demo shows using the <select> and a textarea in the above form. As mentioned earlier, the textarea can be changed vertically only while horizontal is disabled as it may disturb overall page layout.

Have a look:

Bootstrap 4 form textarea

See online demo and code

The markup:

The select box is given the form-control class. You may also use multiple attribute for allowing more than one selections.

For seeing the difference between textarea in Bootstrap 3 Vs 4, visit this tutorial and go to any demo. Try expanding the textarea in both directions.

The example of setting height of form controls

The Bootstrap 4 has classes for setting the height of the form controls. Following built-in classes can be used with form-control class:

  • .form-control-lg
  • .form-control-sm

Have a look at this demo for seeing the difference among three sizes for textboxes and <select>:

Bootstrap 4 form size

See online demo and code

The HTML

How to deal with form control widths?

You may use grid classes for managing the width of form controls. For example, you may not want to display all text boxes equally i.e. 100% width of the main container. The Name text box may require bigger width than the password.

For dealing with the widths of form controls, use the Bootstrap 4 grid classes e.g. col-md-6, col-md-4, col-md-8 etc. You may place these classes in the control individual’s <div> tag where the form-control class is used.

Have a look at this demo where I used various grid classes for dealing with the width of form controls:

Bootstrap 4 form widths

See online demo and code

The code:

Note: You may also use classes e.g. col-2, col-3 etc. or even col-auto class for taking as much space as needed.

A demo of inline form in Bootstrap 4

For the devices that are greater than or equal to 576px, you may display the inline-forms in a single horizontal row. If the screen becomes smaller then it displays horizontally.

For that, use the .form-inline class in the <form> tag. In that case, the form controls may display slightly different than their default states.

Have a look at this demo where two textboxes, a checkbox, and button are displayed inline:

Bootstrap 4 inline form

See online demo and code

The HTML code

A demo of form with validation

The form validation is made easy with Bootstrap 4. It was not built-in Version 3, so you had to use third-party solutions or write your own. I also wrote a few articles about implementing validation in Bootstrap by using jQuery plug-ins:

jQuery validate plug-in for Bootstrap and

Validation with custom error message in Bootstrap 3

In Bootstrap 4, by using the form fields with required attribute and adding a little JavaScript, you may create a form with good looking validation style. It also requires adding a few Bootstrap 4 classes.

First, have a look at the following demo by clicking the link or image below. Submit the button without entering any information and see how it displays the validation messages according to the field required. After that, I will explain how it worked:

Bootstrap 4 form validation

See online demo and code

The HTML for validation demo:

A little script is also required:

You may get the complete code from the demo page.

This is how validation in this demo worked:

  • First of all, novalidate attribute is used in the <form> tag and the form is given an ID. The novalidate Boolean attribute disables the default tooltips of the browser, however, form validation APIs in JavaScript are still accessible.
  • Just like above example, the form fields are created with the required attribute. This is HTML5 attribute.
  • With each required field, a div is also added with .invalid-feedback class.
  • As the form is submitted, the :invalid and :valid pseudo CSS classes are applied to the form fields. The form fields include textboxes, textarea and <select>.

Create custom radio buttons and checkboxes example

The Bootstrap 4 has .custom-control-input class that you can use for styling the checkboxes and radio buttons.

See the example online:

Custom radio checkbox

See online demo and code

The HTML:

Checkboxes and radios with form validation state example

Just like the textboxes, textarea and <select>, you may style the custom checkboxes with validation states. For that, use the .was-validated class in the <form> element. Also, mark the input type checkbox and radio as required that you want to validate.

Optionally, you may display the message for “invalid” state by using .invalid-feedback class as shown in the example below:

Custom radio checkbox validate

See online demo and code

The code:

Create the select menu by custom class

The Bootstrap 4 has built-in classes for creating the select menu for different sizes. Following classes are available:

  • custom-select //For creating a normal sized select menu
  • custom-select-sm //use with custom-select for small size
  • -custom-select-lg // for large size

Have a look at the demo online for all three sizes:

Custom select menus

See online demo and code

The code:

Customizing the file upload button example

The following demo shows using the BS 4 .form-control-file class, specific to the input type=file. The example page also shows another file upload button with validation and custom name after the file is selected.

This is done by using the .custom-file-label class, have a look:

Custom file upload

See online demo and code

The file upload HTML code:

The demo of horizontal form in BS 4

In the above form example, you might have noticed the labels appear above the form controls. For displaying labels towards the left of controls you may create horizontal forms by using the .row class with .form-group for creating a horizontal form.

BS horizontal form

See online demo and code

The example code:

Get the complete code and see the output on the demo page.

Customizing the form controls as per your desire

Want to use Bootstrap framework based form classes yet need to make little tweaks to match the design of your website or for any other reason?

You can do this by extracting the form classes and override those in your own external CSS file or at page level in the <style> section.

In this demo, I have overridden the .form-control and .form-control:focus classes to change the background color, border and text color in the normal state as well as in the control’s focus state.

The same markup is used as in the above horizontal form example; only the style is added in the <head> section as follows:

BS 4-custom-form

See online demo and code

The CSS

In the same way, you may use the .form-control::placeholder, .form-control-plaintext, form-control-lg, form-control-sm and any other form related classes and modify/add the properties while utilizing the power of Bootstrap 4.