Form Layout: Bootstrap provides two types of form layout which are listed below:
- Stacked form
- Inline form
Stacked form: The stacked form creates input field and submit button in stacked format.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Stacked form</h2>
<div class="container">
<form action="#">
<div class="form-group">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname"
placeholder="Enter First Name" name="fname">
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname"
placeholder="Enter Last Name" name="lname">
</div>
<div class="form-group">
<label for="email">Email Id:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter Email Id" name="email">
</div>
<div class="form-group">
<label for="contact">Contact No:</label>
<input type="text" class="form-control" id="contact"
placeholder="Enter Contact Number" name="contact">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember">
Remember me
</label>
</div>
<button type="submit" class="btn bg-success">
Submit
</button>
</form>
</div>
</body>
</html>
Output:
Inline Form: The .form-inline class is used with <form> element to create inline form. The inline form contains elements that are left-aligned and inline. The inline property applies when viewports are at least 576px wide. If screen size is smaller than 576px then the form element will be stacked vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Inline form</h2>
<div class="container">
<form class="form-inline" action="#">
<label for="fname">First Name:</label>
<input type="text" class="form-control"
id="fname" placeholder="Enter First Name"
name="fname">
<label for="lname">Last Name:</label>
<input type="text" class="form-control"
id="lname" placeholder="Enter Last Name"
name="lname">
<label for="email">Email Id:</label>
<input type="email" class="form-control"
id="email" placeholder="Enter Email Id"
name="email">
<label for="contact">Contact No:</label>
<input type="text" class="form-control"
id="contact"
placeholder="Enter Contact Number"
name="contact">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
name="remember">
Remember me
</label>
</div>
<button type="submit"
class="btn bg-success">
Submit
</button>
</form>
</div>
</body>
</html>
Output:
Inline Form with Utilities: The Bootstrap spacing utilities is used to add space to look better inline form. The .mr-sm-2 class is used to add the right margin to each input on all devices (small and up) and .mb-2 class adds a margin to the bottom.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Inline form with Utilities</h2>
<div class="container-fluid">
<form class="form-inline" action="#">
<label for="fname" class="mb-2 mr-sm-2">
First Name:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="fname" placeholder="Enter First Name"
name="fname">
<label for="lname" class="mb-2 mr-sm-2">
Last Name:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="lname" placeholder="Enter Last Name"
name="lname">
<label for="email" class="mb-2 mr-sm-2">
Email Id:
</label>
<input type="email" class="form-control mb-2 mr-sm-2"
id="email" placeholder="Enter Email Id"
name="email">
<label for="contact" class="mb-2 mr-sm-2">
Contact No:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="contact" placeholder="Enter Contact Number"
name="contact">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
name="remember">
Remember me
</label>
</div>
<button type="submit" class="btn bg-success mb-2">
Submit
</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Inline form with Utilities</h2>
<div class="container-fluid">
<form class="form-inline" action="#">
<label for="fname" class="mb-2 mr-sm-2">
First Name:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="fname" placeholder="Enter First Name"
name="fname">
<label for="lname" class="mb-2 mr-sm-2">
Last Name:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="lname" placeholder="Enter Last Name"
name="lname">
<label for="email" class="mb-2 mr-sm-2">
Email Id:
</label>
<input type="email" class="form-control mb-2 mr-sm-2"
id="email" placeholder="Enter Email Id"
name="email">
<label for="contact" class="mb-2 mr-sm-2">
Contact No:
</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="contact" placeholder="Enter Contact Number"
name="contact">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
name="remember">
Remember me
</label>
</div>
<button type="submit" class="btn bg-success mb-2">
Submit
</button>
</form>
</div>
</body>
</html>
Output:
Form Validation: The .was-validated or .needs-validation class in <form> element is used to provide validation before or after submitting the form. The input field with green border indicate valid and red border indicate invalid form content. The .valid-feedback or .invalid-feedback is used to display a notification message to the user before submitting the form.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">GeeksforGeeks</h1>
<h2 class="text-center">Form Validation</h2>
<div class="container">
<form action="#" class="was-validated">
<div class="form-group">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname"
placeholder="Enter First Name" name="fname" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">
Please fill this field
</div>
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname"
placeholder="Enter Last Name" name="lname" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">
Please fill this field
</div>
</div>
<div class="form-group">
<label for="email">Email Id:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter Email Id" name="email" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">
Please fill this field
</div>
</div>
<div class="form-group">
<label for="contact">Contact No:</label>
<input type="text" class="form-control" id="contact"
placeholder="Enter Contact Number" name="contact"
required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">
Please fill this field
</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember" required> I agree
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">
Please check the checkbox
</div>
</label>
</div>
<button type="submit" class="btn bg-success">
Submit
</button>
</form>
</div>
</body>
</html>
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari