Vertical Form Layout
In a vertical form layout, form elements are stacked on top of each other, making efficient use of vertical space. This layout is suitable for forms with a small to moderate number of fields.
Example: The below code creates a vertical form layout using the Bootstrap classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Sign In</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.is-invalid {
border-color: #dc3545;
}
.invalid-feedback {
display: none;
/* Hide validation messages by default */
color: #dc3545;
}
</style>
</head>
<body>
<div class="container">
<h1>Sign In</h1>
<form id="signInForm" novalidate>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text"
class="form-control"
id="username"
placeholder="Enter your username" required>
<div class="invalid-feedback">
Please enter a valid username.
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<input type="password"
class="form-control"
id="password"
placeholder="Enter your password" required
pattern="(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"
title="invalid Password">
<button class="btn btn-outline-secondary"
type="button"
id="togglePassword">
Show
</button>
</div>
<div class="invalid-feedback">
Password must contain at least one
uppercase letter, one digit,
one special character, and be at
least 8 characters long.
</div>
</div>
<div class="mb-3">
<label for="email"
class="form-label">
Email
</label>
<input type="email"
class="form-control"
id="email"
placeholder="Enter your email address" required
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<button type="submit"
class="btn btn-primary">
Sign In
</button>
</form>
</div>
<script>
const signInForm = document.getElementById('signInForm');
const passwordField = document.getElementById('password');
const togglePasswordButton = document.getElementById('togglePassword');
const inputFields = document.querySelectorAll('input');
togglePasswordButton.addEventListener('click', function () {
if (passwordField.type === 'password') {
passwordField.type = 'text';
togglePasswordButton.textContent = 'Hide';
} else {
passwordField.type = 'password';
togglePasswordButton.textContent = 'Show';
}
});
signInForm.addEventListener('submit', function (event) {
if (!signInForm.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
signInForm.classList.add('was-validated');
// Show validation feedback messages after form submission attempt
const invalidInputs = signInForm.querySelectorAll(':invalid');
invalidInputs.forEach(function (input) {
input.classList.add('is-invalid');
input.nextElementSibling.style.display = 'block';
});
});
inputFields.forEach(function (input) {
input.addEventListener('input', function () {
if (input.checkValidity()) {
input.classList.remove('is-invalid');
input.nextElementSibling.style.display = 'none';
}
});
});
</script>
</body>
</html>
Output:
How to Create Form Layouts with Bootstrap ?
Form Layouts in Bootstrap refer to the arrangement and presentation of form elements within a web page. To create Form Layouts with Bootstrap, utilize grid system classes to structure forms horizontally or vertically, and enhance them with input groups, inline forms, and responsive designs for improved user interaction and aesthetics.
Below Bootstrap layouts can be used to create a form layout:
Table of Content
- Vertical Form Layout
- Horizontal Form Layout
- Inline Form Layout
Contact Us