This tutorial explains how to create Bootstrap Forms along with layouts, templates, and examples of Bootstrap 4 Form Validation:
In this tutorial on Bootstrap 4 forms, we have covered an introduction to Bootstrap forms, form grid, vertical form layout, horizontal form layout, inline form layout, read-only inputs, read-only plain text, validation with browser defaults, custom style validation, server-side validation, tooltip style validation and frequently asked questions about Bootstrap 4 forms.
Please note that we have used Bootstrap version 4 in all the examples.
=> Check Here To See A-Z Of Bootstrap Training Tutorials
Table of Contents:
Introduction To Bootstrap 4 Forms
Forms are an essential feature of almost every software application. In our last two tutorials, we have discussed the essential features of forms i.e. form inputs and input groups.
Note: You may refer to the following two tutorials for form inputs and input groups.
- Bootstrap 4 Form Inputs
- Bootstrap 4 Input Groups
The below table summarizes the classes and attributes of Bootstrap 4 forms that we have used.
| Class/Attribute | Usage |
|---|---|
| The .form-row class | This class is used for form rows. |
| The .form-inline class | This class is used to arrange form fields on the same line. |
| The readonly attribute | This attribute is used to make the input field read-only. |
| The .form-control-plaintext class | This class is used to create read-only plain text. |
| The .needs-validation class | This class is used for custom style form validation and tooltip style form validation. |
| The novalidate attribute | This attribute is used for custom style form validation and tooltip style form validation. |
| The .is-valid class | This class is used for server-side form validation. |
| The .is-invalid class | This class is used for server-side form validation. |
| The .valid-feedback class | This class is used for displaying feedback messages in custom style form validation and server-side form validation. |
| The .invalid-feedback class | This class is used for displaying feedback messages in custom style form validation and server-side form validation. |
| The .position-relative class | This class is used for proper positioning of tooltip feedback messages. |
| The .valid-tooltip class | This class is used to display feedback messages in tooltip style form validation. |
| The .invalid-tooltip class | This class is used to display feedback messages in tooltip style form validation. |
Bootstrap Form Layout
Bootstrap Form Grid
Form grid classes can use to build more complex forms. We can use the .col class to specify the width of form controls and also help to specify the alignment of form controls.
We need to warp the <div class=”col”> element(s) in a <div> element with the class .row class. However, this grid structure is not mandatory for forms. You may use the <div class=”form-group”> elements for wrapping form controls (and form labels).
If you need fewer grid margins, then you can use the .form-row class instead of the .row class.
Types Of Bootstrap Form Layouts
There are three types of Bootstrap form layouts as stated below.
- Vertical form layout
- Horizontal form layout
- Inline form layout
#1) Vertical Form Layout
The vertical form layout is the default form layout. It arranges the form fields vertically with left-aligned labels. You do not need any base class for the vertical form layout as it is the default layout. Please refer to the section “Examples of Bootstrap Form Layouts” for an example of a form with the vertical form layout.
#2) Horizontal Form Layout
The horizontal form layout arranges the form fields horizontally.
Follow the below steps to create a form with the horizontal form layout.
- Add the .row class to the <div class=”form-group”> elements.
- Then, add the .col-*-* class and the .col-form-label class to the <label> elements. The .col-*-* class is used to specify the size of form labels and form controls.
Please refer to the section “Examples of Bootstrap Form Layouts” for an example of a form with the horizontal form layout.
#3) Inline Form Layout
The inline form layout arranges the form fields on the same line.
Follow the below steps to create a form with the inline form layout.
- Add the .form-inline class to the <form> element.
- Also, use the margin classes as required.
Please refer to the section “Examples of Bootstrap Form Layouts” for an example of a form with the inline form layout.
Examples Of Bootstrap Form Layouts
The below programming code shows examples of Bootstrap login forms with vertical form layout, horizontal form layout, and inline form layout.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3 class="text-primary">Vertical Form Layout</h3> <form> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" id="password"> </div> <button type="submit" class="btn btn-danger">Login</button> </form> <h3 class="text-primary mt-3">Horizontal Form Layout</h3> <form> <div class="form-group row"> <label class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email"> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password"> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" class="btn btn-danger">Login</button> </div> </div> </form> <h3 class="text-primary">Inline Form Layout</h3> <form class="form-inline"> <div class="form-group mr-2"> <label>Email</label> <input type="email" class="form-control ml-2" id="email"> </div> <div class="form-group mr-2"> <label>Password</label> <input type="password" class="form-control ml-2" id="password"> </div> <button type="submit" class="btn btn-danger">Login</button> </form> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Read-only And Read-only Plain Text
Read-only
The read-only attribute is used to make the input field read-only. Read-only input fields appear in a lighter color and cannot be edited. They are similar to disabled input fields but retain the cursor.
Note: We have already discussed disabled inputs and disabled input groups in our previous tutorials.
Please refer to the below section for an example of a read-only input field.
Read-only Plain Text
Add the .form-control-plaintext class to create read-only plain text. Please refer to the below section for an example of a read-only plain text.
Examples Of Read-only and Read-only Plain Text
The below programming code shows examples of a normal text input field, read-only input field, and read-only plain text.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <form> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="city">City:</label> <input type="text" class="form-control" id="city" value="Bangalore" readonly> </div> <div class="form-group"> <label for="country">Country:</label> <input type="text" class="form-control-plaintext" id="country" value="India" readonly> </div> <button type="submit" class="btn btn-danger">Submit</button> </form> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap 4 Form Validation
Validation is key for forms. Without proper validation of forms, your whole web application may be at risk. We will discuss the four types of validation.
- Validation with browser defaults
- Custom style validation
- Server-side validation
- Tooltip style validation
#1) Validation With Browser Defaults
If you do not prefer Bootstrap validation, then you can use browser defaults for validation. Please refer to the below section for an example of validation with browser defaults.
#2) Custom Style Validation
Add the .needs-validation class and the novalidate attribute to the <form> element for custom style validation.
This type of validation uses the following CSS pseudo-classes.
- The :valid pseudo-class
- The :invalid pseudo-class
These pseudo-classes can be applied to the following elements.
- The <input> elements
- The <select> elements
- The <textarea> elements
The following two classes are used for displaying the feedback messages.
- The .valid-feedback class
- The .invalid-feedback class
We also need to add JavaScript code to disable the form submission if there are any invalid fields.
Please refer to the below section for an example of custom style validation.
#3) Server-side Validation
This type of validation uses the following classes.
- The .is-valid class
- The .is-invalid class
Furthermore, the following two classes are used for displaying the feedback messages.
- The .valid-feedback class
- The .invalid-feedback class
Please refer to the below section for an example of Server-side validation.
#4) Tooltip Style Validation
Add the .needs-validation class and the novalidate attribute to the <form> element for tooltip style validation. Furthermore, add the .position-relative class to the parent element(s) for the proper positioning of tooltip feedback messages.
The following two classes are used for displaying the Tooltip style feedback messages.
- The .valid-tooltip class
- The .invalid-tooltip class
Please refer to the below section for an example of tooltip style validation.
Examples Of Validation
The below programming code shows examples of the following types of form validation.
- Example form 1 – Validation with browser defaults.
- Example form 2 – Custom style validation.
- Example form 3 – Server-side validation.
- Example form 4 – Tooltip style validation.
You can try these examples by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<h4>Validation with Browser Defaults</h4>
<form class="mb-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" value="Mumbai" required>
</div>
<div class="form-group">
<label for="age">Age</label>
<div class="input-group">
<input type="number" class="form-control" id="age" required>
<div class="input-group-append">
<span class="input-group-text" id="age">years</span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Agree to terms.
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Send</button>
</form>
<h4>Custom Style Validation</h4>
<form class="needs-validation mb-3" novalidate>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
Please provide a valid name.
</div>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" value="Mumbai" required>
<div class="valid-feedback">
Looks ok.
</div>
</div>
<div class="form-group">
<label for="age">Age</label>
<div class="input-group">
<input type="number" class="form-control" id="age" required>
<div class="input-group-append">
<span class="input-group-text" id="age">years</span>
</div>
<div class="invalid-feedback">
Please provide a valid age.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Agree to terms.
</label>
<div class="invalid-feedback">
You must agree terms to continue.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Send</button>
</form>
<h4>Server-side Validation</h4>
<form class="mb-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control is-invalid" id="name" required>
<div class="invalid-feedback">
Please provide a valid name.
</div>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control is-valid" id="city" value="Mumbai" required>
<div class="valid-feedback">
Looks ok.
</div>
</div>
<div class="form-group">
<label for="age">Age</label>
<div class="input-group">
<input type="number" class="form-control is-invalid" id="age" required>
<div class="input-group-append">
<span class="input-group-text" id="age">years</span>
</div>
<div class="invalid-feedback">
Please provide a valid age.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Agree to terms.
</label>
<div class="invalid-feedback">
You must agree terms to continue.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Send</button>
</form>
<h4>Tooltip Style Validation</h4>
<form class="needs-validation mb-3" novalidate>
<div class="form-group position-relative">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-tooltip">
Please provide a valid name.
</div>
</div>
<div class="form-group position-relative">
<label for="city">City</label>
<input type="text" class="form-control" id="city" value="Mumbai" required>
<div class="valid-tooltip">
Looks ok.
</div>
</div>
<div class="form-group position-relative">
<label for="age">Age</label>
<div class="input-group">
<input type="number" class="form-control" id="age" required>
<div class="input-group-append">
<span class="input-group-text" id="age">years</span>
</div>
<div class="invalid-tooltip">
Please provide a valid age.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Agree to terms.
</label>
<div class="invalid-tooltip">
You must agree terms to continue.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Send</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Disable form submissions if there are any invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Frequently Asked Questions
In this section, we will look at some of the frequently asked questions about Bootstrap 4 forms.
Q #1) What is the difference between the .row class and the .form-row class?
Answer: Unlike the .row class, the .form-row class applies fewer grid margins.
Q #2) What are the three types of form layouts?
Answer: The three types of form layouts are,
- Vertical form layout,
- Horizontal form layout and
- Inline form layout.
Q #3) Which form layout arranges the form fields on the same line?
Answer: The inline form layout arranges the form fields on the same line.
Q #4) Which form layout arranges the form fields vertically?
Answer: The vertical form layout arranges the form fields vertically?.
Q #5) Which form layout arranges the form fields horizontally?
Answer: The horizontal form layout arranges the form fields horizontally.
Q #6) Which attribute is used to convert a form input such as text input into a read-only input field?
Answer: The readonly attribute is used to convert a form input into a read-only field.
Q #7) What is the difference between a disabled input field and a readonly input field?
Answer: Unlike a disabled input field, a read-only input field retains the cursor.
Q #8) Which class is used for read-only plain text?
Answer: The class used for read-only plain text is the .form-control-plaintext class.
Q #9) Which pseudo-classes are used for custom style form validation?
Answer: The pseudo-classes used for custom style form validation are :valid pseudo-class and :invalid pseudo-class.
Q #10) Which classes are used for displaying feedback messages in custom style form validation?
Answer: The classes used for displaying feedback messages in custom style form validation are the .valid-feedback class and .invalid-feedback class.
Q #11) Which classes are used for displaying feedback messages in server-side form validation?
Answer: The classes used for displaying feedback messages in Server-side form validation are the .valid-feedback class and the .invalid-feedback class.
Q #12) Which classes are used for displaying feedback messages in tooltip style form validation?
Answer: The classes used for displaying feedback messages in Tooltip style form validation are the .valid-tooltip class and the .invalid- tooltip class.
Q #13) Which class is used for proper positioning of tooltip feedback messages?
Answer: The class used for proper positioning of tooltip feedback messages is the .position-relative class.
Conclusion
Forms are a very important feature in any software application. Bootstrap forms are similar to HTML5 forms but they add a wide variety of styles using its classes. It also provides validation.
=> Take A Look At The Bootstrap Beginners Guide Here