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:

See online demo and code

The markup for the form:

<form>

<small id="nameHelp" class="form-text text-muted">Please enter your full name</small>

</div>

<label for="EmailDemo">Your Email:</label>

<small id="emailHelp" class="form-text text-muted">Please enter your primary email, we will send confirmation email!</small>

</div>

<label for="passDemo">Enter Password:</label>

<small id="passHelp" class="form-text text-muted">Must be 8 characters long</small>

</div>

<label class="form-check-label" for="CheckDemo">Agree with Terms & Conditions?</label>

</div>

<button type="submit" class="btn btn-success">Create Account</button>

</form>

</div>

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:

See online demo and code

The markup:

<form>

<small id="nameHelp" class="form-text text-muted">Please enter your full name</small>

</div>

<label for="EmailDemo">Your Email:</label>

<small id="emailHelp" class="form-text text-muted">Please enter your primary email, we will send confirmation email!</small>

</div>

<label for="passDemo">Enter Password:</label>

<small id="passHelp" class="form-text text-muted">Must be 8 characters long</small>

</div>

<label for="selectDemo">Select Year</label>

</select>

</div>

<label for="textareaDemo">Any Feedback/Requirement</label>

</div>

<label class="form-check-label" for="CheckDemo">Agree with Terms & Conditions?</label>

</div>

<button type="submit" class="btn btn-dark">Create My Account</button>

</form>

</div>

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>:

See online demo and code

The HTML

<form>

<h5>Textboxes sizes</h5>

</div>

</div>

</div>

<h5>Select dropdowns sizes</h5>

<option>Normal</option>

</select>

</div>

<option>Large - form-control-lg</option>

</select>

</div>

<option>Small - form-control-sm</option>

</select>

</div>

</form>

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:

See online demo and code

The code:

<form>

<label for="NameDemo1">First Name:</label>

<small id="nameHelp" class="form-text text-muted">Please enter your first name</small>

</div>

<small id="nameHelp" class="form-text text-muted">Please enter your last name</small>

</div>

<label for="EmailDemo">Your Email:</label>

<small id="emailHelp" class="form-text text-muted">Please enter your primary email, we will send confirmation email!</small>

</div>

<label for="passDemo">Enter Password:</label>

<small id="passHelp" class="form-text text-muted">Must be 8 characters long</small>

</div>

<label for="selectDemo">Select Year</label>

</select>

</div>

<button type="submit" class="btn btn-dark">Create My Account</button>

</form>

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:

See online demo and code

The HTML code

<h3>An inline form example</h3>

<label class="sr-only" for="UsernameInlineFormInput">Username</label>

</div>

</div>

Remember me

</label>

</div>

<button type="submit" class="btn btn-info mb-2">Submit</button>

</form>

</div>

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:

See online demo and code

The HTML for validation demo:

<h3>Bootstrap 4 Form validation</h3>

<label for="NameDemo1">First Name:</label>

Please enter your first name.

</div>

<small id="nameHelp" class="form-text text-muted">Please enter your last name</small>

Last name is also required!

</div>

<label for="EmailDemo">Your Email:</label>

Please Enter a valid email address!

</div>

<label for="passDemo">Enter Password:</label>

Enter the correct password!

</div>

<label for="selectDemo">Select Year</label>

</select>

</div>

<button type="submit" class="btn btn-dark">Create My Account</button>

</form>

</div>

A little script is also required:

(function() {

'use strict';

window.addEventListener('load', function() {

var form = document.getElementById('bs-validate-demo');

form.addEventListener('submit', function(event) {

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

}

form.classList.add('was-validated');

}, false);

})();

</script>

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:

See online demo and code

The HTML:

<h3>Custom Checkbox</h3>

<label class="custom-control-label" for="checkCustom1">Bootstrap</label>

</div>

<label class="custom-control-label" for="checkCustom2">JavaScript</label>

</div>

</div>

<h3>Custom Radio buttons</h3>

</div>

<label class="custom-control-label" for="RadioCustom2">False</label>

</div>

</form>

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:

See online demo and code

The code:

<h3>Custom Checkbox</h3>

<label class="custom-control-label" for="checkCustom1">Agree with Terms?</label>

<div class="invalid-feedback">Must check the checkbox</div>

</div>

<label class="custom-control-label" for="checkCustom2">JavaScript</label>

</div>

</div>

<h3>Custom Radio buttons</h3>

</div>

<label class="custom-control-label" for="RadioCustom2">False</label>

<div class="invalid-feedback">Must select an option</div>

</div>

</form>

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:

See online demo and code

The code:

<h3>Custom select Menu</h3>

<h3>Large Sized</h3>

<option selected>Select Technology</option>

<option value="2">Bootstrap</option>

<option value="3">JavaScript</option>

</select>

<h3>Small Sized</h3>

<option selected>Programming Lang.</option>

<option value="2">Python</option>

</select>

<h3>Normal Sized</h3>

<option selected>Databases</option>

<option value="1">MySQL</option>

<option value="2">MS SQL Server</option>

<option value="3">Oracle</option>

</select>

</form>

</div>

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:

See online demo and code

The file upload HTML code:

<h3>Simple file upload</h3>

<label for="exampleFormControlFile1">Simple file input</label>

</div>

<h3>Custom File upload / validation</h3>

<label class="custom-file-label" for="FileValidationDemo">Select a file for uploading...</label>

<div class="invalid-feedback">Must select a file!</div>

</div>

</form>

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.

See online demo and code

The example code:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<form>

</div>

<label for="emailHori" class="col-sm-2 col-form-label">Email Address</label>

</div>

<label for="PasswordHori" class="col-sm-2 col-form-label">Enter Password</label>

</div>

<legend class="col-form-label col-sm-2 pt-0">Your option</legend>

I agree

</label>

</div>

I do not agree

</label>

</div>

I am confused

</label>

</div>

</fieldset>

<div class="col-sm-2">Checkbox</div>

Agree with Term and Conditions?

</label>

</div>

</div>

</form>

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:

See online demo and code

The CSS

<style>

.form-control {

color: #804000;

background-color: #F4F3F8;

background-clip: padding-box;

border: 1px solid #242134;

border-radius: 0.25rem;

transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.form-control:focus {

color: #804000;

background-color: #fff;

border-color: #006633;

box-shadow: 0 0 0 0.2rem rgba(0, 102, 51, 0.25);

}

</style>

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.

Forms

An example of full width form

Using the select and textarea in the form

The example of setting height of form controls

How to deal with form control widths?

A demo of inline form in Bootstrap 4

A demo of form with validation

Create custom radio buttons and checkboxes example

Checkboxes and radios with form validation state example

Create the select menu by custom class

Customizing the file upload button example

The demo of horizontal form in BS 4

Customizing the form controls as per your desire

Related Tutorials: