Bootstrap Vertical Forms
Bootstrap Vertical Forms organize form elements vertically, stacking them on top of each other. This layout is ideal for forms with fewer fields or when vertical alignment is preferred for a cleaner, more organized appearance.
Example: In this example we creates a Bootstrap-styled container with a green “w3wiki” heading, followed by a vertical form with input fields for username and password, and buttons for login and registration.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Vertical Forms</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h4>Bootstrap Vertical Forms</h4>
<form action="">
<div class="form-group">
<label for="id1">User Name</label>
<input class="form-control"
type="text"
id="id1"
placeholder="Enter your User Name">
</div>
<div class="form-group">
<label for="id2">Password</label>
<input class="form-control"
type="password"
id="id2"
placeholder="Enter your password">
</div>
<div class="container">
<button type="button"
class="btn btn-success">
Login
</button>
<button type="button"
class="btn btn-secondary">
Register
</button>
</div>
</form>
</div>
</body>
</html>
Output:
Bootstrap Vertical Forms Example Output
Bootstrap Forms Alignment Types
Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development.
Bootstrap Forms Types:
Bootstrap provides 3 types of form Alignment layouts, namely:
Table of Content
- Bootstrap Vertical Forms:
- Bootstrap Horizontal Forms:
- Bootstrap Inline Forms:
We’ll look into each of them separately: