Inline Form Layout
In an inline form layout, form elements are displayed horizontally in a single line, with labels and input fields inline. This layout is useful for compact forms or when horizontal space is limited.
Example: The below code creates a inline form using the Bootstrap form classes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Inline Form</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-success
d-flex justify-content-center
align-items-center"
style="min-height: 100vh;">
<form id="inlineForm"
class="row row-cols-lg-auto
g-3 align-items-center"
onsubmit="return validateForm()">
<div class="col-12">
<label class="visually-hidden"
for="inlineFormInputGroupUsername">
Username
</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text"
class="form-control"
id="inlineFormInputGroupUsername"
placeholder="Username" required>
</div>
</div>
<div class="col-12">
<label class="visually-hidden"
for="inlineFormInputPassword">
Password
</label>
<div class="input-group">
<input type="password"
class="form-control"
id="inlineFormInputPassword"
placeholder="Password" required>
<button type="button"
class="btn btn-outline-secondary
bg-primary
text-light
border-primary"
onclick="togglePassword()">
Show/Hide
</button>
</div>
</div>
<div class="col-12">
<label class="visually-hidden"
for="inlineFormSelectPref">
Preference
</label>
<select class="form-select"
id="inlineFormSelectPref" required>
<option selected disabled>Choose...</option>
<option value="1">Mumbai</option>
<option value="2">Delhi</option>
<option value="3">Noida</option>
</select>
</div>
<div class="col-12">
<button type="submit"
class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script>
function validateForm() {
const username = document.getElementById(
"inlineFormInputGroupUsername").value;
const password = document.getElementById(
"inlineFormInputPassword").value;
const preference = document.getElementById(
"inlineFormSelectPref").value;
if (!username || !password || !preference) {
alert("Please fill in all fields");
return false;
}
if (password.length < 8) {
alert("Password must be at least 8 characters long");
return false;
}
return true;
}
function togglePassword() {
const passwordField = document.getElementById("inlineFormInputPassword");
if (passwordField.type === "password") {
passwordField.type = "text";
} else {
passwordField.type = "password";
}
}
</script>
</body>
</html>
Output:
Form Layouts with Bootstrap Example 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